export

export 문은 JavaScript 모듈에서 함수, 객체, 원시 값을 내보낼 때 사용합니다. 내보낸 값은 다른 프로그램에서 import 문으로 가져가 쓸 수 있습니다.

내보내는 모듈은 선언 여부와 관계 없이 엄격 모드입니다. export 문을 HTML 내장 스크립트에 사용할 수는 없습니다.

구문

export { name1, name2, …, nameN };
export { variable1 as name1, variable2 as name2, …, nameN };
export let name1, name2, …, nameN; // var, const에서 동일
export let name1 = …, name2 = …, …, nameN; // var, const에서 동일
export function FunctionName(){...}
export class ClassName {...}

export default expression;
export default function (…) { … } // class, function* 에서 동일
export default function name1(…) { … } // class, function* 에서 동일
export { name1 as default, … };

export * from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;
export { default } from …;

nameN

내보낼 식별자 이름. import를 사용해 다른 스크립트에서 가져갈 수 있습니다.

설명

내보내기에는 두 종류, 유명^named과 기본^default 내보내기가 있습니다. 모듈 하나에서 유명 내보내기는 여러 개 존재할 수 있지만, 기본 내보내기는 하나만 가능합니다. 각 종류는 위의 구문 중 하나와 대응합니다.

• 유명 내보내기

  // 먼저 선언한 함수 내보내기
  export { myFunction };
  
  // 상수 내보내기
  export const foo = Math.sqrt(2);

• 기본 내보내기 (함수)

  export default function() {}

• 기본 내보내기 (클래스)

  export default class {}

유명 내보내기는 여러 값을 내보낼 때 유용합니다. 가져올 때는 내보낼 때와 동일한 이름을 사용하거나, import { name as newName } 구문을 사용해야 합니다.

반면 기본 내보내기는 어떤 이름으로도 가져올 수 있습니다.

let k; export default k = 12; // test.js 파일

import m from './test'; // k가 기본 내보내기이기 때문에 가져오는 이름으로 m을 사용해도 됨

console.log(m);         // 12 기록

다음 구문으로는 다른 모듈의 기본 내보내기를 다시 내보낼 수 없습니다.

export * from …;

대신 이렇게 써야 합니다.

export {default} from 'mod';

예제

유명 내보내기 사용

어떤 모듈에서 다음과 같은 코드를 가진다고 해보겠습니다.

// module "my-module.js"
function cube(x) {
  return x * x * x;
}
const foo = Math.PI + Math.SQRT2;
var graph = {
    options: {
        color:'white',
        thickness:'2px'
    },
    draw: function() {
        console.log('From graph draw function');
    }
}
export { cube, foo, graph };

다른 스크립트에서는 아래와 같이 사용할 수 있습니다.

// You should use this script in html with the type module.
// For example:
//   <script type="module" src="./demo.js"></script>
//
// Open the page in a http server, otherwise there will be a CORS policy error.
//
// script demo.js

import { cube, foo, graph } from 'my-module';
graph.options = {
    color:'blue',
    thickness:'3px'
}; 
graph.draw();
console.log(cube(3)); // 27
console.log(foo);    // 4.555806215962888

기본 내보내기 사용

단일 값을 내보낼 때나 모듈의 폴백^fallback 값이 필요할 땐 기본 내보내기를 사용할 수 있습니다.

// module "my-module.js"
export default function cube(x) {
  return x * x * x;
}

그런 다음, 다른 스크립트에서 가져오는건 간단합니다:

import cube from './my-module.js';
console.log(cube(3)); // 27

export default를 사용할 때 var, let, const는 사용하지 못합니다.

명세

브라우저 호환성

같이 보기

• import
• ES6 in Depth: Modules, Hacks blog post by Jason Orendorff
• Axel Rauschmayer's book: "Exploring JS: Modules"