export 문은 지정된 파일(또는 모듈)에서 함수 또는 오브젝트, 원시 타입들을 export 하는데 사용됩니다.

Note: 이 기능은 현재 Safari와 Chrome 브라우저에서 기본적으로 구현되어있습니다. Traceur CompilerBabelRollup 과 같은 많은 트랜스파일러에서 구현이 되어있습니다.

문법

export { name1, name2, …, nameN };
export { variable1 as name1, variable2 as name2, …, nameN };
export let name1, name2, …, nameN; // 또는 var
export let name1 = …, name2 = …, …, nameN; // 또는 var, const

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 …;
nameN
내보낼 식별자 이름 (import를 통해 다른 스크립트에서 가져올 수 있습니다).

설명

export는 두 가지의 다른 타입이 있는데, 각각의 타입은 위의 문법 중 하나에 대응됩니다:

  • Named exports:
    export { myFunction }; // exports a function declared earlier
    export const foo = Math.sqrt(2); // 상수 exports
  • Default exports (스크립트 당 딱 하나):
    export default myFunctionOrClass
    // 여기에는 세미콜론이 없습니다.

Named exports는 여러 값을 export 하는데 유용합니다. import하는 동안, 해당 값을 참조하기 위해 같은 이름을 사용할 수 있습니다.

default export의 경우, 모듈 당 딱 하나의 default export가 있습니다. default export는 함수 또는 클래스, 오브젝트, 혹은 다른 것들이 될 수 있습니다. 이값은 가장 간단하게 import 할 수 있도록 하기 때문에 내보낼 값 중 "메인"에 해당하는 값으로 고려해야합니다.

예제

named exports 사용하기

모듈에서 우리는 다음과 같은 코드를 사용할 수 있습니다:

// module "my-module.js"
export function cube(x) {
  return x * x * x;
}
const foo = Math.PI + Math.SQRT2;
export { foo };

이 방법으로 우리는 다른 스크립트에서 사용할 수 있습니다(cf. import):

import { cube, foo } from 'my-module.js';
console.log(cube(3)); // 27
console.log(foo);    // 4.555806215962888

default export 사용하기

우리가 단일 값을 내보내거나 모듈에 대한 대체 값을 원한다면 우리는 default export를 사용할 수 있습니다:

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

그런 다음, 다른 스크립트에서 default export를 가져오는 것은 간단합니다:

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

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

명세

Specification Status Comment
ECMAScript 2015 (6th Edition, ECMA-262)
The definition of 'Exports' in that specification.
Standard Initial definition.
ECMAScript Latest Draft (ECMA-262)
The definition of 'Exports' in that specification.
Draft  

브라우저 호환

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung InternetNode.js
Basic supportChrome Full support 61Edge Full support 16
Full support 16
Full support 15
Disabled
Disabled From version 15: this feature is behind the Experimental JavaScript Features preference.
Firefox Full support 60
Full support 60
No support 54 — 60
Disabled
Disabled From version 54 until version 60 (exclusive): this feature is behind the dom.moduleScripts.enabled preference. To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 47Safari Full support 10.1WebView Android No support NoChrome Android Full support 61Edge Mobile Full support YesFirefox Android Full support 60
Full support 60
No support 54 — 60
Disabled
Disabled From version 54 until version 60 (exclusive): this feature is behind the dom.moduleScripts.enabled preference. To change preferences in Firefox, visit about:config.
Opera Android Full support 47Safari iOS Full support 10.1Samsung Internet Android No support Nonodejs ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
User must explicitly enable this feature.
User must explicitly enable this feature.

참고

문서 태그 및 공헌자

이 페이지의 공헌자: yonggoo.noh, LeeJunyeol, umbria, haydnhkim
최종 변경자: yonggoo.noh,