--- title: export slug: Web/JavaScript/Reference/Statements/export tags: - ECMAScript 2015 - JavaScript - Modules - Reference - Statement translation_of: Web/JavaScript/Reference/Statements/export --- <div>{{jsSidebar("Statements")}}</div> <p><strong><code>export</code></strong> 문은 JavaScript 모듈에서 함수, 객체, 원시 값을 내보낼 때 사용합니다. 내보낸 값은 다른 프로그램에서 {{jsxref("Statements/import", "import")}} 문으로 가져가 사용할 수 있습니다.</p> <p>내보내는 모듈은 <code>"use strict"</code>의 존재 유무와 상관없이 무조건 <a href="/ko/docs/Web/JavaScript/Reference/Strict_mode">엄격 모드</a>입니다. <code>export</code> 문은 HTML 안에 작성한 스크립트에서는 사용할 수 없습니다.</p> <h2 id="구문">구문</h2> <pre class="syntaxbox">// 하나씩 내보내기 export let <var>name1</var>, <var>name2</var>, …, <var>nameN</var>; // var, const도 동일 export let <var>name1</var> = …, <var>name2</var> = …, …, <var>nameN</var>; // var, const도 동일 export function functionName(){...} export class ClassName {...} // 목록으로 내보내기 export { <var>name1</var>, <var>name2</var>, …, <var>nameN</var> }; // 내보내면서 이름 바꾸기 export { <var>variable1</var> as <var>name1</var>, <var>variable2</var> as <var>name2</var>, …, <var>nameN</var> }; // 비구조화로 내보내기 export const { <var>name1</var>, <var>name2: bar</var> } = o; // 기본 내보내기 export default <em>expression</em>; export default function (…) { … } // also class, function* export default function name1(…) { … } // also class, function* export { <var>name1</var> as default, … }; // 모듈 조합 export * from …; // does not set the default export export * as name1 from …; export { <var>name1</var>, <var>name2</var>, …, <var>nameN</var> } from …; export { <var>import1</var> as <var>name1</var>, <var>import2</var> as <var>name2</var>, …, <var>nameN</var> } from …; export { default } from …;</pre> <dl> <dt><code>nameN</code></dt> <dd>내보낼 식별자 이름. {{jsxref("Statements/import", "import")}}를 사용해 다른 스크립트에서 가져갈 수 있습니다.</dd> </dl> <h2 id="설명">설명</h2> <p>내보내기에는 두 종류, <strong>유명</strong>(named)과 <strong>기본</strong>(default) 내보내기가 있습니다. 모듈 하나에서, 유명 내보내기는 여러 개 존재할 수 있지만 기본 내보내기는 하나만 가능합니다. 각 종류는 위의 구문 중 하나와 대응합니다.</p> <ul> <li>유명 내보내기 <pre class="brush: js">// 먼저 선언한 식별자 내보내기 export { myFunction, myVariable }; // 각각의 식별자 내보내기 // (변수, 상수, 함수, 클래스) export let myVariable = Math.sqrt(2); export function myFunction() { ... }; </pre> </li> <li>기본 내보내기 <pre class="brush: js">// 먼저 선언한 식별자 내보내기 export { myFunction as default }; // 각각의 식별자 내보내기 export default function () { ... }; export default class { ... } </pre> </li> </ul> <p>유명 내보내기는 여러 값을 내보낼 때 유용합니다. 가져갈 때는 내보낸 이름과 동일한 이름을 사용해야 합니다.</p> <p>반면 기본 내보내기는 어떤 이름으로도 가져올 수 있습니다.</p> <pre class="brush: js line-numbers language-js"><code class="language-js"><span class="comment token">// test.js</span> <span class="keyword token">let</span> k<span class="punctuation token">;</span> <span class="keyword token">export</span> <span class="keyword token">default</span> k <span class="operator token">=</span> <span class="number token">12</span><span class="punctuation token">;</span></code></pre> <pre class="brush: js line-numbers language-js"><code class="language-js"><span class="comment token">// 임의의 다른 파일</span> <span class="keyword token">import</span> m <span class="keyword token">from</span> <span class="string token">'./test'</span><span class="punctuation token">;</span> <span class="comment token">// k가 기본 내보내기이므로, 가져오는 이름으로 k 대신 m을 사용해도 문제 없음</span> console<span class="punctuation token">.</span><span class="function token">log</span><span class="punctuation token">(</span>m<span class="punctuation token">)</span><span class="punctuation token">;</span> <span class="comment token">// 12 기록</span></code></pre> <p>식별자 충돌을 피하기 위해 유명 내보내기 중 이름을 바꿔줄 수도 있습니다.</p> <pre class="brush: js line-numbers language-js"><code class="language-js"><span class="keyword token">export</span> <span class="punctuation token">{</span> myFunction <span class="keyword token">as</span> function1<span class="punctuation token">,</span> myVariable <span class="keyword token">as</span> variable <span class="punctuation token">}</span><span class="punctuation token">;</span></code></pre> <h3 id="다시_내보내기_조합">다시 내보내기 / 조합</h3> <p>부모 모듈이 자식 모듈을 가져와서 다시 내보낼 수도 있습니다. 즉, 여러 개의 모듈을 모아놓을 하나의 모듈을 만들 수 있습니다.</p> <pre class="brush: js">export foo from 'bar.js'; </pre> <p>위 구문은 아래와 동일합니다.</p> <pre class="brush: js">import foo from 'bar.js'; export foo; </pre> <h2 id="예제">예제</h2> <h3 id="유명_내보내기_사용">유명 내보내기 사용</h3> <p>어떤 모듈에서 다음과 같은 코드를 가진다고 해보겠습니다.</p> <pre class="brush: js">// 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 };</pre> <p>다른 스크립트에서는 아래와 같이 사용할 수 있습니다.</p> <pre class="brush: js">// 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</pre> <h3 id="기본_내보내기_사용">기본 내보내기 사용</h3> <p>단일 값을 내보낼 때나 모듈의 폴백 값이 필요할 땐 기본 내보내기를 사용할 수 있습니다.</p> <pre class="brush: js">// module "my-module.js" export default function cube(x) { return x * x * x; }</pre> <p>그런 다음, 다른 스크립트에서 가져오는건 간단합니다:</p> <pre class="brush: js">import cube from './my-module.js'; console.log(cube(3)); // 27</pre> <p><code>export default</code>를 사용할 때 <code>var</code>, <code>let</code>, <code>const</code>는 사용하지 못합니다.</p> <h2 id="명세">명세</h2> <table class="standard-table"> <tbody> <tr> <th scope="col">Specification</th> <th scope="col">Status</th> <th scope="col">Comment</th> </tr> <tr> <td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td> <td>{{Spec2('ESDraft')}}</td> <td></td> </tr> <tr> <td>{{SpecName('ES2015', '#sec-exports', 'Exports')}}</td> <td>{{Spec2('ES2015')}}</td> <td>Initial definition.</td> </tr> </tbody> </table> <h2 id="브라우저_호환성">브라우저 호환성</h2> <p>{{Compat("javascript.statements.export")}}</p> <h2 id="같이_보기">같이 보기</h2> <ul> <li>{{jsxref("Statements/import", "import")}}</li> <li><a href="/ko/docs/Web/JavaScript/Guide/Modules">JavaScript 모듈</a> 안내서</li> <li><a href="https://hacks.mozilla.org/2015/08/es6-in-depth-modules/">ES6 in Depth: Modules</a>, Hacks blog post by Jason Orendorff</li> <li><a href="https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/">ES modules: A cartoon deep-dive</a>, Hacks blog post by Lin Clark</li> <li><a href="http://exploringjs.com/es6/ch_modules.html">Axel Rauschmayer's book: "Exploring JS: Modules"</a></li> </ul>