1 files changed, 199 insertions, 0 deletions
diff --git a/files/ko/web/javascript/reference/statements/export/index.html b/files/ko/web/javascript/reference/statements/export/index.html
new file mode 100644
index 0000000000..1c15d4e7f9
--- /dev/null
+++ b/files/ko/web/javascript/reference/statements/export/index.html
@@ -0,0 +1,199 @@
+---
+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>