모듈
- 애플리케이션을 구상하는 개별적 요소로서 재사용 가능한 코드 조각
- 세부사항을 캡슐화 및 공개가 필요한 API만을 외부에 노출
- 모듈은 파일 단위로 분리
- 명시적으로 모듈을 로드하여 재사용
- 즉, 분리되다가도 로드에 의해 애플리케이션의 일원이 됨
- 개발 효율성과 유지보수성을 높인다.
전역 객체(Global Object)
- 자바스크립트 파일을 여러 개의 파일로 분리하여 script 태그로 로드하여도
- 분리된 자바스크립트 파일들이 결국 하나의 자바스크립트 파일 내에 있는 것처럼 하나의 전역 객체를 공유한다.
- 따라서 분리된 자바스크립트 파일들이 하나의 전역을 갖게 되어 전역 변수가 중복되는 등의 문제가 발생할 수 있다. 이것으로는 모듈화를 구현할 수 없다.
type="module" 어트리뷰트
- 자바스크립트 파일은 모듈로서 동작하게 된다.
모듈 스코프
- ES6 모듈은 파일 자체의 스코프를 제공
- 즉, 독자적인 모듈 스코프를 갖는다.
- 따라서, 모듈 내에서 var 키워드로 선언한 변수는 더 이상 전역 변수가 아니며
- window 객체의 프로퍼티도 아니다.
ES5 모듈
// foo.js
var x = 'foo';
// 변수 x는 전역 변수이다.
console.log(window.x); // foo
// bar.js
// foo.js에서 선언한 전역 변수 x와 중복된 선언이다.
var x = 'bar';
// 변수 x는 전역 변수이다.
// foo.js에서 선언한 전역 변수 x의 값이 재할당되었다.
console.log(window.x); // bar//ES5
<html>
<body>
<script src="foo.js"></script>
<script src="bar.js"></script>
</body>
</html>ES6 모듈
// foo.mjs
var x = 'foo';
console.log(x); // foo
// 변수 x는 전역 변수가 아니며 window 객체의 프로퍼티도 아니다.
console.log(window.x); // undefined
// bar.mjs
// 변수 x는 foo.mjs에서 선언한 변수 x와 스코프가 다른 변수이다.
var x = 'bar';
console.log(x); // bar
// 변수 x는 전역 변수가 아니며 window 객체의 프로퍼티도 아니다.
console.log(window.x); // undefined//ES6
<!DOCTYPE html>
<html>
<body>
<script type="module" src="foo.mjs"></script>
<script type="module" src="bar.mjs"></script>
</body>
</html>export 키워드
- 모듈은 독자적인 스코프를 갖기 때문에
- 선언한 모든 식별자는 기본적으로 해당 모듈 내부에서만 참조 가능
- 만약 모듈 안에서 선언한 식별자를 외부에 공개하여 참조가능하게 하고 싶다면
export키워드 사용하여- 선언된 변수, 함수, 클래스 모두 export (내보내기) 할 수 있다.
선언문 앞에 export 키워드
// lib.mjs
// 변수의 공개
export const pi = Math.PI;
// 함수의 공개
export function square(x) {
return x * x;
}
// 클래스의 공개
export class Person {
constructor(name) {
this.name = name;
}
}한번에 export
// lib.mjs
const pi = Math.PI;
function square(x) {
return x * x;
}
class Person {
constructor(name) {
this.name = name;
}
}
// 변수, 함수 클래스를 하나의 객체로 구성하여 공개
export { pi, square, Person };import 키워드
- 모듈에서 내보낸(export) 대상을 로드하려면
import키워드 사용
식별자로 import 하기
// app.mjs
// 같은 폴더 내의 lib.mjs 모듈을 로드.
// lib.mjs 모듈이 export한 식별자로 import한다.
// ES6 모듈의 파일 확장자를 생략할 수 없다.
import { pi, square, Person } from './lib.mjs';
console.log(pi); // 3.141592653589793
console.log(square(10)); // 100
console.log(new Person('Lee')); // Person { name: 'Lee' }한꺼번에 import 하기
import+*+as+객체 이름 지정
// app.mjs
import * as lib from './lib.mjs';
console.log(lib.pi); // 3.141592653589793
console.log(lib.square(10)); // 100
console.log(new lib.Person('Lee')); // Person { name: 'Lee' }이름 변경하여 import 하기
// app.mjs
import { pi as PI, square as sq, Person as P } from './lib.mjs';
console.log(PI); // 3.141592653589793
console.log(sq(2)); // 4
console.log(new P('Kim')); // Person { name: 'Kim' }
모듈에서 하나만 import 하기
default키워드 사용default사용 시 var,let,const 사용 불가default키워드로 내보낸 모듈은{..}없이 임의의 이름으로 import 한다.
// lib.mjs
export default function (x) {
return x * x;
}
// lib.mjs
export default () => {};
// => OK
export default const foo = () => {};
// => SyntaxError: Unexpected token 'const'
// app.mjs
import square from './lib.mjs';
console.log(square(3)); // 9
냠소현 개발일지