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는 사용하지 못합니다.

명세

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 AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung InternetNode.js
exportChrome 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 61Firefox 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 44Safari iOS Full support 10.3Samsung Internet Android Full support 8.0nodejs ?

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.

같이 보기