모듈은 구현 세부 사항을 캡슐화하고 공개 API를 노출해 다른 코드에서 쉽게 로드하고 사용할 수 있도록 재사용 가능한 코드 조각이다.
ES6에서는 클라이언트 사이드 자바스크립트에서도 동작하는 모듈 기능을 추가하였다.
단, 현재 대부분의 브라우저가 ES6의 모듈을 지원하지 않고 있으므로 현재의 브라우저에서 ES6 모듈을 사용하려면 SystemJS, RequireJS 등의 모듈 로더 또는 Webpack 등의 모듈 번들러를 사용하여야 한다.
// test.js
export const x = 100;
export function hello(name){
return `Hello, ${name}`;
}
export class Person{
constructor(job){
this.job = job;
}
}
//test.js
const x = 100;
function hello(name){
return `Hello, ${name}`;
}
class Person{
constructor(job){
this.job = job;
}
}
export {x, hello, Person};
// main.js (test.js와 같은 폴더 내에 있다고 가정)
import {x, hello, Person} from './test' //export한 이름으로 import한다.
console.log(x); //100
console.log(hello('dev')); //Hello, dev
console.log(new Person('dev')); //Person {job: "dev"}
// main.js (test.js와 같은 폴더 내에 있다고 가정)
import * as test from './test'
console.log(test.x); //100
console.log(test.hello('dev')); //Hello, dev
console.log(new test.Person('dev')); //Person {job: "dev"}