path: root/files/ko/web/javascript/reference/statements/export/index.html

---
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:
//   &lt;script type="module" src="./demo.js"&gt;&lt;/script&gt;
//
// 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>단일 값을 내보낼 때나 모듈의 폴백<sup>fallback</sup> 값이 필요할 땐 기본 내보내기를 사용할 수 있습니다.</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><font face="Open Sans, arial, sans-serif">e</font>xport 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>