1 files changed, 205 insertions, 0 deletions
diff --git a/files/uk/web/javascript/reference/statements/export/index.html b/files/uk/web/javascript/reference/statements/export/index.html
new file mode 100644
index 0000000000..ef946fa4e4
--- /dev/null
+++ b/files/uk/web/javascript/reference/statements/export/index.html
@@ -0,0 +1,205 @@
+---
+title: export
+slug: Web/JavaScript/Reference/Statements/export
+translation_of: Web/JavaScript/Reference/Statements/export
+---
+<div>{{jsSidebar("Statements")}}</div>
+
+<p><span class="seoSummary">Вираз <strong><code>export</code></strong> використовується для створення модулів у Javascript для експортування функцій, об'єктів, або примітивних значень з модуля щоб їх можна було використовувати в інших програмах за допомогою виразу {{jsxref("Statements/import", "import")}}.</span></p>
+
+<p>Експортовані модулі знаходяться в {{jsxref("Strict_mode","strict mode")}} незалежно від того чи ви оголошуєте їх як такі чи ні. Вираз експорт не може бути використаним в вбудованих скріптах (embedded scripts).</p>
+
+<h2 id="Синтакс">Синтакс</h2>
+
+<p>Існує три види експортів</p>
+
+<ol>
+ <li>Іменовані експорти (Нуль або більше експортів в модулі)</li>
+ <li>Дефолтний експорт (Один на модуль)</li>
+ <li>Гібридні експорти</li>
+</ol>
+
+<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 (…) { … } // також class, function*
+export default function name1(…) { … } // також class, function*
+export { <var>name1</var> as default, … };
+
+//  Агрегаціямодулів
+export * 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><var>nameN</var></code></dt>
+ <dd>Змінна яку потрібно експортувати (щоб імпортувати за допомогою {{jsxref("Statements/import", "import")}} в іншому скрипті).</dd>
+</dl>
+
+<h2 id="Опис">Опис</h2>
+
+<p>Існує два типи експортів, <strong>іменовані</strong> і <strong>дефолтні</strong>. Ви можете мати багато іменованих в модулі, але тільки один дефолтний експорт. Кожен тип має відповідність у синтаксі наведеному вище:</p>
+
+<p>Іменовані експорти:</p>
+
+<pre class="brush: js">// експорт функціоналу оголошеного раніше
+export { myFunction, myVariable };
+
+// експортуємо індивідуальний функціонал (можу бути var, let,
+// const, function, class)
+export let myVariable = Math.sqrt(2);
+export function myFunction() { ... };
+</pre>
+
+<p>Дефолтні експорти:</p>
+
+<pre class="brush: js">// експорт функціоналу оголошеного раніше як дефолтний
+export { myFunction as default };
+
+// експорт індивідуального функціоналу як дефолтний
+export default myFunction() { ... }
+export default class { .. }</pre>
+
+<p>Іменоввані експорти є корисними при експортуванні декількох значень. Під час імпорту іменованих експортів обов'язково потрібно використовувати те саме ім'я відповідного об'єкта.</p>
+
+<p>Але дефолтний експорт може бути імпортований з будь яким ім'ям, наприклад:</p>
+
+<pre class="brush: js">// файл test.js
+let k; export default k = 12;
+</pre>
+
+<pre class="brush: js">// якийсь інший файл
+import m from './test'; // Візьміть до уваги що ми можемо використовувати import m замість import k, тому що k є дефолтним експортом
+console.log(m);        // виведе 12
+</pre>
+
+<p>Ви також можете переіменовувати іменні експорти щоб уникнути конфліктів:</p>
+
+<pre class="brush: js">export { <var>myFunction</var> as <var>function1</var>,<var>
+         myVariable</var> as variable };</pre>
+
+<p>І складати підмодулі докупи в батьківському модулі щоб можна було їх імпортувати з цього модуля.</p>
+
+<pre class="brush: js">// В parentModule.js
+export { myFunction, myVariable } from 'childModule1.js';
+export { myClass } from 'childModule2.js';
+</pre>
+
+<pre class="brush: js">// В модулі вищого рівня
+import { myFunction, myVariable, myClass } from 'parentModule.js'</pre>
+
+<h2 id="Приклад">Приклад</h2>
+
+<h3 id="Використання_іменних_експортів">Використання іменних експортів</h3>
+
+<p>В модулі <code>my-module.js</code>, ми можемо написати такий код:</p>
+
+<pre class="brush: js">// модуль "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>Потім у модулі вищого порядку всередині вашої HTML сторінки ми можемо написати:</p>
+
+<pre class="brush: js">import { cube, foo, graph } from './my-module.js';
+
+graph.options = {
+    color:'blue',
+    thickness:'3px'
+};
+
+graph.draw();
+console.log(cube(3)); // 27
+console.log(foo);    // 4.555806215962888</pre>
+
+<p>Важливо звернути увагу на наступне:</p>
+
+<ul>
+ <li>Ви маєте добавити скріпт в ваш HTML за допомогою тега  {{htmlelement("script")}} і типом type="module", якщо хочете щоб він розпізнавався як модуль.</li>
+ <li>Ви не можете виконувати JS модулі за допомогою  <code>file://</code> URL — ви отримаєте <a href="/en-US/docs/Web/HTTP/CORS">CORS</a> помилки. Ви маєте виконувати модулі церез http сервер.</li>
+</ul>
+
+<h3 id="Використання_дефолтного_експорта">Використання дефолтного експорта</h3>
+
+<p>Якщо ви хочете експортувати одне значення з вашого модулю ви можете використати дефолтний екпорт:</p>
+
+<pre class="brush: js">// модуль "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>
+
+<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="/en-US/docs/Web/JavaScript/Guide/Modules">JavaScript modules</a> guide</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>