비전공자 개발일기

Javascript 본문

Javascript

Javascript

HiroDaegu 2021. 8. 16. 00:31
728x90
SMALL

모듈: 자바스크립트 파일 하나, 복잡하고 많은 양의 코드를 기능에 따라 파일로 나눠서 관리하기 위함

 

  • 모듈 스코프: 외부에서 자유롭게 접근하는 걸 막기위해 파일 안에서 독립적인 스코프를 가지고 있어야함
<body>
  <script type="module" src="index.js"></script>
</body>
  • 모듈 문법: export, import
// printer.js
export const title = 'Printer';

export function print(value) {
  console.log(value);
};

// index.js
import { title, print } from './printer.js';

print(title);

// 이름 바꿔서 import
import { title as printerTitle, print, printArr } from './printer.js';
import { title, data as members } from './members.js';

printer(title);
arrPrinter(members);

// 한꺼번에 import
import * as printerJS from './printer.js';

console.log(printerJS.title); // Printer
console.log(printerJS.print); // ƒ print(value) { console.log(value); }

// 한꺼번에 export
const title = 'Printer';

function print(value) {
  console.log(value);
}

function printArr(arr) {
  arr.forEach((el, i) => {
    console.log(`${i + 1}. ${el}`);
  });
}

export { title as printerTitle, print, printArr };
  • default export
const title = 'Printer';

function print(value) {
  console.log(value);
}

export default print;
----------------------------------------------------------------
import printerJS from './printer.js';

console.log(printerJS.title); // Printer
console.log(printerJS.print); // ƒ print(value) { console.log(value); }

Object literal & Factory function

function createUser(email, birthdate) {
  const user = {
    email,
    birthdate,
    buy(item) {
      console.log(`${this.email} buys ${item.name}`);
    },
  };
  return user;
}

const user1 = createUser('23@google.com', '19921111');
const user2 = createUser('456@google.com', '1992323');
const user3 = createUser('789@google.com', '19934444');

Constructor function

function User(email, birthdate) {
  this.email = email;
  this.birthdate = birthdate;
  this.buy = function (item) {
    console.log(`${this.email} buys ${item.name}`);
  };
}

const user1 = createUser('23@google.com', '19921111');
const user2 = createUser('456@google.com', '1992323');
const user3 = createUser('789@google.com', '19934444');

Class

class Car {
  constructor(color, speed) {
    this.color = color;
    this.speed = speed;
  }
  
  run() {
    console.log(`Runs at ${this.speed}`)
  }
}

const Car1 = new Car('blue', '100km/h')

Car1.run()

 

728x90
LIST

'Javascript' 카테고리의 다른 글

Javascript Clock  (0) 2021.08.26
Javascript Login with LocalStorage  (0) 2021.08.25
Javascript  (0) 2021.08.14
Javascript  (0) 2021.08.13
Javascript  (0) 2021.08.12
'Javascript' Related Articles more