모듈

모듈이란 애플리케이션을 구성하는 개별적 요소로서 재사용이 가능한 코드 조각을 말한다.

모듈의 특징

• 모듈은 파일 단위로 분리되어 있다.
• 애플리케이션이 로드되면 분리되어 있던 모듈들이 애플리케이션에 로드된다.
• 모듈은 기능별로 분리되어 있어 개발의 효율성이 좋다.
• 재사용성과 유지보수성을 높일 수 있다.

모듈의 스코프

ES6의 모듈기능을 사용하지 않으면 각각의 js파일들은 자신들의 스코프를 가지지 않는다. 즉 모든 js파일들은 하나의 전역을 공유하게 된다.

• index.html에 2개의 js파일이 로드되어있다. js파일들은 하나의 전역을 공유한다.

• 각각의 js파일에서 선언한 변수 x는 중복선언되어 에러가 발생한다.

모듈의 동작

이를 해결하기 위해 script파일에 type="module" 속성을 추가해주면 js파일마다 각자의 스코프를 가지게 된다.

• type="module" 속성을 추가해주면 모듈 내에서 선언한 변수는 모듈 외부에서 참조할 수 없게된다.

export 키워드

모듈 안에서 선언한 식별자를 외부 모듈이 참조할 수 있게하는 키워드

• 변수, 함수, 클래스 모두 사용 가능하다.
• 여러 개 export 가능하다.

export let  x= 'hello';

export function square(x){
  return x*x;
}
console.log(x); 

import 키워드

모듈에서 export 한 대상을 로드하기 위해 사용하는 키워드

• 한 모듈에서 export한 대상을 다른 모듈에서 import해 대상을 로드한다.

import { x, square} from './practice.js';

console.log(x); // hello
console.log(square(4)); // 16

모듈이 export한 식별자를 각각 지정할 필요 없이 하나의 이름으로 한번에 import할 수 있다.

import * as pr1 from '/practice.js';

console.log(pr1.x);
console.log(pr1.square(4));

• import되는 식별자는 as 뒤에 오는 이름의 객체에 프로퍼티로 할당된다.

이름을 변경하여 import 할 수 있다.

import {x as xx , square as square2} from './practice.js';

console.log(xx);
console.log(square2(4));

• x는 xx로 식별자 이름 변경
• square함수는 square2함수로 이름 변경

모듈에서 식별자 하나만 export 하고 싶을 경우 export 뒤에 default 키워드 사용

• default 사용시 변수 키워드 사용 불가능(var,let,const)

//practice1.js
export default x= 'hello';

//practice2.js
import x from './practice.js';
console.log(x); // hello