(22.10.11) ES6 - 모듈(Modules)

Modules - 자바스크립트 모듈화 방법

• ES5에서는 모듈화 방법이 없어서 모듈화를 위해 모듈 로더 라이브러리(AMD, Common JS)를 사용했었다.
• 모듈이란? 특정 기능을 수행하는 한 단위다.
• 자바스크립트 모듈 로더 라이브러리 기능을 js 언어 자체에서 지원
• 호출되기 전까지는 코드 실행과 동작을 하지 않는 특징이 있음

// libs/math.js
export function sum(x,y) {
	return x + y;
    }
export var pi = 3.141593;

//	main.js
import {sum} from 'libs/math.js';
sum(1, 2);

 

• ES5는 자바 스크립트는 파일을 나눠도 자바처럼 스코프가 달라지지 않았다.
• 범수의 유효범위 즉, 안전성의 측면에서 모듈을 지원
• 제일 많이 사용하는 것이 바로 export default
  default 는 1개의 파일에서 하나만 export가 가능하다.

//	util.js
export default function (x) {
	return console.log(x);
    }
    
//	main.js
import util from 'util.js';
console.log(util);	//	function (x) { return console.log(x); }
util("hi");

//	app.js
import log from 'util.js';
console.log(log);
log("hi");

• 똑같은 파일의 똑같은 함수를 import 할 때 이름을 다르게해서 필요에 따라 골라서 사용할 수 있다.