모듈 module

모듈이란?

코드를 재사용 가능한 단위로 만드는 방법이다.

규모가 큰 프로젝트에서 효과적으로 관리할 수 있다.

 

특징

• html 파싱 중 만나게 되면 html 파싱이 끝난 후 script를 다운로드 한다.(defer 와 같은 점이다)
• 모듈은 엄격모드로 실행된다.
• 모듈의 최상위 this 는 undefined 이다.

 

모듈은 type에 module 을 추가하여 사용한다.

<script type="mobule" src="경로"></script>

 

모듈 스코프

모듈은 선언하게 되면 자바스크립트 파일을 각각의 모듈로 보며, 각각의 스코프를 가진다.

예를들어 type module 인 파일 2개가 있다고 가정할 때 아래와 같이 module1 에 있는 배열을 module2 에서 출력하려고 하면 에러가 나는 것을 볼 수 있다.

[module1.js] 

let arr = [1,2,3,4,5]

 

[module2.js]

console.log(arr)

 

ReferenceError 결과화면

 

다른 모듈에서 사용하기 위해서는 arr 을 외부에서 사용할 수 있도록 export 를 지정하고, 

사용할 파일에서 import 하여 불러와야 한다.

아래 코드와 같이 수정하면 arr을 다른 파일에서 사용할 수 있게 된다.

[module1.js] 

//방법 1
export let arr = [1,2,3,4,5]

//또는 방법 2
export { arr };
let arr = [1,2,3,4,5];

 

[module2.js]

import { arr } from "./module1.js";
console.log(arr)

 

모듈의 this

<script type="module">
  console.log(this); //undefined
</script>

브라우저에서 실행했을 때, module에서 최상위 this 는 window 객체가 아닌 undefined 가 나온다.

 

named export 와 default export

named export

하나의 모듈에서 여러 개의 값을 사용할 수 있도록 export 하는 것을 말한다.

 

[module1.js] 

//방법 1
export let arr = [1,2,3,4,5]

//또는 방법 2
export { arr };
let arr = [1,2,3,4,5];

 

[module2.js]

import { arr } from "./module1.js";
console.log(arr)

 

default export

모듈에서 하나의 값을 export 할 때 사용하며, 이름을 자유롭게 지정하여 사용할 수 있다.

[module1.js]

let arr = [1, 2, 3, 4];
export default arr;

 

[module2.js]

import numArr from "./main.js"; //이름을 numArr로 가져옴
console.log(numArr);