diff options
Diffstat (limited to 'files/uk/web/javascript/reference/statements')
28 files changed, 5174 insertions, 0 deletions
diff --git a/files/uk/web/javascript/reference/statements/async_function/index.html b/files/uk/web/javascript/reference/statements/async_function/index.html new file mode 100644 index 0000000000..da4ac5f24a --- /dev/null +++ b/files/uk/web/javascript/reference/statements/async_function/index.html @@ -0,0 +1,272 @@ +--- +title: async function +slug: Web/JavaScript/Reference/Statements/async_function +tags: + - JavaScript + - async + - Функція + - приклад +translation_of: Web/JavaScript/Reference/Statements/async_function +--- +<div> +<div>{{jsSidebar("Statements")}}</div> + +<p><span class="seoSummary">Оголошення <code><strong>async function</strong></code> визначає <strong>асинхронну функцію</strong> — функцію, яка є об'єктом {{jsxref("Global_Objects/AsyncFunction","AsyncFunction")}}.</span> Асинхронні функції мають окремий від решти функцій порядок виконання, через <a href="/uk/docs/Web/JavaScript/EventLoop">цикл подій</a>, вертаючи неявний {{jsxref("Promise","проміс")}} в якості результату. Але синтаксис та структура коду, який використовує асинхронні функції, виглядають, як стандартні синхронні функції.</p> + +<div class="noinclude"> +<p>Ви також можете визначити асинхронну функцію за допомогою {{jsxref("Operators/async_function", "виразу async function", "", 1)}}.</p> +</div> +</div> + +<div>{{EmbedInteractiveExample("pages/js/statement-async.html", "taller")}}</div> + +<p class="hidden">The source for this interactive demo is stored in a GitHub repository. If you'd like to contribute to the interactive demo project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">async function <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>name</code></dt> + <dd>Ім'я функції.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>Ім'я аргумента, що передається у функцію.</dd> +</dl> + +<dl> + <dt><code>statements</code></dt> + <dd>Інструкції, що складають тіло функції.</dd> +</dl> + +<h3 id="Значення_що_повертається">Значення, що повертається</h3> + +<p>Об'єкт <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>, який буде вирішений зі значенням, поверненим асинхронною функцією, або відхилений з винятком, не перехопленим всередині асинхронної функції.</p> + +<h2 id="Опис">Опис</h2> + +<p>Асинхронна функція може містити вираз {{jsxref("Operators/await", "await")}}, який призупиняє виконання функції, щоб дочекатись на вирішення об'єкта <code>Promise</code>, після чого відновлює виконання асинхронної функції та повертає вирішене значення.<br> + <br> + <strong>Ключове слово <code>await</code> працює тільки всередині асинхронних функцій.</strong> Якщо ви використаєте його поза межами тіла асинхронної функції, то отримаєте помилку <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError">SyntaxError</a></code>.</p> + +<p>Поки асинхронна функція призупинена, функція, що її викликала, продовжує виконання (отримавши неявний проміс, повернений асинхронною функцією).</p> + +<div class="note"> +<p>Метою <code>async</code>/<code>await</code> є спрощення синхронного використання промісів, а також виконання певних дій над групою промісів. Як проміси схожі на структуровані зворотні виклики, так використання <code>async</code>/<code>await</code> схоже на поєднання <a href="/uk/docs/Web/JavaScript/Guide/Iterators_and_Generators">генераторів</a> та промісів.</p> +</div> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Асинхронні_функції_та_порядок_виконання">Асинхронні функції та порядок виконання</h3> + +<pre class="brush: js">function resolveAfter2Seconds() { + console.log("починається повільний проміс") + return new Promise(resolve => { + setTimeout(function() { + resolve("повільний") + console.log("повільний проміс завершено") + }, 2000); + }); +} + +function resolveAfter1Second() { + console.log("починається швидкий проміс") + return new Promise(resolve => { + setTimeout(function() { + resolve("швидкий") + console.log("швидкий проміс завершено") + }, 1000); + }); +} + +async function sequentialStart() { + console.log('==ПОСЛІДОВНИЙ СТАРТ==') + + // 1. Виконання доходить сюди майже миттєво + const slow = await resolveAfter2Seconds() + console.log(slow) // 2. це виконується 2 секунди після 1. + + const fast = await resolveAfter1Second() + console.log(fast) // 3. це виконується 3 секунди після 1. +} + +async function concurrentStart() { + console.log('==КОНКУРЕНТНИЙ СТАРТ з await==') + const slow = resolveAfter2Seconds() // запускає таймер негайно + const fast = resolveAfter1Second() // запускає таймер негайно + + // 1. Виконання доходить сюди майже миттєво + console.log(await slow) // 2. це виконується 2 секунди після 1. + console.log(await fast) // 3. це виконується 2 секунди після 1., одразу після 2., оскільки швидкий вже вирішений +} + +function concurrentPromise() { + console.log('==КОНКУРЕНТНИЙ СТАРТ з Promise.all==') + return Promise.all([resolveAfter2Seconds(), resolveAfter1Second()]).then((messages) => { + console.log(messages[0]) // повільний + console.log(messages[1]) // швидкий + }); +} + +async function parallel() { + console.log('==ПАРАЛЕЛЬНИЙ з await Promise.all==') + + // Починає 2 "роботи" паралельно та чекає, поки обидві не завершаться + await Promise.all([ + (async()=>console.log(await resolveAfter2Seconds()))(), + (async()=>console.log(await resolveAfter1Second()))() + ]) +} + +// Ця функція не обробляє помилки. Дивіться застереження нижче! +function parallelPromise() { + console.log('==ПАРАЛЕЛЬНИЙ з Promise.then==') + resolveAfter2Seconds().then((message)=>console.log(message)) + resolveAfter1Second().then((message)=>console.log(message)) +} + +sequentialStart() // через 2 секунди виводить "повільний", далі через ще 1 секунду "швидкий" + +// чекає, поки попередній завершиться +setTimeout(concurrentStart, 4000) // через 2 секунди виводить "повільний", а потім "швидкий" + +// знову чекає +setTimeout(concurrentPromise, 7000) // такий самий, як і concurrentStart + +// знову чекає +setTimeout(parallel, 10000) // справді паралельний: через 1 секунду виводить "швидкий", потім ще через 1 секунду "повільний" + +// знову чекає +setTimeout(parallelPromise, 13000) // такий самий, як і parallel +</pre> + +<h4 id="await_та_паралелізм"><code>await</code> та паралелізм</h4> + +<p>У <code>sequentialStart</code> виконання відкладається на 2 секунди для першого <code>await</code>, а потім ще на секунду для другого <code>await</code>. Другий таймер не створюється, поки перший не завершиться, отже, код завершує виконання через 3 секунди.</p> + +<p>У <code>concurrentStart</code> обидва таймери створюються і потім очікуються у <code>await</code>. Таймери виконуються конкурентно, це означає, що код завершує виконання через 2, а не через 3 секунди, тобто, як найповільніший таймер.<br> + Однак, виклики <code>await</code> все одно запускаються один за одним, це означає, що другий <code>await</code> чекатиме, поки перший не завершиться. У цьому випадку результат швидшого таймера обробляється після повільнішого.</p> + +<p>Якщо ви бажаєте виконувати дві або більше робіт паралельно, ви маєте використовувати <code>await Promise.all([job1(), job2()])</code>, як це показано у прикладі <code>parallel</code>.</p> + +<div class="warning"> +<h4 id="asyncawait_проти_Promisethen_та_обробка_помилок"><code>async</code>/<code>await</code> проти Promise#then та обробка помилок</h4> + +<p>Більшість асинхронних функцій також можна написати як звичайні функції, що використовують проміси. Однак, асинхронні функції менш каверзні, коли доходить до обробки помилок.</p> + +<p>І <code>concurrentStart</code>, і <code>concurrentPromise</code> функціонально еквівалентні:</p> + +<ul> + <li>У <code>concurrentStart</code>, якщо будь-який з викликів з <code>await</code>-ом зазнає невдачі, виняток буде автоматично перехоплений, виконання асинхронної функції перерветься, а помилка спливе наверх через неявний проміс, що повертається.</li> + <li>Щоб те саме сталось у випадку з Promise, функція має потурбуватись щодо повернення об'єкту <code>Promise</code>, який захопить завершення функції. У <code>concurrentPromise</code> це означає повернення проміса з <code>Promise.all([]).then()</code> через <code>return</code>. До речі, попередня версія цього прикладу забула це зробити!</li> +</ul> + +<p>Однак, асинхронні функції все ж можуть ковтати помилки.<br> + Візьміть для прикладу асинхронну функцію <code>parallel</code>. Якби вона не мала <code>await</code> (чи <code>return</code>) для повернення результату виклику <code>Promise.all([])</code>, будь-яка помилка не спливала б.<br> + В той час, як приклад <code>parallelPromise</code> виглядає простішим, він взагалі не обробляє помилки! Для цього знадобилося б схожа конструкція <code>return </code><code>Promise.all([])</code>.</p> +</div> + +<h3 id="Заміна_ланцюжка_промісів_на_асинхронну_функцію">Заміна ланцюжка промісів на асинхронну функцію</h3> + +<p>API, який вертає {{jsxref("Promise")}}, створить ланцюжок промісів, і це розбиває функцію на багато частин. Розглянемо наступний код:</p> + +<pre class="brush: js">function getProcessedData(url) { + return downloadData(url) // вертає проміс + .catch(e => { + return downloadFallbackData(url) // вертає проміс + }) + .then(v => { + return processDataInWorker(v) // вертає проміс + }) +} +</pre> + +<p>його можна переписати єдиною асинхронною функцією наступним чином:</p> + +<pre class="brush: js">async function getProcessedData(url) { + let v + try { + v = await downloadData(url) + } catch(e) { + v = await downloadFallbackData(url) + } + return processDataInWorker(v) +} +</pre> + +<p>У наведеному вище прикладі немає оператора <code>await</code> після ключового слова <code>return</code>, тому що повернене значення <code>async function</code> неявно загортається у {{jsxref("Promise.resolve")}}.</p> + +<div class="blockIndicator note"> +<h4 id="return_await_promiseValue_проти_return_promiseValue"><code>return await promiseValue;</code> проти <code>return promiseValue;</code></h4> + +<p>Неявне загортання повернених значень у {{jsxref("Promise.resolve")}} не означає, що <code>return await promiseValue;</code> є функціонально еквівалентним <code>return promiseValue;</code></p> + +<p>Розглянемо наступну переробку наведеного вище коду, яка вертає null, якщо <code>processDataInWorker</code> відхиляється з помилкою:</p> + +<pre class="brush: js">async function getProcessedData(url) { + let v; + try { + v = await downloadData(url) + } catch(e) { + v = await downloadFallbackData(url) + } + try { + return await processDataInWorker(v) // Зауважте `return await` у порівнянні з `return` + } catch (e) { + return null + } +} +</pre> + +<p>Варіант <code>return processDataInWorker(v);</code> спричинив би відхилення об'єкта {{jsxref("Promise")}}, поверненого функцією, замість вирішення його зі значенням <code>null</code>, якщо <code>processDataInWorker(v)</code> відхилено.</p> + +<p>Це висвітлює тонку різницю між <code>return foo;</code> та <code>return await foo;</code> — <code>return foo;</code> негайно вертає <code>foo</code> і ніколи не викидає помилку, навіть якщо <code>foo</code> є промісом, який відхиляється. <code>return await foo;</code> <em>чекатиме</em> на вирішення чи відхилення <code>foo</code>, якщо це проміс, і викидає помилку <strong>до повернення</strong>, якщо його відхилено.</p> +</div> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-async-function-definitions', 'async function')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Початкове визначення у ES2017.</td> + </tr> + <tr> + <td>{{SpecName('ES8', '#sec-async-function-definitions', 'async function')}}</td> + <td>{{Spec2('ES8')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.statements.async_function")}}</p> +</div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Operators/async_function", "вираз асинхронної функції")}}</li> + <li>Об'єкт {{jsxref("AsyncFunction")}}</li> + <li>{{jsxref("Operators/await", "await")}}</li> + <li><a href="http://innolitics.com/10x/javascript-decorators-for-promise-returning-functions/">"Decorating Async Javascript Functions" на "innolitics.com"</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/statements/block/index.html b/files/uk/web/javascript/reference/statements/block/index.html new file mode 100644 index 0000000000..4a5dd619aa --- /dev/null +++ b/files/uk/web/javascript/reference/statements/block/index.html @@ -0,0 +1,132 @@ +--- +title: Блок +slug: Web/JavaScript/Reference/Statements/block +tags: + - JavaScript + - Довідка +translation_of: Web/JavaScript/Reference/Statements/block +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><strong>Блок</strong> (або <strong>складена інструкція</strong> у інших мовах) використовується, щоб об'єднати нуль або більше інструкцій. Блок позначається парою фігурних дужок і може мати необов'язкову {{jsxref("Statements/label", "мітку")}}:</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-block.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<h3 id="Блок">Блок</h3> + +<pre class="syntaxbox">{ + <em>StatementList</em> +} +</pre> + +<h3 id="Блок_з_міткою">Блок з міткою</h3> + +<pre class="syntaxbox"><em>LabelIdentifier</em>: { + <em>StatementList</em> +} +</pre> + +<dl> + <dt><code>StatementList</code></dt> + <dd>Інструкції, згруповані всередині блоку.</dd> + <dt><code>LabelIdentifier</code></dt> + <dd>Необов'язкова {{jsxref("Statements/label", "мітка")}} для візуальної ідентифікації або як вказівник для оператора {{jsxref("Statements/break", "break")}}.</dd> +</dl> + +<h2 id="Опис">Опис</h2> + +<p>Блок часто називають <strong>складеною інструкцією</strong> у інших мовах. Він дозволяє використовувати декілька інструкцій там, де JavaScript очікує лише одну. Об'єднання інструкцій у блоки є звичайною практикою у JavaScript. Протилежна поведінка можлива завдяки <a href="/uk/docs/Web/JavaScript/Reference/Statements/Empty">порожньому оператору</a>, де ви не надаєте інструкцію, хоча вона вимагається.</p> + +<p>Блоки часто використовуються у поєднанні з операторами <code><a href="/uk/docs/Web/JavaScript/Reference/Statements/if...else">if</a></code> та <code><a href="/uk/docs/Web/JavaScript/Reference/Statements/for">for</a></code>.</p> + +<h3 id="Правила_області_видимості_блоку">Правила області видимості блоку</h3> + +<h4 id="З_var_та_оголошенням_функцій">З <code>var</code> та оголошенням функцій</h4> + +<p>Змінні, оголошені оператором <code>var</code> або створені <a href="/uk/docs/Web/JavaScript/Reference/Statements/function">оголошенням функцій</a>, <strong>не мають</strong> блочної області видимості. Змінні, створені всередині блоку, додаються у область видимості функції або скрипта, що його містить, і ефект від присвоєння їм значення виходить за межі блоку. Іншими словами, блок не створює область видимості. Для прикладу:</p> + +<pre class="brush: js example-bad">var x = 1; +{ + var x = 2; +} +console.log(x); // виведе 2 +</pre> + +<p>Цей код виведе 2, тому що інструкція <code>var x</code> всередині блоку знаходиться в тій самій області видимості, що й інструкція <code>var x</code> перед блоком.</p> + +<h4 id="З_let_та_const">З <code>let</code> та <code>const</code></h4> + +<p>А ось ідентифікатори, оголошені операторами {{jsxref("Statements/let", "let")}} та {{jsxref("Statements/const", "const")}} <strong>мають </strong>блочну область видимості:</p> + +<pre class="brush: js">let x = 1; +{ + let x = 2; +} +console.log(x); // виведе 1</pre> + +<p>Інструкція <code>x = 2</code> обмежена областю видимості блоку, у якому записана.</p> + +<p>Те саме працює для <code>const</code>:</p> + +<pre class="brush: js">const c = 1; +{ + const c = 2; +} +console.log(c); // виведе 1 і не викине SyntaxError...</pre> + +<p>Зауважте, що <code>const c = 2</code> у області видимості блоку <em>не викине</em> <code>SyntaxError: Identifier 'c' has already been declared</code>, тому що оголошення є унікальним всередині блоку.</p> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-block', 'Block statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-block', 'Block statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.1', 'Block statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-12.1', 'Block statement')}}</td> + <td>{{Spec2('ES3')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-12.1', 'Block statement')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Початкове визначення. Реалізоване у JavaScript 1.0.</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.statements.block")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Statements/while", "while")}}</li> + <li>{{jsxref("Statements/if...else", "if...else")}}</li> + <li>{{jsxref("Statements/let", "let")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/statements/break/index.html b/files/uk/web/javascript/reference/statements/break/index.html new file mode 100644 index 0000000000..700d495bd6 --- /dev/null +++ b/files/uk/web/javascript/reference/statements/break/index.html @@ -0,0 +1,151 @@ +--- +title: break +slug: Web/JavaScript/Reference/Statements/break +tags: + - JavaScript + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Statements/break +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>Оператор <strong>break</strong> перериває виконання поточного циклу, перемикача {{jsxref("Statements/switch", "switch")}} або {{jsxref("Statements/label", "поміченого")}} блоку і передає контроль до наступної за перерваним блоком інструкції.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-break.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code>break [<em>label</em>];</code></pre> + +<dl> + <dt><code>label</code> {{optional_inline}}</dt> + <dd>Ідентифікатор, асоційований з міткою конструкції. Якщо конструкція не є циклом або перемикачем {{jsxref("Statements/switch", "switch")}}, цей параметр є обов'язковим.</dd> +</dl> + +<h2 id="Опис">Опис</h2> + +<p>Оператор <code>break</code> має необов'язкову мітку, яка дозволяє програмі переривати виконання поміченої конструкції. Оператор <code>break</code> має бути розташований всередині конструкції, на яку посилається. Вона може бути будь-яким {{jsxref("Statements/block", "блоком")}} інструкцій; це необов'язково має бути цикл.</p> + +<p>Оператор <code>break</code>, з міткою або без неї, не може використовуватися всередині тіла фукнції, що вкладена у цикл, перемикач або помічений блок, який має перервати оператор <code>break</code>.</p> + +<h2 id="Приклади">Приклади</h2> + +<p>Наступна фукнція містить оператор <code>break</code>, що перериває цикл {{jsxref("Statements/while", "while")}}, коли <code>i</code> дорівнює 3, а після цього поветає значення 3 * <code>x</code>.</p> + +<pre class="brush:js;highlight:[6];">function testBreak(x) { + var i = 0; + + while (i < 6) { + if (i == 3) { + break; + } + i += 1; + } + + return i * x; +}</pre> + +<p>Наступний код використовує оператори <code>break</code> з поміченими блоками. Оператор <code>break</code> має знаходитися всередині будь-якої мітки, на яку посилається. Зауважте, що <code>inner_block</code> вкладений у <code>outer_block</code>.</p> + +<pre class="brush:js;highlight:[1,2,4];">outer_block: { + inner_block: { + console.log('1'); + break outer_block; // перериває обидва inner_block та outer_block + console.log(':-('); // пропускається + } + console.log('2'); // пропускається +} +</pre> + +<p>Наступний код також використовує оператори <code>break</code> з поміченими блоками, але генерує помилку SyntaxError, тому що оператор <code>break</code> знаходиться всередині <code>block_1</code>, але посилається на <code>block_2</code>. Оператор <code>break</code> завжди має знаходитися всередині будь-якої мітки, на яку посилається.</p> + +<pre class="brush:js;highlight:[1,3,6];">block_1: { + console.log('1'); + break block_2; // SyntaxError: label not found +} + +block_2: { + console.log('2'); +} +</pre> + +<p>Помилки SyntaxError також генеруються у наступних прикладах, які використовують оператори <code>break</code> всередині функцій, що вкладені у цикл чи помічений блок, що їх мають перервати оператори <code>break</code>.</p> + +<pre class="brush:js;highlight:[1,3,6];">function testBreak(x) { + var i = 0; + + while (i < 6) { + if (i == 3) { + (function() { + break; + })(); + } + i += 1; + } + +return i * x; +} + +testBreak(1); // SyntaxError: Illegal break statement +</pre> + +<pre class="brush:js;highlight:[1,3,6];">block_1: { + console.log('1'); + ( function() { + break block_1; // SyntaxError: Undefined label 'block_1' + })(); +} +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Початкове визначення. Версія без мітки.</td> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Додано версію з міткою.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.8', 'Break statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-break-statement', 'Break statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-break-statement', 'Break statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.statements.break")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Statements/continue", "continue")}}</li> + <li>{{jsxref("Statements/label", "label")}}</li> + <li>{{jsxref("Statements/switch", "switch")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/statements/class/index.html b/files/uk/web/javascript/reference/statements/class/index.html new file mode 100644 index 0000000000..1350459ce8 --- /dev/null +++ b/files/uk/web/javascript/reference/statements/class/index.html @@ -0,0 +1,119 @@ +--- +title: class +slug: Web/JavaScript/Reference/Statements/class +tags: + - ECMAScript 2015 + - JavaScript + - Довідка + - Класи + - оголошення +translation_of: Web/JavaScript/Reference/Statements/class +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><strong>Оголошення класу</strong> створює новий клас із заданим ім'ям, на основі прототипного наслідування.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-class.html")}}</div> + + + +<div class="noinclude"> +<p>Ви також можете визначити клас, використовуючи {{jsxref("Operators/class", "вираз класу", "", 1)}}. Але, на відміну від виразу класу, оголошення класу не дозволяє повторне оголошення існуючого класу і викине помилку при спробі це зробити. </p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="brush: js">class <em>name</em> [extends] { + // тіло класу +} +</pre> + +<h2 id="Опис">Опис</h2> + +<p>Тіло класу у оголошенні класу виконується у <a href="/uk/docs/Web/JavaScript/Reference/Strict_mode">строгому режимі</a>. Властивість constructor є необов'язковою.</p> + +<p>Оголошення класу не {{Glossary("Hoisting", "виринають")}} (на відміну від <a href="/uk/docs/Web/JavaScript/Reference/Statements/function">оголошення функцій</a>).</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Просте_оголошення_класу">Просте оголошення класу</h3> + +<p>У наступному прикладі ми спочатку визначаємо клас на ім'я Polygon, далі розширюємо його, створюючи клас на ім'я Square. Зауважте, що ключове слово super() може використовуватись лише у конструкторах і має викликатись раніше, ніж використовується ключове слово <code>this</code>.</p> + +<pre class="brush: js">class Polygon { + constructor(height, width) { + this.name = 'Polygon'; + this.height = height; + this.width = width; + } +} + +class Square extends Polygon { + constructor(length) { + super(length, length); + this.name = 'Square'; + } +}</pre> + +<div class="warning"> +<h3 id="Спроба_оголосити_клас_двічі">Спроба оголосити клас двічі</h3> + +<p>Повторне оголошення класу викидає помилку типу.</p> + +<pre class="brush: js">class Foo {}; +class Foo {}; // Uncaught SyntaxError: Identifier 'Foo' has already been declared +</pre> + +<p>Така сама помилка викидається, коли клас був визначений до використання виразу класу.</p> + +<pre class="brush: js">var Foo = class {}; +class Foo {}; // Uncaught TypeError: Identifier 'Foo' has already been declared + +</pre> +</div> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Початкове визначення.</td> + </tr> + <tr> + <td>{{SpecName('ES2016', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ES2016')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES2017', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ES2017')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.statements.class")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Reference/Statements/function">оголошення <code>функції</code></a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators/class">вираз <code>класу</code></a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Classes">Класи</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/statements/const/index.html b/files/uk/web/javascript/reference/statements/const/index.html new file mode 100644 index 0000000000..18e898e6cb --- /dev/null +++ b/files/uk/web/javascript/reference/statements/const/index.html @@ -0,0 +1,232 @@ +--- +title: const +slug: Web/JavaScript/Reference/Statements/const +tags: + - константа +translation_of: Web/JavaScript/Reference/Statements/const +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><strong>Оголошення <code>const</code> </strong> створює посилання на значення, доступне лише для читання. Що <strong>не</strong> гарантує незмінність значення, на котре вказує посилання, а лише той факт, що не можна повторно присвоїти будь-яке значення змінній з відповідним ім'ям.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">const <em>назваКонстантноїЗмінної1 = <em>значення1 [</em>, назваКонстантноїЗмінної<em>2</em> = <em>значення2 [</em>, ... [</em>, <em>назваКонстантноїЗмінноїN</em> = <em><em>значення</em>N]]]</em>;</pre> + +<dl> + <dt><code>значенняN</code></dt> + <dd>Назва константи, будь-який прийнятний {{Glossary("identifier")}} (ідентифікатор).</dd> + <dt><code>значенняN</code></dt> + <dd>Значення константи; будь-яки дозволений вираз (<a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions">expression</a>).</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>This declaration creates a constant that can be either global or local to the function in which it is declared. An initializer for a constant is required; that is, you must specify its value in the same statement in which it's declared (which makes sense, given that it can't be changed later).</p> + +<p>Constants are block-scoped, much like variables defined using the <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a></code> statement. The value of a constant cannot change through re-assignment, and it can't be redeclared.</p> + +<p>All the considerations about the "<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let#Temporal_dead_zone_and_errors_with_let">temporal dead zone</a>" that apply to <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a></code>, also apply to <code>const</code>.</p> + +<p>A constant cannot share its name with a function or a variable in the same scope.</p> + +<h2 id="Examples">Examples</h2> + +<p>The following example demonstrates how constants behave. Try this in your browser console.</p> + +<pre class="brush:js">// NOTE: Constants can be declared with uppercase or lowercase, but a common +// convention is to use all-uppercase letters. + +// define MY_FAV as a constant and give it the value 7 +const MY_FAV = 7; + +// this will throw an error in Firefox and Chrome (but does not fail in Safari) +MY_FAV = 20; + +// will print 7 +console.log("my favorite number is: " + MY_FAV); + +// trying to redeclare a constant throws an error +const MY_FAV = 20; + +// the name MY_FAV is reserved for constant above, so this will also fail +var MY_FAV = 20; + +// this throws an error also +let MY_FAV = 20; + +// it's important to note the nature of block scoping +if (MY_FAV === 7) { + // this is fine and creates a block scoped MY_FAV variable + // (works equally well with let to declare a block scoped non const variable) + const MY_FAV = 20; + + // MY_FAV is now 20 + console.log("my favorite number is " + MY_FAV); + + // this gets hoisted into the global context and throws an error + var MY_FAV = 20; +} + +// MY_FAV is still 7 +console.log("my favorite number is " + MY_FAV); + +// Assigning to A const variable is a syntax error +const A = 1; A = 2; + +// throws an error, missing initializer in const declaration +const FOO; + +// const also works on objects +const MY_OBJECT = {"key": "value"}; + +// Overwriting the object behaves as above (throws an error in Firefox and Chrome but does not fail in Safari) +MY_OBJECT = {"OTHER_KEY": "value"}; + +// However, object keys are not protected, +// so the following statement is executed without problem +MY_OBJECT.key = "otherValue"; // Use Object.freeze() to make object immutable +</pre> + +<h2 id="Specifications">Specifications</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('ES6', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(21)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(36)}}</td> + <td>11</td> + <td>12</td> + <td>5.1</td> + </tr> + <tr> + <td>Reassignment fails</td> + <td>{{CompatChrome(20)}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(13)}}</td> + <td>11</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + <tr> + <td>Allowed in sloppy mode</td> + <td>{{CompatChrome(49.0)}}</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Reassignment fails</td> + <td>{{CompatNo}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + <tr> + <td>Allowed in sloppy mode</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(49.0)}}</td> + <td> </td> + <td> </td> + <td> </td> + <td> </td> + <td>{{CompatChrome(49.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Compatibility_notes">Compatibility notes</h2> + +<p>In earlier versions of Firefox & Chrome and as of Safari 5.1.7 and Opera 12.00, if you define a variable with <code>const</code>, you can still change its value later. It is not supported in Internet Explorer 6-10, but is included in Internet Explorer 11.</p> + +<h3 id="Firefox-specific_notes">Firefox-specific notes</h3> + +<p>The <code>const</code> declaration was implemented in Firefox long before <code>const</code> appeared in the ECMAScript 2015 (ES6) specification. For <code>const</code> ES6 compliance see {{bug(950547)}} and {{bug(611388)}}.</p> + +<ul> + <li>Prior to SpiderMonkey 46 {{geckoRelease(46)}}, a {{jsxref("TypeError")}} was thrown on redeclaration instead of a {{jsxref("SyntaxError")}} ({{bug(1198833)}}).</li> + <li>Starting with SpiderMonkey 36 {{geckoRelease("36")}}: + <ul> + <li><code>{const a=1};a</code> now throws a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError" title="The ReferenceError object represents an error when a non-existent variable is referenced."><code>ReferenceError</code></a> and does not return <code>1</code> anymore due to block-scoping.</li> + <li><code>const a;</code> now throws a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError" title="The SyntaxError object represents an error when trying to interpret syntactically invalid code."><code>SyntaxError</code></a> ("missing = in const declaration<code>"</code>): An initializer is required.</li> + <li><code>const a = 1; a = 2;</code> now also throws a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/SyntaxError" title="The SyntaxError object represents an error when trying to interpret syntactically invalid code."><code>SyntaxError</code></a> ("invalid assignment to const a").</li> + </ul> + </li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/var"><code>var</code></a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/let"><code>let</code></a></li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals#Constants">Constants in the JavaScript Guide</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/statements/continue/index.html b/files/uk/web/javascript/reference/statements/continue/index.html new file mode 100644 index 0000000000..59adc0173a --- /dev/null +++ b/files/uk/web/javascript/reference/statements/continue/index.html @@ -0,0 +1,164 @@ +--- +title: continue +slug: Web/JavaScript/Reference/Statements/continue +tags: + - JavaScript +translation_of: Web/JavaScript/Reference/Statements/continue +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>Оператор <strong>continue</strong> перериває виконання поточної ітерації у поточному або поміченому циклі, і продовжує виконання циклу з наступної ітерації.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-continue.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">continue [<em>label</em>];</pre> + +<dl> + <dt><code>label</code></dt> + <dd>Ідентифікатор, асоційований з міткою циклу.</dd> +</dl> + +<h2 id="Опис">Опис</h2> + +<p>На відміну від оператора {{jsxref("Statements/break", "break")}}, <code>continue</code> не перериває виконання циклу повністю: замість цього,</p> + +<ul> + <li>У циклі {{jsxref("Statements/while", "while")}} він повертається до умови.</li> +</ul> + +<ul> + <li>У циклі {{jsxref("Statements/for", "for")}} він переходить до оновлення виразу.</li> +</ul> + +<p>Оператор <code>continue</code> може містити необов'язкову мітку, яка дозволяє програмі перестрибнути до наступної ітерації поміченого циклу замість поточного циклу. В цьому випадку оператор <code>continue</code> має бути розташований всередині цього поміченого циклу.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_continue_з_while">Використання continue з while</h3> + +<p>Наступний приклад демонструє цикл {{jsxref("Statements/while", "while")}}, що містить оператор <code>continue</code>, який виконується, коли значення <code>i</code> дорівнює 3. Таким чином, <code>n</code> приймає значення 1, 3, 7 та 12.</p> + +<pre class="brush: js">var i = 0; +var n = 0; + +while (i < 5) { + i++; + + if (i === 3) { + continue; + } + + n += i; +} +</pre> + +<h3 id="Використання_continue_з_міткою">Використання continue з міткою</h3> + +<p>У наступному прикладі цикл, помічений як <code>checkiandj</code>, містить цикл, помічений як <code>checkj</code>. Якщо зустрічається <code>continue</code>, програма продовжує виконання з початку циклу <code>checkj</code>. Кожен раз, як зустрічається <code>continue</code>, <code>checkj</code> починає нову ітерацію, поки його умова не поверне false. Коли повертається false, виконується решта циклу <code>checkiandj</code>.</p> + +<p>Якби оператор <code>continue</code> мав мітку <code>checkiandj</code>, програма би продовжувалась з початку циклу <code>checkiandj</code>.</p> + +<p>Дивіться також статтю {{jsxref("Statements/label", "Мітка")}}.</p> + +<pre class="brush: js">var i = 0; +var j = 8; + +checkiandj: while (i < 4) { + console.log('i: ' + i); + i += 1; + + checkj: while (j > 4) { + console.log('j: ' + j); + j -= 1; + + if ((j % 2) == 0) + continue checkj; + console.log(j + ' непарне число.'); + } + console.log('i = ' + i); + console.log('j = ' + j); +} +</pre> + +<p>Виведе:</p> + +<pre class="brush: js">i: 0 + +// початок checkj +j: 8 +7 непарне число. +j: 7 +j: 6 +5 непарне число. +j: 5 +// кінець checkj + +i = 1 +j = 4 + +i: 1 +i = 2 +j = 4 + +i: 2 +i = 3 +j = 4 + +i: 3 +i = 4 +j = 4 +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Початкове визначення. Версія без мітки.</td> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Додана версія з міткою.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.7', 'Continue statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-continue-statement', 'Continue statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-continue-statement', 'Continue statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.statements.continue")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Statements/break", "break")}}</li> + <li>{{jsxref("Statements/label", "label")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/statements/debugger/index.html b/files/uk/web/javascript/reference/statements/debugger/index.html new file mode 100644 index 0000000000..12277d50e5 --- /dev/null +++ b/files/uk/web/javascript/reference/statements/debugger/index.html @@ -0,0 +1,78 @@ +--- +title: debugger +slug: Web/JavaScript/Reference/Statements/debugger +tags: + - JavaScript + - Оператор +translation_of: Web/JavaScript/Reference/Statements/debugger +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><strong>Оператор</strong> <strong>debugger</strong> запускає будь-яку доступну налагоджувальну функціональність, наприклад, встановлення точки переривання. Якщо налагоджувальна функціональність недоступна, цей оператор не матиме ефекту.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox"><code>debugger;</code></pre> + +<h2 id="Приклади">Приклади</h2> + +<p>Наступний приклад демонструє код, у який був вставлений оператор debugger, щоб запустити налагоджувач (якщо він є), коли викликається функція.</p> + +<pre class="brush:js">function potentiallyBuggyCode() { + debugger; + // потенційно помилковий код, через який треба пройти, дослідити і т.д. +}</pre> + +<p>Коли викликається налагоджувач, виконання призупиняється на операторі debugger. Це як точка переривання у коді скрипта.</p> + +<p><a href="https://mdn.mozillademos.org/files/6963/Screen Shot 2014-02-07 at 9.14.35 AM.png"><img alt="Paused at a debugger statement." src="https://mdn.mozillademos.org/files/6963/Screen%20Shot%202014-02-07%20at%209.14.35%20AM.png" style="height: 371px; width: 700px;"></a></p> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-debugger-statement', 'Debugger statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-debugger-statement', 'Debugger statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.15', 'Debugger statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>Початкове визначення</td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-7.5.3', 'Debugger statement')}}</td> + <td>{{Spec2('ES3')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-7.4.3', 'Debugger statement')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Лише згаданий як зарезервоване слово.</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.statements.debugger")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Debugging_JavaScript">Налагодження JavaScript</a></li> + <li><a href="/uk/docs/Tools/Debugger">The Debugger in the Firefox Developer Tools</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/statements/default/index.html b/files/uk/web/javascript/reference/statements/default/index.html new file mode 100644 index 0000000000..648a2ec139 --- /dev/null +++ b/files/uk/web/javascript/reference/statements/default/index.html @@ -0,0 +1,117 @@ +--- +title: default +slug: Web/JavaScript/Reference/Statements/default +translation_of: Web/JavaScript/Reference/Statements/switch +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>Ключове слово <strong>default</strong> може використовуватись у двох ситуаціях у<strong> </strong>JavaScript: у конструкції {{jsxref("Statements/switch", "switch")}} або з оператором {{jsxref("Statements/export", "export")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-default.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<p>У конструкції {{jsxref("Statements/switch", "switch")}}:</p> + +<pre class="syntaxbox">switch (expression) { + case value1: + //Інструкції, що виконуються, коли значення expression дорівнює value1 + [break;] + default: + //Інструкції, що виконуються, коли жодне значення не дорівнює значенню expression + [break;] +}</pre> + +<p>З оператором {{jsxref("Statements/export", "export")}}:</p> + +<pre class="syntaxbox">export default <em>nameN</em> </pre> + +<h2 id="Опис">Опис</h2> + +<p>Більш детально дивіться на сторінках</p> + +<ul> + <li>конструкції {{jsxref("Statements/switch", "switch")}} та</li> + <li>оператора {{jsxref("Statements/export", "export")}}.</li> +</ul> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_default_у_конструкціях_switch">Використання <code>default</code> у конструкціях <code>switch</code></h3> + +<p>У наступному прикладі, якщо <code>expr</code> оцінюється як "Апельсини" або "Яблука", програма зайде або у блок case "Апельсини", або у "Яблука" та виконає відповідну інструкцію. Ключове слово <code>default</code> допоможе у будь-якому іншому випадку та виконає пов'язану інструкцію.</p> + +<pre class="brush: js">switch (expr) { + case 'Апельсини': + console.log('Апельсини коштують $0.59 за кілограм.'); + break; + case 'Яблука': + console.log('Яблука коштують $0.32 за кілограм.'); + break; + default: + console.log('На жаль, в нас закінчились ' + expr + '.'); +}</pre> + +<h3 id="Використання_default_з_export">Використання <code>default</code> з <code>export</code></h3> + +<p>Якщо ви хочете експортувати єдине значення, або вам потрібне запасне значення модуля, можна використати default у export:</p> + +<pre class="brush: js">// module "my-module.js" +let cube = function cube(x) { + return x * x * x; +}; +export default cube;</pre> + +<p>Тоді у іншому скрипті буде прямий імпорт експорту за замовчуванням:</p> + +<pre class="brush: js">// module "another-module.js" +import cube from 'my-module'; //default export gave us the liberty to say import cube, instead of import cube from 'my-module' +console.log(cube(3)); // 27 +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-switch-statement', 'switch statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-exports', 'Exports')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-exports', 'Exports')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.statements.default")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Statements/export", "export")}}</li> + <li>{{jsxref("Statements/switch", "switch")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/statements/do...while/index.html b/files/uk/web/javascript/reference/statements/do...while/index.html new file mode 100644 index 0000000000..676ce0a4ca --- /dev/null +++ b/files/uk/web/javascript/reference/statements/do...while/index.html @@ -0,0 +1,101 @@ +--- +title: do...while +slug: Web/JavaScript/Reference/Statements/do...while +tags: + - JavaScript + - Цикл +translation_of: Web/JavaScript/Reference/Statements/do...while +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>Оператор <strong><code>do...while</code></strong> створює цикл, який виконує вказану інструкцію, доки перевірочна умова не буде оцінена як false. Умова оцінюється після виконання інструкції, в результаті вказана інструкція виконується принаймні один раз.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-dowhile.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">do + <em>statement</em> +while (<em>condition</em>); +</pre> + +<dl> + <dt><code>statement</code></dt> + <dd>Інструкція, яка виконується принаймні один раз, і виконується повторно кожен раз, коли умова оцінюється як true. Для виконання кількох інструкцій, використовуйте {{jsxref("Statements/block", "блок")}} (<code>{ ... }</code>), щоб згрупувати ці інструкції.</dd> +</dl> + +<dl> + <dt><code>condition</code></dt> + <dd>Вираз, який оцінюється після кожного проходу циклу. Якщо <code>condition</code> оцінюється як true, <code>statement</code> виконується повторно. Коли <code>condition</code> оцінюється як false, контроль переходить до наступної після <code>do...while</code> інструкції.</dd> +</dl> + +<h2 id="Examples" name="Examples">Приклад</h2> + +<h3 id="Використання_do...while">Використання <code>do...while</code></h3> + +<p>У наступному прикладі цикл <code>do...while</code> виконується принаймні один раз, і продовжує виконуватись, доки <code>i</code> не перестане бути менше 5.</p> + +<h3 id="HTML-зміст">HTML-зміст</h3> + +<pre class="brush: html"><div id="example"></div></pre> + +<h3 id="JavaScript-зміст">JavaScript-зміст</h3> + +<pre class="brush: js">var result = ''; +var i = 0; +do { + i += 1; + result += i + ' '; +} while (i > 0 && i < 5); // Хоча i == 0, цикл виконається, оскільки починається без перевірки +document.getElementById('example').innerHTML = result;</pre> + +<h3 id="Результат">Результат</h3> + +<p>{{ EmbedLiveSample('Examples') }}</p> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Початкове визначення. Реалізоване у JavaScript 1.2</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.6.1', 'do-while statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-do-while-statement', 'do-while statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Кінцева крапка з комою ; тепер необов'язкова.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-do-while-statement', 'do-while statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.statements.do_while")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Statements/while", "while")}}</li> + <li>{{jsxref("Statements/for", "for")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/statements/empty/index.html b/files/uk/web/javascript/reference/statements/empty/index.html new file mode 100644 index 0000000000..cdb9945396 --- /dev/null +++ b/files/uk/web/javascript/reference/statements/empty/index.html @@ -0,0 +1,105 @@ +--- +title: Порожній оператор +slug: Web/JavaScript/Reference/Statements/Empty +tags: + - JavaScript + - Оператор +translation_of: Web/JavaScript/Reference/Statements/Empty +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><strong>Порожній оператор</strong> використовується, щоб не надавати інструкції там, де синтаксис JavaScript їх очікує.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-empty.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">; +</pre> + +<h2 id="Опис">Опис</h2> + +<p>Порожній оператор - це крапка з комою (;), вона позначає, що жодної інструкції не буде виконано, навіть якщо синтаксис JavaScript її вимагає. Протилежна поведінка, коли ви бажаєте виконати декілька інструкцій, але JavaScript дозволяє лише одну, можлива за допомогою <a href="/uk/docs/Web/JavaScript/Reference/Statements/block">блоку</a>; він об'єднує декілька інструкцій у одну.</p> + +<h2 id="Приклади">Приклади</h2> + +<p>Порожній оператор іноді використовується у циклах. Дивіться наступний приклад з порожнім тілом циклу:</p> + +<pre class="brush: js">var arr = [1, 2, 3]; + +// Присвоїти всім елементам масиву значення 0 +for (i = 0; i < arr.length; arr[i++] = 0) /* порожній оператор */ ; + +console.log(arr) +// [0, 0, 0] +</pre> + +<p><strong>Заувага</strong>: Гарною ідеєю є коментувати навмисне використання порожнього оператора, оскільки його буває важко відрізнити від звичайної крапки з комою. У наступному прикладі його використання, мабуть, не є навмисним:</p> + +<pre class="brush: js">if (condition); // Обережно, цей "if" нічого не робить! + killTheUniverse() // Тому це ніколи не виконається!!! +</pre> + +<p>Інший приклад: Конструкція <a href="/uk/docs/Web/JavaScript/Reference/Statements/if...else"><code>if...else</code></a> без фігурних дужок (<code>{}</code>). Якщо <code>three</code> дорівнює <code>true</code>, то нічого не відбудеться, <code>four</code> не грає ролі, і, таким чином, функція <code>launchRocket()</code> у випадку <code>else</code> не буде виконана.</p> + +<pre class="brush: js">if (one) + doOne(); +else if (two) + doTwo(); +else if (three) + ; // тут нічого +else if (four) + doFour(); +else + launchRocket();</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-empty-statement', 'Empty statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-empty-statement', 'Empty statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.3', 'Empty statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-12.3', 'Empty statement')}}</td> + <td>{{Spec2('ES3')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-12.3', 'Empty statement')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Початкове визначення.</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.statements.empty")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Statements/block", "Блок")}}</li> +</ul> 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> diff --git a/files/uk/web/javascript/reference/statements/for-await...of/index.html b/files/uk/web/javascript/reference/statements/for-await...of/index.html new file mode 100644 index 0000000000..9c0440c346 --- /dev/null +++ b/files/uk/web/javascript/reference/statements/for-await...of/index.html @@ -0,0 +1,253 @@ +--- +title: for await...of +slug: Web/JavaScript/Reference/Statements/for-await...of +tags: + - JavaScript + - await + - Інструкція + - асинхронний + - перебір +translation_of: Web/JavaScript/Reference/Statements/for-await...of +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><strong>Інструкція</strong> <strong><code>for await...of</code> </strong>створює цикл, що перебирає як асинхронні ітерабельні об'єкти, так і синхронні ітерабельні об'єкти, в тому числі вбудовані {{jsxref("String")}}, {{jsxref("Array")}}, подібні до масивів об'єкти (наприклад, {{jsxref("Functions/arguments", "arguments")}} чи {{DOMxRef("NodeList")}}), {{jsxref("TypedArray")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, а також визначені користувачем асинхронні/синхронні ітерабельні об'єкти. Вона викликає користувацький хук до ітерацій з командами, що виконуватимуться для значення кожної окремої властивості об'єкта. Як і оператор {{jsxref("Operators/await", "await")}}, інструкція може використовуватись лише всередині {{jsxref("Statements/async_function", "асинхронної функції")}}.</p> + +<div class="blockIndicator note"> +<p><code>for await...of</code> не працює з асинхронними ітераторами, які не є асинхронними ітерабельними об'єктами.</p> +</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">for await (<var>variable</var> of <var>iterable</var>) { + <var>statement</var> +} +</pre> + +<dl> + <dt><code><var>variable</var></code></dt> + <dd>На кожній ітерації значення іншої властивості присвоюється змінній <code><var>variable</var></code>. Змінна <code><var>variable</var></code> може бути оголошена через <code>const</code>, <code>let</code> або <code>var</code>.</dd> + <dt><code><var>iterable</var></code></dt> + <dd>Об'єкт, чиї ітерабельні властивості перебираються.</dd> +</dl> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Перебір_асинхронних_ітерабельних_обєктів">Перебір асинхронних ітерабельних об'єктів</h3> + +<p>Ви також можете перебирати об'єкт, який явно реалізує протокол асинхронного ітерабельного об'єкта:</p> + +<pre class="brush:js">const asyncIterable = { + [Symbol.asyncIterator]() { + return { + i: 0, + next() { + if (this.i < 3) { + return Promise.resolve({ value: this.i++, done: false }); + } + + return Promise.resolve({ done: true }); + } + }; + } +}; + +(async function() { + for await (let num of asyncIterable) { + console.log(num); + } +})(); + +// 0 +// 1 +// 2 +</pre> + +<h3 id="Перебір_асинхронних_генераторів">Перебір асинхронних генераторів</h3> + +<p>Оскільки значення, що повертають асинхронні генератори, відповідають протоколу асинхронного ітерабельного об'єкта, їх можна перебирати циклом <code>for await...of</code>.</p> + +<pre class="brush: js">async function* asyncGenerator() { + let i = 0; + while (i < 3) { + yield i++; + } +} + +(async function() { + for await (let num of asyncGenerator()) { + console.log(num); + } +})(); +// 0 +// 1 +// 2</pre> + +<p>Для більш конкретного прикладу перебору асинхронного генератора за допомогою <code>for await...of</code>, розгляньте перебір даних з API.</p> + +<p>Цей приклад спочатку створює асинхронний ітерабельний об'єкт для потоку даних, а далі використовує його, щоб дізнатись розмір відповіді від API.</p> + +<pre class="brush: js">async function* streamAsyncIterable(stream) { + const reader = stream.getReader(); + try { + while (true) { + const { done, value } = await reader.read(); + if (done) { + return; + } + yield value; + } + } finally { + reader.releaseLock(); + } +} +// Отримує дані з URL та обчислює розмір відповіді за допомогою +// асинхронного генератора. +async function getResponseSize(url) { + const response = await fetch(url); + // Міститиме розмір відповіді, у байтах. + let responseSize = 0; + // Цикл for-await-of. Асинхронно перебирає кожну частку відповіді. + for await (const chunk of streamAsyncIterable(response.body)) { + // Збільшує загальну довжину відповіді. + responseSize += chunk.length; + } + + console.log(`Розмір відповіді: ${responseSize} байтів`); + // очікуваний результат: "Розмір відповіді: 1071472 байтів" + return responseSize; +} +getResponseSize('https://jsonplaceholder.typicode.com/photos');</pre> + +<h3 id="Перебір_синхронних_ітерабельних_обєктів_та_генераторів">Перебір синхронних ітерабельних об'єктів та генераторів</h3> + +<p>Цикл <code>for await...of</code> також споживає синхронні ітерабельні об'єкти та генератори. У цьому випадку він внутрішньо чекає на видані значення перед тим, як присвоювати їх керівній змінній циклу.</p> + +<pre class="brush: js">function* generator() { + yield 0; + yield 1; + yield Promise.resolve(2); + yield Promise.resolve(3); + yield 4; +} + +(async function() { + for await (let num of generator()) { + console.log(num); + } +})(); +// 0 +// 1 +// 2 +// 3 +// 4 + +// порівняйте з циклом for-of: + +for (let numOrPromise of generator()) { + console.log(numOrPromise); +} +// 0 +// 1 +// Promise { 2 } +// Promise { 3 } +// 4 +</pre> + +<div></div> + +<div class="blockIndicator note"> +<p><strong>Заувага</strong>: остерігайтеся видавати відхилені проміси з синхронного генератора. У цьому випадку <code>for await...of</code> викидає виняток при споживанні відхиленого проміса та НЕ ВИКЛИКАЄ блоки <code>finally</code> всередині цього генератора. Це може бути небажаним, якщо вам треба звільнити певні виділені ресурси за допомогою <code>try/finally</code>.</p> +</div> + +<pre class="brush: js">function* generatorWithRejectedPromises() { + try { + yield 0; + yield 1; + yield Promise.resolve(2); + yield Promise.reject(3); + yield 4; + throw 5; + } finally { + console.log('викликано finally') + } +} + +(async function() { + try { + for await (let num of generatorWithRejectedPromises()) { + console.log(num); + } + } catch (e) { + console.log('перехоплено', e) + } +})(); +// 0 +// 1 +// 2 +// перехоплено 3 + +// порівняйте з циклом for-of: + +try { + for (let numOrPromise of generatorWithRejectedPromises()) { + console.log(numOrPromise); + } +} catch (e) { + console.log('перехоплено', e) +} +// 0 +// 1 +// Promise { 2 } +// Promise { <rejected> 3 } +// 4 +// перехоплено 5 +// викликано finally +</pre> + +<p>Для того, щоб блоки <code>finally</code> у синхронному генераторі завжди викликались, використовуйте належну форму циклу, <code>for await...of</code> для асинхронних генераторів та <code>for...of</code> для синхронних, та чекайте на видані проміси явно всередині циклу.</p> + +<pre class="brush: js">(async function() { + try { + for (let numOrPromise of generatorWithRejectedPromises()) { + console.log(await numOrPromise); + } + } catch (e) { + console.log('перехоплено', e) + } +})() +// 0 +// 1 +// 2 +// перехоплено 3 +// викликано finally</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'ECMAScript Language: The for-in, for-of, and for-await-of Statements')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.statements.for_await_of")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Global_Objects/Symbol/asyncIterator", "Symbol.asyncIterator")}}</li> + <li>{{jsxref("Statements/for...of", "for...of")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/statements/for...in/index.html b/files/uk/web/javascript/reference/statements/for...in/index.html new file mode 100644 index 0000000000..f8bb6221be --- /dev/null +++ b/files/uk/web/javascript/reference/statements/for...in/index.html @@ -0,0 +1,149 @@ +--- +title: for...in +slug: Web/JavaScript/Reference/Statements/for...in +tags: + - JavaScript + - Інструкція + - Цикл +translation_of: Web/JavaScript/Reference/Statements/for...in +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>Цикл <strong><code>for...in</code></strong> перебирає усі <a href="/uk/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">перелічувані властивості</a> об'єкта, ключами яких є рядки (ігноруючи ті, ключами яких є <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Symbol">символи</a>), в тому числі успадковані перелічувані властивості.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-forin.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate">for (<var>variable</var> in <var>object</var>) + statement</pre> + +<dl> + <dt><code>variable</code></dt> + <dd>Нове ім'я властивості призначається параметру <em>variable</em> на кожній ітерації.</dd> + <dt><code>object</code></dt> + <dd>Об'єкт, чиї не символьні перелічувані властивості перебираються.</dd> +</dl> + +<h2 id="Опис">Опис</h2> + +<p>Цикл <code>for...in</code> перебирає лише перелічувані, не символьні властивості. Об'єкти, створені вбудованими конструкторами, як <code>Array</code> та <code>Object</code>, успадковують неперелічувані властивості від <code>Object.prototype</code> та <code>String.prototype</code>, такі як метод {{jsxref("String.indexOf", "indexOf()")}} у {{jsxref("String")}} або метод {{jsxref("Object.toString", "toString()")}} у {{jsxref("Object")}}. Цикл перебиратиме усі особисті перелічувані властивості об'єкта й ті, які об'єкт успадковує від прототипу конструктора (властивості, розташовані ближче до об'єкта у ланцюжку прототипів, заміщують властивості прототипу).</p> + +<h3 id="Видалені_додані_або_модифіковані_властивості">Видалені, додані або модифіковані властивості</h3> + +<p>Цикл <code>for...in</code> перебирає властивості об'єкта у довільному порядку (дивіться оператор {{jsxref("Operators/delete", "delete")}}, щоб дізнатись, чому не можна покладатися на удавану впорядкованість перебору, принаймні, у кросбраузерних налаштуваннях).</p> + +<p>Якщо властивість була змінена під час однієї ітерації і потім відвідується під час наступної, її значенням у циклі буде значення під час наступної ітерації. Властивість, що була видалена до того, як була відвідана, не буде відвідана пізніше. Властивості, додані до об'єкта під час поточного перебору, можуть бути або відвідані, або пропущені під час цього перебору.</p> + +<p>Загалом, краще не додавати, не змінювати й не видаляти властивості об'єкта під час перебору, окрім властивості, що відвідується у даний момент. Немає гарантії, що додана властивість буде відвідана, чи що змінена властивість (якщо це не поточна властивість) буде відвідана до чи після того, як була змінена, чи що видалена властивість не була відвідана до того, як була видалена.</p> + +<h3 id="Перебір_масиву_та_for...in">Перебір масиву та for...in</h3> + +<div class="note"> +<p><strong>Заувага:</strong> цикл <code>for...in</code> не слід використовувати для перебору {{jsxref("Array", "масиву")}}, де порядок індексів є важливим.</p> +</div> + +<p>Індекси масивів є просто перелічуваними властивостями з цілочисельними іменами, в усьому іншому вони ідентичні загальним властивостям об'єкта. Немає гарантій, що <code>for...in</code> поверне індекси у певному порядку. Цикл <code>for...in</code> поверне усі перелічувані властивості, в тому числі не цілочисельні імена та успадковані властивості.</p> + +<p>Оскільки порядок перебору залежить від реалізації, перебір масиву може відвідувати елементи масиву непослідовно. Тому краще використовувати цикл {{jsxref("Statements/for", "for")}} з числовим індексом (або {{jsxref("Array.prototype.forEach()")}} чи {{jsxref("Statements/for...of", "for...of")}}) для перебору масивів, коли порядок звернення до елементів важливий.</p> + +<h3 id="Перебір_лише_особистих_властивостей">Перебір лише особистих властивостей</h3> + +<p>Якщо ви бажаєте розглядати властивості, притаманні лише самому об'єкту, а не його прототипам, скористайтесь {{jsxref("Object.getOwnPropertyNames", "getOwnPropertyNames()")}} або виконайте перевірку {{jsxref("Object.prototype.hasOwnProperty", "hasOwnProperty()")}} (також можна використати {{jsxref("Object.prototype.propertyIsEnumerable", "propertyIsEnumerable()")}}). Альтернативно, якщо ви певні, що не буде зовнішнього втручання у код, ви можете розширити вбудовані прототипи методом перевірки.</p> + +<h2 id="Навіщо_використовувати_for...in">Навіщо використовувати for...in?</h2> + +<p>Враховуючи, що цикл <code>for...in</code> створений для перебору властивостей об'єкта, не рекомендований для використання у масивах, і що існують такі варіанти як <code>Array.prototype.forEach()</code> та <code>for...of</code>, яка взагалі може бути користь від <code>for...in</code>?</p> + +<p>Він може бути найбільш практичним для налагодження, оскільки ним легко перевіряти властивості об'єкта (виводячи їх у консоль чи іншим чином). Хоча масиви часто більш зручні для зберігання даних, у ситуаціях, де для роботи з даними потрібні пари ключ-значення (де властивості виконують роль "ключів"), можливі випадки, коли ви захочете перевірити, чи містить якийсь з цих ключів певне значення.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_for...in">Використання for...in</h3> + +<p>Наведений цикл <code>for...in</code> перебирає усі перелічувані, не символьні властивості об'єкта та виводить рядки імен властивостей та їхніх значень.</p> + +<pre class="brush: js notranslate">var obj = {a: 1, b: 2, c: 3}; + +for (const prop in obj) { + console.log(`obj.${prop} = ${obj[prop]}`); +} + +// Виведе: +// "obj.a = 1" +// "obj.b = 2" +// "obj.c = 3"</pre> + +<h3 id="Перебір_особистих_властивостей">Перебір особистих властивостей</h3> + +<p>Наступна функція ілюструє використання {{jsxref("Object.prototype.hasOwnProperty", "hasOwnProperty()")}}: успадковані властивості не виводяться.</p> + +<pre class="brush: js notranslate">var triangle = {a: 1, b: 2, c: 3}; + +function ColoredTriangle() { + this.color = 'red'; +} + +ColoredTriangle.prototype = triangle; + +var obj = new ColoredTriangle(); + +for (const prop in obj) { + if (obj.hasOwnProperty(prop)) { + console.log(`obj.${prop} = ${obj[prop]}`); + } +} + +// Виведе: +// "obj.color = red"</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'for...in statement')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.statements.for_in")}}</p> + +<h3 id="Сумісність_Ініціалізація_лічильника_у_строгому_режимі">Сумісність: Ініціалізація лічильника у строгому режимі</h3> + +<p>До Firefox 40 було можливо використати ініціалізацію лічильника (<code>i=0</code>) у циклі <code>for...in</code>:</p> + +<pre class="brush: js example-bad notranslate">var obj = {a: 1, b: 2, c: 3}; +for (var i = 0 in obj) { + console.log(obj[i]); +} +// 1 +// 2 +// 3 +</pre> + +<p>Ця нестандартна поведінка тепер ігнорується у версії 40 та пізніших і викличе помилку {{jsxref("SyntaxError")}} ("<a href="/uk/docs/Web/JavaScript/Reference/Errors/Invalid_for-in_initializer">for-in loop head declarations may not have initializers</a>") у <a href="/uk/docs/Web/JavaScript/Reference/Strict_mode">строгому режимі</a> ({{bug(748550)}} та {{bug(1164741)}}).</p> + +<p>Інші рушії, такі як v8 (Chrome), Chakra (IE/Edge) та JSC (WebKit/Safari), також проводять дослідження щодо прибирання цієї нестандартної поведінки.</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Statements/for...of", "for...of")}} – схожий цикл, що перебирає <em>значення</em> властивостей</li> + <li>{{jsxref("Statements/for_each...in", "for each...in")}} {{deprecated_inline}} – схожий, але застарілий цикл, що перебирає значення властивостей об'єкта, а не самі імена властивостей</li> + <li>{{jsxref("Statements/for", "for")}}</li> + <li><a href="/uk/docs/Web/JavaScript/Guide/Iterators_and_Generators">Вираз функції-генератора</a> (використовує синтаксис <code>for...in</code>)</li> + <li><a href="/uk/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">Перелічуваність та належність властивостей</a></li> + <li>{{jsxref("Object.getOwnPropertyNames()")}}</li> + <li>{{jsxref("Object.prototype.hasOwnProperty()")}}</li> + <li>{{jsxref("Array.prototype.forEach()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/statements/for...of/index.html b/files/uk/web/javascript/reference/statements/for...of/index.html new file mode 100644 index 0000000000..dc4ebaf7b8 --- /dev/null +++ b/files/uk/web/javascript/reference/statements/for...of/index.html @@ -0,0 +1,319 @@ +--- +title: for...of +slug: Web/JavaScript/Reference/Statements/for...of +tags: + - ECMAScript 2015 + - ES6 + - JavaScript + - Довідка +translation_of: Web/JavaScript/Reference/Statements/for...of +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>Конструкція <strong><code>for...of</code> </strong>створює цикл, що перебирає <a href="/uk/docs/Web/JavaScript/Reference/Протоколи_перебору#The_iterable_protocol">ітерабельні об'єкти</a>, в тому числі: вбудовані {{jsxref("String")}}, {{jsxref("Array")}}, подібні до масиву об'єкти (наприклад, {{jsxref("Functions/arguments", "arguments")}} або {{domxref("NodeList")}}), {{jsxref("TypedArray")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, а також визначені користувачем ітерабельні об'єкти. Він викликає користувацький хук до ітерацій з командами, що виконуються для значення кожної окремої властивості об'єкта.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-forof.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">for (<em>variable</em> of <em>iterable</em>) { + <em>statement +</em>} +</pre> + +<dl> + <dt><code>variable</code></dt> + <dd>На кожній ітерації параметру <em>variable </em>призначається значення іншої властивості. Параметр <em>variable</em> може бути оголошений через <code>const</code>, <code>let</code> або <code>var</code>.</dd> + <dt><code>iterable</code></dt> + <dd>Об'єкт, чиї ітерабельні властивості перебираються.</dd> +</dl> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Перебір_об'єкта_jsxref(Array)">Перебір об'єкта {{jsxref("Array")}}</h3> + +<pre class="brush:js">let iterable = [10, 20, 30]; + +for (let value of iterable) { + value += 1; + console.log(value); +} +// 11 +// 21 +// 31 +</pre> + +<p>Ви також можете використати <a href="/uk/docs/Web/JavaScript/Reference/Statements/const"><code>const</code></a> замість <a href="/uk/docs/Web/JavaScript/Reference/Statements/let"><code>let</code></a>, якщо не переприсвоюєте змінну всередині блоку.</p> + +<pre class="brush:js">let iterable = [10, 20, 30]; + +for (const value of iterable) { + console.log(value); +} +// 10 +// 20 +// 30 +</pre> + +<h3 id="Перебір_об'єкта_jsxref(String)">Перебір об'єкта {{jsxref("String")}}</h3> + +<pre class="brush:js">let iterable = 'фух'; + +for (let value of iterable) { + console.log(value); +} +// "ф" +// "у" +// "х" +</pre> + +<h3 id="Перебір_об'єкта_jsxref(TypedArray)">Перебір об'єкта {{jsxref("TypedArray")}}</h3> + +<pre class="brush:js">let iterable = new Uint8Array([0x00, 0xff]); + +for (let value of iterable) { + console.log(value); +} +// 0 +// 255 +</pre> + +<h3 id="Перебір_об'єкта_jsxref(Map)">Перебір об'єкта {{jsxref("Map")}}</h3> + +<pre class="brush:js">let iterable = new Map([['а', 1], ['б', 2], ['в', 3]]); + +for (let entry of iterable) { + console.log(entry); +} +// ['а', 1] +// ['б', 2] +// ['в', 3] + +for (let [key, value] of iterable) { + console.log(value); +} +// 1 +// 2 +// 3 +</pre> + +<h3 id="Перебір_об'єкта_jsxref(Set)">Перебір об'єкта {{jsxref("Set")}}</h3> + +<pre class="brush:js">let iterable = new Set([1, 1, 2, 2, 3, 3]); + +for (let value of iterable) { + console.log(value); +} +// 1 +// 2 +// 3 +</pre> + +<h3 id="Перебір_об'єкта_arguments">Перебір об'єкта arguments</h3> + +<p>Ви можете перебирати об'єкт {{jsxref("Functions/arguments", "arguments")}}, щоб дослідити усі параметри, передані у функцію JavaScript:</p> + +<pre class="brush: js">(function() { + for (let argument of arguments) { + console.log(argument); + } +})(1, 2, 3); + +// 1 +// 2 +// 3</pre> + +<h3 id="Перебір_колекції_DOM-елементів">Перебір колекції DOM-елементів</h3> + +<p>Перебір колекцій DOM-елементів, таких як {{domxref("NodeList")}}: наступний приклад додає клас <code>read</code> до вузлів paragraph, які є прямими нащадками вузла article:</p> + +<pre class="brush:js">// Заувага: Це працюватиме лише у платформах, де +// реалізовано NodeList.prototype[Symbol.iterator] +let articleParagraphs = document.querySelectorAll('article > p'); + +for (let paragraph of articleParagraphs) { + paragraph.classList.add('read'); +} +</pre> + +<h3 id="Закриття_ітераторів">Закриття ітераторів</h3> + +<p>У циклах <code>for...of</code> раптове переривання ітерації може бути спричинено операторами <code>break</code>, <code>throw</code> або <code>return</code>. У цих випадках ітератор закривається.</p> + +<pre class="brush: js">function* foo(){ + yield 1; + yield 2; + yield 3; +}; + +for (let o of foo()) { + console.log(o); + break; // закриває ітератор, виконання продовжується поза циклом +} +console.log('done'); +</pre> + +<h3 id="Перебір_генераторів">Перебір генераторів</h3> + +<p>Ви також можете перебирати <a href="/uk/docs/Web/JavaScript/Reference/Statements/function*">генератори</a>, тобто, функції, що генерують ітерабельні об'єкти:</p> + +<pre class="brush:js">function* fibonacci() { // функція-генератор + let [prev, curr] = [0, 1]; + while (true) { + [prev, curr] = [curr, prev + curr]; + yield curr; + } +} + +for (let n of fibonacci()) { + console.log(n); + // обрізати послідовність на 1000 + if (n >= 1000) { + break; + } +} +</pre> + +<h4 id="Не_використовуйте_генератори_повторно">Не використовуйте генератори повторно</h4> + +<p>Генератори не можна використовувати повторно, навіть якщо цикл <code>for...of</code> завчасно перервався, наприклад, ключовим словом {{jsxref("Statements/break", "break")}}. На виході з циклу генератор закривається, і спроби викликати його знову не дадуть подальших результатів.</p> + +<pre class="brush: js example-bad">let gen = (function *(){ + yield 1; + yield 2; + yield 3; +})(); +for (let o of gen) { + console.log(o); + break; // закриває ітератор +} + +// Генератор не можна використовувати знову, наступне не має сенсу! +for (let o of gen) { + console.log(o); // Ніколи не виконається. +} +</pre> + +<h3 id="Перебір_інших_ітерабельних_об'єктів">Перебір інших ітерабельних об'єктів</h3> + +<p>Ви також можете перебирати об'єкт, який відкрито реалізує протокол <a href="/uk/docs/Web/JavaScript/Reference/Iteration_protocols#iterable">ітерабельного</a>:</p> + +<pre class="brush:js">let iterable = { + [Symbol.iterator]() { + return { + i: 0, + next() { + if (this.i < 3) { + return { value: this.i++, done: false }; + } + return { value: undefined, done: true }; + } + }; + } +}; + +for (let value of iterable) { + console.log(value); +} +// 0 +// 1 +// 2 +</pre> + +<h3 id="Різниця_між_for...of_та_for...in">Різниця між <code>for...of</code> та <code>for...in</code></h3> + +<p>І цикл <code>for...in</code>, і цикл <code>for...of</code> щось перебирають. Головна різниця між ними полягає в тому, що саме вони перебирають.</p> + +<p>Цикл {{jsxref("Statements/for...in", "for...in")}} перебирає <a href="/uk/docs/Web/JavaScript/Перелічуваність_та_належність_властивостей">перелічувані властивості</a> об'єкта, у довільному порядку.</p> + +<p>Цикл <code>for...of</code> перебирає значення, які <a href="/uk/docs/Web/JavaScript/Guide/Iterators_and_Generators#Iterables">ітерабельний об'єкт</a> визначає для перебирання.</p> + +<p>Наступний приклад демонструє різницю між циклом <code>for...of</code> та циклом <code>for...in</code> при використанні з {{jsxref("Array", "масивом")}}.</p> + +<pre class="brush:js">Object.prototype.objCustom = function() {}; +Array.prototype.arrCustom = function() {}; + +let iterable = [3, 5, 7]; +iterable.foo = 'привіт'; + +for (let i in iterable) { + console.log(i); // виведе 0, 1, 2, "foo", "arrCustom", "objCustom" +} + +for (let i in iterable) { + if (iterable.hasOwnProperty(i)) { + console.log(i); // виведе 0, 1, 2, "foo" + } +} + +for (let i of iterable) { + console.log(i); // виведе 3, 5, 7 +} +</pre> + +<p>Розглянемо наведений код крок за кроком.</p> + +<pre class="brush: js">Object.prototype.objCustom = function() {}; +Array.prototype.arrCustom = function() {}; + +let iterable = [3, 5, 7]; +iterable.foo = 'привіт';</pre> + +<p>Кожний об'єкт успадковуватиме властивість <code>objCustom</code> і кожний об'єкт, що є об'єктом {{jsxref("Array")}}, успадковуватиме властивість <code>arrCustom</code>, оскільки ці властивості були додані у {{jsxref("Object.prototype")}} та {{jsxref("Array.prototype")}} відповідно. Об'єкт <code>iterable</code> успадковує властивості <code>objCustom</code> та <code>arrCustom</code> через <a href="/uk/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">наслідування та ланцюжок прототипів</a>.</p> + +<pre class="brush: js">for (let i in iterable) { + console.log(i); // виведе 0, 1, 2, "foo", "arrCustom", "objCustom" +}</pre> + +<p>Цей цикл виводить тільки <a href="/uk/docs/Web/JavaScript/Перелічуваність_та_належність_властивостей">перелічувані властивості</a> об'єкта <code>iterable</code>, у довільному порядку. Він не виводить <strong>елементи</strong> масиву <code>3</code>, <code>5</code>, <code>7</code> або <code>привіт</code>, оскільки вони <strong>не</strong> є перелічуваними властивостями, власне, вони взагалі не є властивостями, вони є <strong>значеннями</strong>. Цикл виводить <strong>індекси</strong> масиву, а також <code>arrCustom</code> та <code>objCustom</code>, які є властивостями. Якщо ви не певні, чому ці властивості перебираються, є більш детальне пояснення того, як працює {{jsxref("Statements/for...in", "перебір масиву та for...in", "#Перебір_масиву_та_for...in")}}.</p> + +<pre class="brush: js">for (let i in iterable) { + if (iterable.hasOwnProperty(i)) { + console.log(i); // виведе 0, 1, 2, "foo" + } +}</pre> + +<p>Цей цикл схожий на перший, але використовує {{jsxref("Object.prototype.hasOwnProperty()", "hasOwnProperty()")}} для перевірки, чи є знайдена перелічувана властивість особистою властивістю об'єкта, тобто, не успадкованою. Якщо є, властивість виводиться. Властивості <code>0</code>, <code>1</code>, <code>2</code> та <code>foo</code> виводяться, оскільки вони є особистими властивостями (<strong>не успадкованими</strong>). Властивості <code>arrCustom</code> та <code>objCustom</code> не виводяться, оскільки вони <strong>успадковані</strong>.</p> + +<pre class="brush: js">for (let i of iterable) { + console.log(i); // виведе 3, 5, 7 +}</pre> + +<p>Цей цикл перебирає та виводить <strong>значення</strong>, які <code>iterable</code> як <a href="/uk/docs/Web/JavaScript/Guide/Iterators_and_Generators#Iterables">ітерабельний об'єкт</a><strong> </strong>визначає для перебору. <strong>Елементи</strong> об'єкта <code>3</code>, <code>5</code>, <code>7</code> виводяться, але немає жодної з <strong>властивостей</strong> об'єкта.</p> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-for-in-and-for-of-statements', 'for...of statement')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Початкове визначення.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'for...of statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.statements.for_of")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li>{{jsxref("Map.prototype.forEach()")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/statements/for/index.html b/files/uk/web/javascript/reference/statements/for/index.html new file mode 100644 index 0000000000..12e0bbefd7 --- /dev/null +++ b/files/uk/web/javascript/reference/statements/for/index.html @@ -0,0 +1,165 @@ +--- +title: for +slug: Web/JavaScript/Reference/Statements/for +tags: + - JavaScript + - for + - Цикл +translation_of: Web/JavaScript/Reference/Statements/for +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><strong>Оператор for </strong>створює цикл, що складається з трьох необов'язкових виразів, заключених у дужки та розділених крапками з комами, за ними розташовані команди (зазвичай, <a href="/uk/docs/Web/JavaScript/Reference/Statements/block">блок команд</a>), який потрібно виконати у циклі.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-for.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">for ([<em>initialization</em>]; [<em>condition</em>]; [<em>final-expression</em>]) + <em>statement</em></pre> + +<dl> + <dt><code>initialization</code></dt> + <dd>Вираз (в тому числі вирази присвоєння) або оголошення змінної, оцінюється один раз перед початком циклу. Зазвичай використовується для ініціалізації змінної лічильника. Цей вираз може також оголошувати нові змінні ключовими словами <code>var</code> або <code>let</code>. Змінні, оголошені через <code>var</code> не є локальними для циклу, тобто, вони знаходяться у тій же області видимості, що й сам цикл <code>for</code>. Змінні, оголошені через <code>let</code>, є локальними змінними циклу.</dd> + <dd>Результат цього виразу відкидається.</dd> + <dt><code>condition</code></dt> + <dd>Вираз, який оцінюється перед кожною ітерацією циклу. Якщо вираз оцінюється як true, то <code>statement</code> виконується. Ця перевірка є необов'язковою. Якщо вона пропущена, то умова завжди оцінюється як true. Якщо вираз оцінюється як false, виконання переходить до першого виразу, розташованого після конструкції <code>for</code>.</dd> + <dt><code>final-expression</code></dt> + <dd>Вираз, який оцінюється в кінці кожної ітерації циклу. Це відбувається до наступного оцінювання виразу <code>condition</code>. Зазвичай використовується, щоб оновити або збільшити значення змінної лічильника.</dd> + <dt><code>statement</code></dt> + <dd>Команда, яка виконується, поки умова оцінюється як true. Для виконання кількох команд, використовуйте {{jsxref("Statements/block", "блок", "", 0)}} (<code>{ ... }</code>), щоб згрупувати ці команди. Щоб не виконувати жодних команд, скористайтесь {{jsxref("Statements/empty", "порожнім", "", 0)}} оператором (<code>;</code>).</dd> +</dl> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_циклу_for">Використання циклу <code>for</code></h3> + +<p>Наведений цикл <code>for</code> починається з оголошення змінної <code>i</code> та ініціалізації її значенням <code>0</code>. Він перевіряє, що значення <code>i</code> менше дев'яти, виконує дві команди та збільшує <code>i</code> на 1 після кожного проходу через цикл.</p> + +<pre class="brush: js">for (let i = 0; i < 9; i++) { + console.log(i); + // ще команди +} +</pre> + +<h3 id="Необов'язкові_вирази_циклу_for">Необов'язкові вирази циклу <code>for</code></h3> + +<p>Всі три вирази у шапці циклу <code>for</code> є необов'язковими.</p> + +<p>Наприклад, у блоці <em>initialization</em> не вимагається ініціалізувати змінні:</p> + +<pre class="brush: js">var i = 0; +for (; i < 9; i++) { + console.log(i); + // ще команди +} +</pre> + +<p>Як і блок <em>initialization</em>, блок умови <em>condition</em> також є необов'язковим. Якщо ви пропускаєте цей вираз, то маєте переконатись, що встановили переривання у тілі циклу, щоб не створити нескінченний цикл.</p> + +<pre class="brush: js">for (let i = 0;; i++) { + console.log(i); + if (i > 3) break; + // ще команди +}</pre> + +<p>Ви також можете пропустити всі три блоки. Знову ж таки, переконайтеся, що ви встановили оператор {{jsxref("Statements/break", "break")}}, щоб закінчити цикл, а також змінили (збільшили) змінну, щоб умова для переривання в якийсь момент набула значення true.</p> + +<pre class="brush: js">var i = 0; + +for (;;) { + if (i > 3) break; + console.log(i); + i++; +} +</pre> + +<h3 id="Використання_циклу_for_без_команд">Використання циклу <code>for</code> без команд</h3> + +<p>Наведений цикл <code>for</code> обчислює зміщення вузла у розділі <em>final-expression</em>, і тому не вимагає використання розділу <code>statement</code>, замість нього використовується крапка з комою.</p> + +<pre class="brush: js">function showOffsetPos(sId) { + + var nLeft = 0, nTop = 0; + + for ( + + var oItNode = document.getElementById(sId); /* ініціалізація */ + + oItNode; /* умова */ + + nLeft += oItNode.offsetLeft, nTop += oItNode.offsetTop, oItNode = oItNode.offsetParent /* final-expression */ + + ); /* крапка з комою */ + + console.log('Зміщення елемента \'' + sId + '\':\n left: ' + nLeft + 'px;\n top: ' + nTop + 'px;'); + +} + +/* Приклад виклику: */ + +showOffsetPos('content'); + +// Результат: +// "Зміщення елемента "content": +// left: 0px; +// top: 153px;"</pre> + +<div class="note"><strong>Заувага:</strong> Це один з небагатьох випадків у JavaScript, коли <strong>крапка з комою є обов'язковою</strong>. Дійсно, без крапки з комою рядок, що записаний після циклу, вважатиметься командою циклу.</div> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-12.6.2', 'for statement')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Початкове визначення.</td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-12.6.3', 'for statement')}}</td> + <td>{{Spec2('ES3')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.6.3', 'for statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-for-statement', 'for statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-for-statement', 'for statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.statements.for")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Statements/empty", "порожній оператор", "", 0)}}</li> + <li>{{jsxref("Statements/break", "break")}}</li> + <li>{{jsxref("Statements/continue", "continue")}}</li> + <li>{{jsxref("Statements/while", "while")}}</li> + <li>{{jsxref("Statements/do...while", "do...while")}}</li> + <li>{{jsxref("Statements/for...in", "for...in")}}</li> + <li>{{jsxref("Statements/for...of", "for...of")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/statements/function/index.html b/files/uk/web/javascript/reference/statements/function/index.html new file mode 100644 index 0000000000..c038ec106d --- /dev/null +++ b/files/uk/web/javascript/reference/statements/function/index.html @@ -0,0 +1,179 @@ +--- +title: Оголошення функції +slug: Web/JavaScript/Reference/Statements/function +tags: + - JavaScript + - Функція +translation_of: Web/JavaScript/Reference/Statements/function +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><strong>Оголошення функції</strong> (функціональний оператор) визначає функцію з вказаними параметрами.</p> + +<p>Ви також можете визначати функції за допомогою конструктора {{jsxref("Function")}} та {{jsxref("Operators/function", "функціонального виразу")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-function.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">function <em>name</em>([<em>param</em>[, <em>param</em>,[..., <em>param</em>]]]) { + [<em>statements</em>] +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>Ім'я функції.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>Ім'я аргументу, що передається у функцію. Максимальна кількість аргументів відрізняється у різних рушіях.</dd> +</dl> + +<dl> + <dt><code>statements</code></dt> + <dd>Інструкції, які складають тіло функції.</dd> +</dl> + +<h2 id="Опис">Опис</h2> + +<p>Функція, утворена через оголошення функції, є об'єктом <code>Function</code>, і має усі властивості, методи та поведінку об'єктів <code>Function</code>. Більш детальну інформацію щодо функцій дивіться у статті {{jsxref("Function")}}.</p> + +<p>Функція також може бути створена через за допомогою виразу (дивіться {{jsxref("Operators/function", "функціональний вираз")}}).</p> + +<p>За замовчуванням функції повертають <code>undefined</code>. Щоб повернути будь-яке інше значення, функція повинна мати оператор {{jsxref("Statements/return", "return")}}, який вказує значення, що буде повернене.</p> + +<h3 id="Умовне_створення_функцій">Умовне створення функцій</h3> + +<p>Функції можуть оголошуватися за певної умови, тобто, оголошення функції може бути вкладене у <code>if</code>, однак, результат різниться між реалізаціями, тому цей шаблон не варто використовувати у виробничому коді. Для умовного створення функції використовуйте, натомість, функціональний вираз.</p> + +<pre class="brush: js">var hoisted = "foo" in this; +console.log(`Ім'я 'foo'${hoisted ? "" : " не"} піднімається. typeof foo дорівнює ${typeof foo}`); +if (false) { + function foo(){ return 1; } +} + +// У Chrome: +// Ім'я 'foo' піднімається. typeof foo дорівнює undefined +// +// У Firefox: +// Ім'я 'foo' піднімається. typeof foo дорівнює undefined +// +// У Edge: +// Ім'я 'foo' не піднімається. typeof foo дорівнює undefined +// +// У Safari: +// Ім'я 'foo' піднімається. typeof foo дорівнює function +</pre> + +<p>Результат буде такий самий для умови, яка дорівнює true</p> + +<pre class="brush: js">var hoisted = "foo" in this; +console.log(`Ім'я 'foo' ${hoisted ? "" : " не"} піднімається. typeof foo дорівнює ${typeof foo}`); +if (true) { + function foo(){ return 1; } +} + +// У Chrome: +// Ім'я 'foo' піднімається. typeof foo дорівнює undefined +// +// У Firefox: +// Ім'я 'foo' піднімається. typeof foo дорівнює undefined +// +// У Edge: +// Ім'я 'foo' не піднімається. typeof foo дорівнює undefined +// +// У Safari: +// Ім'я 'foo' піднімається. typeof foo дорівнює function +</pre> + +<h3 id="Підняття_оголошення_функції">Підняття оголошення функції</h3> + +<p>Оголошення функцій у JavaScript піднімаються наверх замикаючої функції або глобальної області видимості. Ви можете використовувати функцію до того, як оголосили її:</p> + +<pre class="brush: js">hoisted(); // виводить "foo" + +function hoisted() { + console.log('foo'); +} +</pre> + +<p>Зауважте, що {{jsxref("Operators/function", "функціональні вирази")}} не піднімаються:</p> + +<pre class="brush: js">notHoisted(); // TypeError: notHoisted is not a function + +var notHoisted = function() { + console.log('bar'); +}; +</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_function">Використання <code>function</code></h3> + +<p>Наступний код оголошує функцію, яка повертає загальну суму продажів, отримуючи кількість одиниць продуктів <code>a</code>, <code>b</code> та <code>c</code>.</p> + +<pre class="brush: js">function calc_sales(units_a, units_b, units_c) { + return units_a * 79 + units_b * 129 + units_c * 699; +} +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-13', 'Function definition')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-13', 'Function definition')}}</td> + <td>{{Spec2('ES3')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-13', 'Function definition')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Початкове визначення. Реалізоване у JavaScript 1.0.</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.statements.function")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Functions", "Функції")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("Operators/function", "функціональний вираз")}}</li> + <li>{{jsxref("Statements/function*", "оператор function*")}}</li> + <li>{{jsxref("Operators/function*", "вираз function*")}}</li> + <li>{{jsxref("Functions/Стрілкові_функції", "Стрілкові функції")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> + <li>{{jsxref("Statements/async_function", "async function")}}</li> + <li>{{jsxref("Operators/async_function", "вираз async function")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/statements/function_star_/index.html b/files/uk/web/javascript/reference/statements/function_star_/index.html new file mode 100644 index 0000000000..f900241ddc --- /dev/null +++ b/files/uk/web/javascript/reference/statements/function_star_/index.html @@ -0,0 +1,268 @@ +--- +title: function* +slug: Web/JavaScript/Reference/Statements/function* +tags: + - ECMAScript 2015 + - Function + - JavaScript + - Ітератор + - генератор +translation_of: Web/JavaScript/Reference/Statements/function* +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>Оголошення <code><strong>function*</strong></code> (ключове слово <code>function</code> з зірочкою) визначає <em>функцію-генератор</em>, яка повертає об'єкт {{jsxref("Global_Objects/Generator","Generator")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-functionasterisk.html")}}</div> + + + +<p>Ви також можете визначати функції-генератори за допомогою конструктора {{jsxref("GeneratorFunction")}} або функціонального виразу.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">function* <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>Ім'я функції.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>Ім'я формального параметра функції.</dd> +</dl> + +<dl> + <dt><code>statements</code></dt> + <dd>Інструкції, що складають тіло функції.</dd> +</dl> + +<h2 id="Опис">Опис</h2> + +<p>Генератори - це функції, з яких можна вийти та пізніше повторно зайти. Їхній контекст (зв'язування змінних) збережеться між заходами.<br> + <br> + Генератори у JavaScript -- особливо у поєднанні з промісами -- дуже потужний інструмент асинхронного програмування, бо вони пом'якшують -- якщо не усувають повністю -- проблеми зворотних викликів, такі як <a href="http://callbackhell.com/">Пекло зворотних викликів</a> та <a href="https://frontendmasters.com/courses/rethinking-async-js/callback-problems-inversion-of-control/">Інверсія управління</a>.</p> + +<p>Виклик функції-генератора не виконує тіло функції негайно; замість цього повертається об'єкт-<a href="/uk/docs/Web/JavaScript/Reference/Протоколи_перебору#Протокол_ітератора">ітератор</a> для функції. Коли викликається метод ітератора <code>next()</code>, тіло функції-генератора виконується до першого виразу {{jsxref("Operators/yield", "yield")}}, який визначає значення, що має бути повернене ітератором, або, оператором {{jsxref("Operators/yield*", "yield*")}}, делегується до іншої функції-генератора. Метод <code>next()</code> повертає об'єкт з властивістю <code>value</code>, що містить отримане значення, та властивістю <code>done</code>, яка вказує, чи генератор віддав останнє значення, у вигляді булевого значення. Виклик метода <code>next()</code> з аргументом відновить виконання функції-генератора, замінюючи вираз <code>yield</code> в тій точці, де виконання було призупинене, аргументом з <code>next()</code>.</p> + +<p>Оператор <code>return</code> у генераторі змусить генератор завершити виконання (тобто, властивості <code>done</code> поверненого об'єкта буде присвоєне значення <code>true</code>). Якщо повертається значення, воно буде присвоєте властивості <code>value</code> об'єкта, що повертається генератором.<br> + Схоже на оператор <code>return</code>, викидання помилки всередині генератора змусить генератор завершити виконання -- якщо не буде перехоплене у тілі генератора.<br> + Коли генератор завершує виконання, наступні виклики <code>next</code> не виконають жодного коду генератора, вони лише повернуть об'єкт наступного вигляду: <code>{value: undefined, done: true}</code>.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Простий_приклад">Простий приклад</h3> + +<pre class="brush: js">function* idMaker() { + var index = 0; + while (true) + yield index++; +} + +var gen = idMaker(); + +console.log(gen.next().value); // 0 +console.log(gen.next().value); // 1 +console.log(gen.next().value); // 2 +console.log(gen.next().value); // 3 +// ...</pre> + +<h3 id="Приклад_з_yield*">Приклад з yield*</h3> + +<pre class="brush: js">function* anotherGenerator(i) { + yield i + 1; + yield i + 2; + yield i + 3; +} + +function* generator(i) { + yield i; + yield* anotherGenerator(i); + yield i + 10; +} + +var gen = generator(10); + +console.log(gen.next().value); // 10 +console.log(gen.next().value); // 11 +console.log(gen.next().value); // 12 +console.log(gen.next().value); // 13 +console.log(gen.next().value); // 20 +</pre> + +<h3 id="Передача_аргументів_у_обєкти_Generator">Передача аргументів у об'єкти Generator</h3> + +<pre class="brush: js">function* logGenerator() { + console.log(0); + console.log(1, yield); + console.log(2, yield); + console.log(3, yield); +} + +var gen = logGenerator(); + +// перший виклик метода next виконує функцію з початку +// до першого оператора yield +gen.next(); // 0 +gen.next('крендель'); // 1 крендель +gen.next('кава'); // 2 кава +gen.next('майонез'); // 3 майонез +</pre> + +<h3 id="Оператор_return_у_генераторі">Оператор return у генераторі</h3> + +<pre class="brush: js">function* yieldAndReturn() { + yield "Y"; + return "R"; + yield "недосяжний"; +} + +var gen = yieldAndReturn() +console.log(gen.next()); // { value: "Y", done: false } +console.log(gen.next()); // { value: "R", done: true } +console.log(gen.next()); // { value: undefined, done: true } +</pre> + +<h3 id="Генератор_як_властивість_обєкта">Генератор як властивість об'єкта</h3> + +<pre class="brush: js">const someObj = { + *generator () { + yield 'а'; + yield 'б'; + } +} + +const gen = someObj.generator() + +console.log(gen.next()); // { value: 'а', done: false } +console.log(gen.next()); // { value: 'б', done: false } +console.log(gen.next()); // { value: undefined, done: true } +</pre> + +<h3 id="Генератор_як_метод_класу">Генератор як метод класу</h3> + +<pre class="brush: js">class Foo { + *generator () { + yield 1; + yield 2; + yield 3; + } +} + +const f = new Foo (); +const gen = f.generator(); + +console.log(gen.next()); // { value: 1, done: false } +console.log(gen.next()); // { value: 2, done: false } +console.log(gen.next()); // { value: 3, done: false } +console.log(gen.next()); // { value: undefined, done: true } +</pre> + +<h3 id="Генератор_як_обчислювана_властивість">Генератор як обчислювана властивість</h3> + +<pre class="brush: js">class Foo { + *[Symbol.iterator] () { + yield 1; + yield 2; + } +} + +const SomeObj = { + *[Symbol.iterator] () { + yield 'а'; + yield 'б'; + } +} + +console.log(Array.from(new Foo)); // [ 1, 2 ] +console.log(Array.from(SomeObj)); // [ 'а', 'б' ] +</pre> + +<h3 id="Генератори_не_є_конструкторами">Генератори не є конструкторами</h3> + +<pre class="brush: js">function* f() {} +var obj = new f; // викидає "TypeError: f is not a constructor +</pre> + +<h3 id="Генератор_визначений_у_виразі">Генератор, визначений у виразі</h3> + +<pre class="brush: js">const foo = function* () { + yield 10; + yield 20; +}; + +const bar = foo(); +console.log(bar.next()); // {value: 10, done: false}</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES2015', '#sec-generator-function-definitions', 'function*')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Початкове визначення.</td> + </tr> + <tr> + <td>{{SpecName('ES2016', '#sec-generator-function-definitions', 'function*')}}</td> + <td>{{Spec2('ES2016')}}</td> + <td>Внесено зміни, що генератори не повинні мати пастки [[Construct]] та викидатимуть помилку при використанні з <code>new</code>.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-generator-function-definitions', 'function*')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div> + + +<p>{{Compat("javascript.statements.generator_function")}}</p> +</div> + +<h2 id="Примітки_щодо_Firefox">Примітки щодо Firefox</h2> + +<h4 id="Генератори_та_ітератори_у_Firefox_до_26-ї_версії">Генератори та ітератори у Firefox до 26-ї версії</h4> + +<p>Старші версії Firefox реалізують старшу версію пропозиції генераторів. У старшій версії генератори визначались за допомогою звичайного ключового слова <code>function</code> (без зірочки), серед інших відмінностей. Дивіться більше інформації у статті <a href="/uk/docs/Web/JavaScript/Reference/Statements/Legacy_generator_function">Застаріла функція-генератор</a>.</p> + +<h4 id="Замість_викидання_помилки_повертається_обєкт_IteratorResult">Замість викидання помилки повертається об'єкт <code>IteratorResult</code></h4> + +<p>Починаючи з Gecko 29 {{geckoRelease(29)}}, завершена функція-генератор більше не викидає помилку {{jsxref("TypeError")}} "generator has already finished". Замість цього, вона повертає об'єкт <code>IteratorResult</code> у вигляді <code>{ value: undefined, done: true }</code> ({{bug(958951)}}).</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Operators/function*", "вираз function*")}}</li> + <li>Об'єкт {{jsxref("GeneratorFunction")}}</li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Протоколи_перебору">Протоколи перебору</a></li> + <li>{{jsxref("Operators/yield", "yield")}}</li> + <li>{{jsxref("Operators/yield*", "yield*")}}</li> + <li>Об'єкт {{jsxref("Function")}}</li> + <li>{{jsxref("Statements/function", "оголошення функції")}}</li> + <li>{{jsxref("Operators/function", "функціональний вираз")}}</li> + <li>{{jsxref("Functions", "Функції")}}</li> + <li>Інші веб-ресурси: + <ul> + <li><a href="http://facebook.github.io/regenerator/">Regenerator</a>, компілятор генераторів ES2015 у ES5</li> + <li><a href="http://www.youtube.com/watch?v=qbKWsbJ76-s">Forbes Lindesay: Promises and Generators: control flow utopia -- JSConf EU 2013</a></li> + <li><a href="https://github.com/mozilla/task.js">Task.js</a></li> + <li><a href="https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/async%20%26%20performance/ch4.md#iterating-generators-asynchronously">Асинхронний перебір генераторів</a></li> + </ul> + </li> +</ul> diff --git a/files/uk/web/javascript/reference/statements/if...else/index.html b/files/uk/web/javascript/reference/statements/if...else/index.html new file mode 100644 index 0000000000..bee07d07bf --- /dev/null +++ b/files/uk/web/javascript/reference/statements/if...else/index.html @@ -0,0 +1,173 @@ +--- +title: if...else +slug: Web/JavaScript/Reference/Statements/if...else +tags: + - JavaScript + - else + - if + - Оператор +translation_of: Web/JavaScript/Reference/Statements/if...else +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><span class="seoSummary">Умовний оператор <strong><code>if</code></strong> виконує команду, якщо вказана умова є {{Glossary("truthy", "правдивою")}}. Якщо умова є {{Glossary("falsy", "хибною")}}, може бути виконана інша команда.</span></p> + +<div>{{EmbedInteractiveExample("pages/js/statement-ifelse.html")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">if (<var>condition</var>) + <var>statement1</var> +[else + <var>statement2</var>] +</pre> + +<dl> + <dt><code>condition</code></dt> + <dd><a href="/uk/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions">Вираз</a>, який вважається або {{Glossary("truthy", "правдивим")}}, або {{Glossary("falsy", "хибним")}}.</dd> +</dl> + +<dl> + <dt><code>statement1</code></dt> + <dd>Команда, що виконується, якщо <var>умова</var> є {{Glossary("truthy", "правдивою")}}. Може бути будь-яка команда, в тому числі вкладені оператори <code>if</code>. Для виконання кількох команд використовуйте <a href="/uk/docs/Web/JavaScript/Reference/Statements/block" title="en/JavaScript/Reference/Statements/block">блок</a> ({ ... }), щоб згрупувати ці команди. Щоб не виконувати жодних команд, використайте <a href="/uk/docs/Web/JavaScript/Reference/Statements/Empty">порожній</a> оператор.</dd> +</dl> + +<dl> + <dt><code>statement2</code></dt> + <dd>Команда, що виконується, якщо <var>умова</var> є {{Glossary("falsy", "хибною")}} та присутній блок <code>else</code>. Може бути будь-яка команда, в тому числі блок команд та вкладені оператори <code>if</code>.</dd> +</dl> + +<h2 id="Опис">Опис</h2> + +<p>Можна додавати вкладені вирази <code>if...else</code> для створення конструкції <code>else if</code>. Зауважте, що у JavaScript не існує ключового слова <code>elseif</code> (одним словом).</p> + +<pre class="brush: js">if (<var>condition1</var>) + <var>statement1</var> +else if (<var>condition2</var>) + <var>statement2</var> +else if (<var>condition3</var>) + <var>statement3</var> +... +else + <var>statementN</var> +</pre> + +<p>Щоб побачити, як це працює, ось так це виглядає з правильно оформленими відступами:</p> + +<pre class="brush: js">if (<var>condition1</var>) + <var>statement1</var> +else + if (<var>condition2</var>) + <var>statement2</var> + else + if (<var>condition3</var>) +... +</pre> + +<p>Щоб виконати декілька команд, використовуйте позначення блоку (<code>{ ... }</code>), щоб згрупувати ці команди. Взагалі, гарною практикою вважається завжди використовувати блочні вирази, особливо у коді, який містить вкладені оператори <code>if</code>:</p> + +<pre class="brush: js">if (<var>condition</var>) { + <var>statements1</var> +} else { + <var>statements2</var> +} +</pre> + +<p>Не плутайте примітивні булеві значення <code>true</code> та <code>false</code> з правдивістю та хибністю об'єкта {{jsxref("Global_Objects/Boolean", "Boolean")}}. Будь-яке значення, яке не є <code>false</code>, <code>undefined</code>, <code>null</code>, <code>0</code>, <code>-0</code>, <code>NaN</code>, або порожнім текстовим рядком (<code>""</code>), і будь-який об'єкт, в тому числі об'єкт Boolean, чиє значення дорівнює false, вважається {{Glossary("truthy", "правдивим")}} при використанні у якості умови. Для прикладу:</p> + +<pre class="brush: js">var b = new Boolean(false); +if (b) // ця умова є правдивою +</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_if...else">Використання <code>if...else</code></h3> + +<pre class="brush: js">if (cipher_char === from_char) { + result = result + to_char; + x++; +} else { + result = result + clear_char; +} +</pre> + +<h3 id="Використання_else_if">Використання <code>else if</code></h3> + +<p>Зауважте, що у JavaScript немає оператора <code>elseif</code>. Однак, ви можете його записати з пробілом між <code>else</code> та <code>if</code>:</p> + +<pre class="brush: js">if (x > 50) { + /* зробити що треба */ +} else if (x > 5) { + /* зробити що треба */ +} else { + /* зробити що треба */ +}</pre> + +<h3 id="Присвоєння_всередині_умовного_виразу">Присвоєння всередині умовного виразу</h3> + +<p>Не рекомендовано використовувати прості присвоєння в умовному виразі, тому що присвоєння можна переплутати з порівнянням при швидкому перегляді коду. Наприклад, не використовуйте наступний код:</p> + +<pre class="brush: js example-bad">if (x = y) { + /* зробити що треба */ +} +</pre> + +<p>Якщо вам потрібно використати присвоєння в умовному виразі, загальноприйнятим є використання додаткових дужок навколо присвоєння. Наприклад:</p> + +<pre class="brush: js example-good">if ((x = y)) { + /* зробити що треба */ +} +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-if-statement', 'if statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-if-statement', 'if statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.5', 'if statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-12.5', 'if statement')}}</td> + <td>{{Spec2('ES3')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-12.5', 'if statement')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Початкове визначення</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.statements.if_else")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Statements/block", "block")}}</li> + <li>{{jsxref("Statements/switch", "switch")}}</li> + <li><a href="/uk/docs/JavaScript/Reference/Operators/Conditional_Operator">Умовний оператор</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/statements/index.html b/files/uk/web/javascript/reference/statements/index.html new file mode 100644 index 0000000000..7a16fcc672 --- /dev/null +++ b/files/uk/web/javascript/reference/statements/index.html @@ -0,0 +1,130 @@ +--- +title: Інструкції та оголошення +slug: Web/JavaScript/Reference/Statements +tags: + - JavaScript + - Довідка + - оголошення + - інструкції +translation_of: Web/JavaScript/Reference/Statements +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>Застосунки JavaScript складаються з інструкцій з відповідним синтаксисом. Одна інструкція може займати декілька рядків. Декілька інструкцій можуть розташовуватись на одному рядку, якщо кожна інструкція відділена крапкою з комою. Це не ключове слово, а група ключових слів.</p> + +<h2 id="Інструкції_та_оголошення_за_категоріями">Інструкції та оголошення за категоріями</h2> + +<p>Список в алфавітному порядку дивіться на бічній панелі ліворуч.</p> + +<h3 id="Потік_керування">Потік керування</h3> + +<dl> + <dt>{{jsxref("Statements/block", "Block")}}</dt> + <dd>Блок використовують, щоб згрупувати нуль чи більше інструкцій. Блок позначається парою фігурних дужок.</dd> + <dt>{{jsxref("Statements/break", "break")}}</dt> + <dd>Перериває поточний цикл, switch або помічену інструкцію та передає контроль програми у інструкцію, наступну за перерваною інструкцією.</dd> + <dt>{{jsxref("Statements/continue", "continue")}}</dt> + <dd>Перериває виконання інструкцій у поточній ітерації поточного або поміченого циклу та продовжує виконання циклу з наступної ітерації.</dd> + <dt>{{jsxref("Statements/Empty", "Empty")}}</dt> + <dd>Порожній оператор використовується, щоб не надавати інструкцію там, де синтаксис JavaScript її очікує.</dd> + <dt>{{jsxref("Statements/if...else", "if...else")}}</dt> + <dd>Виконує інструкцію, якщо вказана умова дорівнює true. Якщо умова дорівнює false, виконується інша інструкція.</dd> + <dt>{{jsxref("Statements/switch", "switch")}}</dt> + <dd>Обчислює вираз, шукаючі збіг значення виразу з блоком case, та виконує інструкції, асоційовані з цим блоком.</dd> + <dt>{{jsxref("Statements/throw", "throw")}}</dt> + <dd>Викидає визначений користувачем виняток.</dd> + <dt>{{jsxref("Statements/try...catch", "try...catch")}}</dt> + <dd>Позначає блок інструкцій, які необхідно спробувати виконати, та визначає відповідь у випадку, якщо викидається виняток.</dd> +</dl> + +<h3 id="Оголошення">Оголошення</h3> + +<dl> + <dt>{{jsxref("Statements/var", "var")}}</dt> + <dd>Оголошує змінну, необов'язково ініціалізуючи її значенням.</dd> + <dt>{{jsxref("Statements/let", "let")}}</dt> + <dd>Оголошує локальну змінну блочної області видимості, необов'язково ініціалізуючи її значенням.</dd> + <dt>{{jsxref("Statements/const", "const")}}</dt> + <dd>Оголошує іменовану константу, доступну лише для читання.</dd> +</dl> + +<h3 id="Функції_та_класи">Функції та класи</h3> + +<dl> + <dt>{{jsxref("Statements/function", "function")}}</dt> + <dd>Оголошує функцію з вказаними параметрами.</dd> + <dt>{{jsxref("Statements/function*", "function*")}}</dt> + <dd>Функції-генератори спрощують написання <a href="/uk/docs/Web/JavaScript/Reference/Протоколи_перебору#Протокол_ітератора">ітераторів</a>.</dd> + <dt>{{jsxref("Statements/async_function", "async function")}}</dt> + <dd>Оголошує асинхронну функцію з вказаними параметрами.</dd> + <dt>{{jsxref("Statements/return", "return")}}</dt> + <dd>Вказує значення, яке має повернути функція.</dd> + <dt>{{jsxref("Statements/class", "class")}}</dt> + <dd>Оголошує клас.</dd> +</dl> + +<h3 id="Перебори">Перебори</h3> + +<dl> + <dt>{{jsxref("Statements/do...while", "do...while")}}</dt> + <dd>Створює цикл, що виконує вказану інструкцію, яка виконується, доки перевірочна умова не стане дорівнювати false. Умова обчислюється після виконання інструкції, в результаті вказана інструкція виконується принаймні один раз.</dd> + <dt>{{jsxref("Statements/for", "for")}}</dt> + <dd>Створює цикл, що складається з трьох необов'язкових виразів, записаних у дужках та розділених крапками з комами, після яких вказується інструкція для виконання циклом.</dd> + <dt>{{jsxref("Statements/for_each...in", "for each...in")}}</dt> + <dd>Перебирає вказаною змінною усі значення властивостей об'єкта. Для кожної окремої властивості виконується вказана інструкція.</dd> + <dt>{{jsxref("Statements/for...in", "for...in")}}</dt> + <dd>Перебирає перелічувані властивості об'єкта у довільному порядку. Для кожної окремої властивості можуть виконуватись інструкції.</dd> + <dt>{{jsxref("Statements/for...of", "for...of")}}</dt> + <dd>Перебирає ітерабельні об'єкти (в тому числі {{jsxref("Global_Objects/Array","масиви","","true")}}, подібні до масивів об'єкти, <a href="/uk/docs/Web/JavaScript/Guide/Iterators_and_Generators">ітератори та генератори</a>), викликаючи користувацький хук до ітерацій з інструкціями, що виконуватимуться для значення кожної окремої властивості.</dd> + <dt>{{jsxref("Statements/for-await...of", "for await...of")}}</dt> + <dd>Перебирає асинхронні ітерабельні об'єкти, подібні до масивів об'єкти, <a href="/uk/docs/Web/JavaScript/Guide/Iterators_and_Generators">ітератори та генератори</a>, викликаючи користувацький хук до ітерацій з інструкціями, що виконуватимуться для значення кожної окремої властивості.</dd> + <dt>{{jsxref("Statements/while", "while")}}</dt> + <dd>Створює цикл, який виконує вказану інструкцію, доки перевірочна умова дорівнює true. Умова обчислюється перед виконанням інструкції.</dd> +</dl> + +<h3 id="Інші">Інші</h3> + +<dl> + <dt>{{jsxref("Statements/debugger", "debugger")}}</dt> + <dd>Запускає будь-яку доступну налагоджувальну функціональність. Якщо налагоджувальна функціональність недоступна, цей оператор не матиме ефекту.</dd> + <dt>{{jsxref("Statements/export", "export")}}</dt> + <dd>Використовується для експорту функцій, щоб зробити їх доступними для імпорту у зовнішні модулі та інші скрипти.</dd> + <dt>{{jsxref("Statements/import", "import")}}</dt> + <dd>Використовується для імпорту функцій, експортованих з зовнішнього модуля чи іншого скрипта.</dd> + <dt><a href="/uk/docs/Web/JavaScript/Reference/Statements/import.meta"><code>import.meta</code></a></dt> + <dd>Об'єкт, що відкриває залежні від контексту метадані про модуль JavaScript.</dd> + <dt>{{jsxref("Statements/label", "label")}}</dt> + <dd>Надає інструкцію з ідентифікатором, на який можна посилатись при використанні інструкцій <code>break</code> або <code>continue</code>.</dd> +</dl> + +<dl> + <dt>{{jsxref("Statements/with", "with")}}</dt> + <dd>Розширює ланцюжок областей видимості для інструкції.</dd> +</dl> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("javascript.statements")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Reference/Operators">Оператори</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/statements/label/index.html b/files/uk/web/javascript/reference/statements/label/index.html new file mode 100644 index 0000000000..b29fa8fb42 --- /dev/null +++ b/files/uk/web/javascript/reference/statements/label/index.html @@ -0,0 +1,182 @@ +--- +title: Мітка +slug: Web/JavaScript/Reference/Statements/label +tags: + - JavaScript +translation_of: Web/JavaScript/Reference/Statements/label +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><strong>Мітка </strong>(label) може використовуватися з операторами {{jsxref("Statements/break", "break")}} та {{jsxref("Statements/continue", "continue")}}. Вона додається попереду виразу у вигляді ідентифікатора, на який можна посилатися.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-label.html")}}</div> + + + +<div class="note"> +<p><strong>Заувага:</strong> Використання помічених циклів або блоків є дуже нестандартним підходом. Зазвичай використовуються виклики функцій замість стрибків у циклах.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate"><em>label</em> : + <em>statement</em> +</pre> + +<dl> + <dt><code>label</code></dt> + <dd>Будь-який ідентифікатор JavaScript, який не є зарезервованим словом.</dd> + <dt><code>statement</code></dt> + <dd>Інструкція JavaScript. Оператор <code>break</code> може використовуватися з будь-якою поміченою конструкцією, а оператор <code>continue</code> може використовуватися з поміченими циклами.</dd> +</dl> + +<h2 id="Опис">Опис</h2> + +<p>Ви можете використати мітку, щоб ідентифікувати цикл, а потім скористатись операторами <code>break</code> чи <code>continue</code>, щоб вказати, що програма має перервати чи продовжити його виконання.</p> + +<p>Зауважте, що у JavaScript <em>немає</em> оператора <code>goto</code>, ви можете використовувати мітки лише з <code>break</code> або <code>continue</code>.</p> + +<p>У <a href="/uk/docs/Web/JavaScript/Reference/Strict_mode">строгому режимі</a> не можна використовувати "<code>let</code>" в якості імені мітки. Це спричинить викидання {{jsxref("SyntaxError")}} (let є зарезервованим ідентифікатором).</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_поміченого_continue_з_циклами_for">Використання поміченого <code>continue</code> з циклами <code>for</code></h3> + +<pre class="brush: js notranslate">var i, j; + +loop1: +for (i = 0; i < 3; i++) { //Перший цикл for помічений як "loop1" + loop2: + for (j = 0; j < 3; j++) { //Другий цикл for помічений як "loop2" + if (i === 1 && j === 1) { + continue loop1; + } + console.log('i = ' + i + ', j = ' + j); + } +} + +// Результат: +// "i = 0, j = 0" +// "i = 0, j = 1" +// "i = 0, j = 2" +// "i = 1, j = 0" +// "i = 2, j = 0" +// "i = 2, j = 1" +// "i = 2, j = 2" +// Зауважте, що пропущені як "i = 1, j = 1", так і "i = 1, j = 2" +</pre> + +<h3 id="Використання_поміченого_оператора_continue">Використання поміченого оператора <code>continue</code></h3> + +<p>Маючи масив елементів та масив тестів, цей приклад рахує кількість елементів, які пройшли усі тести.</p> + +<pre class="brush: js notranslate">var itemsPassed = 0; +var i, j; + +top: +for (i = 0; i < items.length; i++) { + for (j = 0; j < tests.length; j++) { + if (!tests[j].pass(items[i])) { + continue top; + } + } + + itemsPassed++; +}</pre> + +<h3 id="Використання_поміченого_оператора_break_з_циклами_for">Використання поміченого оператора <code>break</code> з циклами <code>for</code></h3> + +<pre class="brush: js notranslate">var i, j; + +loop1: +for (i = 0; i < 3; i++) { //Перший цикл for помічений як "loop1" + loop2: + for (j = 0; j < 3; j++) { //Другий цикл for помічений як "loop2" + if (i === 1 && j === 1) { + break loop1; + } + console.log('i = ' + i + ', j = ' + j); + } +} + +// Результат: +// "i = 0, j = 0" +// "i = 0, j = 1" +// "i = 0, j = 2" +// "i = 1, j = 0" +// Зауважте різницю з попереднім прикладом з continue</pre> + +<h3 id="Використання_поміченого_оператора_break">Використання поміченого оператора <code>break</code></h3> + +<p>Маючи масив елементів та масив тестів, цей приклад визначає, чи усі елементи пройшли усі тести.</p> + +<pre class="brush: js notranslate">var allPass = true; +var i, j; + +top: +for (i = 0; items.length; i++) + for (j = 0; j < tests.length; i++) + if (!tests[j].pass(items[i])) { + allPass = false; + break top; + }</pre> + +<h3 id="Використання_поміченого_блоку_з_оператором_break">Використання поміченого блоку з оператором <code>break</code></h3> + +<p>Ви можете використовувати мітки всередині звичайних блоків, але тільки оператор <code>break</code> може працювати з мітками не у циклах.</p> + +<pre class="brush: js notranslate">foo: { + console.log('пере'); + break foo; + console.log('ця частина не виконається'); +} +console.log('стрибнув'); + +// цей код виведе: + +// "пере" +// "стрибнув </pre> + +<h3 id="Помічені_оголошення_функцій">Помічені оголошення функцій</h3> + +<p>Починаючи з ECMAScript 2015, помічені оголошення функцій тепер стандартизовані для не строгого режиму у <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-labelled-function-declarations">додатку специфікації щодо веб-сумісності</a>.</p> + +<pre class="brush: js notranslate">L: function F() {}</pre> + +<p>Однак, у <a href="/uk/docs/Web/JavaScript/Reference/Strict_mode">строгому режимі</a> це викине помилку {{jsxref("SyntaxError")}}:</p> + +<pre class="brush: js notranslate">'use strict'; +L: function F() {} +// SyntaxError: functions cannot be labelled</pre> + +<p><a href="/uk/docs/Web/JavaScript/Reference/Statements/function*">Функції-генератори</a> також не можуть мати мітки ні у строгому, ні у звичайному режимі:</p> + +<pre class="brush: js notranslate">L: function* F() {} +// SyntaxError: generator functions cannot be labelled +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-labelled-statements', 'Labelled statement')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.statements.label")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Statements/break", "break")}}</li> + <li>{{jsxref("Statements/continue", "continue")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/statements/let/index.html b/files/uk/web/javascript/reference/statements/let/index.html new file mode 100644 index 0000000000..ee0db303e6 --- /dev/null +++ b/files/uk/web/javascript/reference/statements/let/index.html @@ -0,0 +1,272 @@ +--- +title: let +slug: Web/JavaScript/Reference/Statements/let +tags: + - ECMAScript 2015 + - JavaScript + - let + - змінні +translation_of: Web/JavaScript/Reference/Statements/let +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>Оператор <strong><code>let</code></strong> оголошує локальну змінну блочної області видимості, з необов'язковим присвоєнням їй початкового значення.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-let.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">let <em>var1</em> [= <em>value1</em>] [, <em>var2</em> [= <em>value2</em>]] [, ..., <em>varN</em> [= <em>valueN</em>];</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>var1</code>, <code>var2</code>, …, <code>varN</code></dt> + <dd>Імена змінної або змінних, що оголошуються. Кожне ім'я має бути дозволеним ідентифікатором JavaScript.</dd> + <dt><code>value1</code>, <code>value2</code>, …, <code>valueN</code> {{optional_inline}}</dt> + <dd>Для кожної оголошеної змінної ви можете вказати її початкове значення будь-яким дозволеним виразом JavaScript.</dd> +</dl> + +<h2 id="Опис">Опис</h2> + +<p>Оператор <strong><code>let</code></strong> дозволяє оголошувати змінні, що обмежені областю видимості {{jsxref("statements/block", "блоку")}} або виразу, для якого використовуються, на відміну від ключового слова {{jsxref("statements/var", "var")}}, яке визначає змінну глобально, чи локально для всієї функції, незалежно від області видимості блоку. Інша відмінність між операторами {{jsxref("statements/var", "var")}} та <code>let</code> полягає в тому, що останній ініціалізується тільки після <a href="#Тимчасова_мертва_зона">оцінювання синтаксичним аналізатором (дивіться нижче)</a>.</p> + +<p>Як і {{jsxref("statements/const", "const", "Description")}}, <code>let</code> <em>не</em> створює властивостей об'єкта {{domxref('window')}} при глобальному оголошенні (у області видимості верхнього рівня).</p> + +<p>Пояснення, чому була обрана назва "<strong>let</strong>" можна подивитись <a href="https://stackoverflow.com/questions/37916940/why-was-the-name-let-chosen-for-block-scoped-variable-declarations-in-javascri">тут</a>.</p> + +<h3 id="Правила_області_видимості">Правила області видимості</h3> + +<p>Областю видимості змінних, оголошених через <strong><code>let</code></strong>, є блок, у якому вони визначені, а також будь-які вкладені в нього блоки. У цьому сенсі <strong><code>let</code></strong> дуже схожий на <strong><code>var</code></strong>. Головна відмінність полягає в тому, що областю видимості змінної <strong><code>var</code></strong> є уся замикаюча функція:</p> + +<pre class="brush:js">function varTest() { + var x = 1; + { + var x = 2; // та сама змінна! + console.log(x); // 2 + } + console.log(x); // 2 +} + +function letTest() { + let x = 1; + { + let x = 2; // інша змінна + console.log(x); // 2 + } + console.log(x); // 1 +} +</pre> + +<p id="Scoping_rules">На верхньому рівні програм та функцій <strong><code>let</code></strong>, на відміну від <strong><code>var</code></strong>, не створює властивості глобального об'єкта. Наприклад:</p> + +<pre class="brush:js">var x = 'глобальна'; +let y = 'глобальна'; +console.log(this.x); // "глобальна" +console.log(this.y); // undefined +</pre> + +<h3 id="Імітація_приватних_членів">Імітація приватних членів</h3> + +<p>Працюючи з <a href="/uk/docs/Glossary/Constructor">конструкторами</a>, можна використовувати <strong><code>let</code></strong>-зв'язування для створення приватних членів без використання <a href="/uk/docs/Web/JavaScript/Closures">замикань</a>:</p> + +<pre class="brush:js">var Thing; + +{ + let privateScope = new WeakMap(); + let counter = 0; + + Thing = function() { + this.someProperty = 'foo'; + + privateScope.set(this, { + hidden: ++counter, + }); + }; + + Thing.prototype.showPublic = function() { + return this.someProperty; + }; + + Thing.prototype.showPrivate = function() { + return privateScope.get(this).hidden; + }; +} + +console.log(typeof privateScope); +// "undefined" + +var thing = new Thing(); + +console.log(thing); +// Thing {someProperty: "foo"} + +thing.showPublic(); +// "foo" + +thing.showPrivate(); +// 1 +</pre> + +<p>Такий самий шаблон приватності з використанням замикань для локальних змінних можна створити через <code>var</code>, але це потребує функціональної області видимості (зазвичай, це НВФВ у шаблоні модуль) замість просто блочної області видимості у вищенаведеному прикладі.</p> + +<h3 id="Повторні_оголошення">Повторні оголошення</h3> + +<p>Повторне оголошення тієї самої змінної у області видимості тієї самої функції чи блоку спричиняє помилку {{jsxref("SyntaxError")}}.</p> + +<pre class="brush: js example-bad">if (x) { + let foo; + let foo; // викидається SyntaxError. +} +</pre> + +<p>Ви можете стикнутися з помилками у конструкціях <a href="/uk/docs/JavaScript/Reference/Statements/switch"><code>switch</code></a>, бо вони мають лише один блок.</p> + +<pre class="brush: js example-bad">let x = 1; +switch(x) { + case 0: + let foo; + break; + + case 1: + let foo; // SyntaxError через повторне оголошення. + break; +}</pre> + +<p>Однак, важливо зазначити, що блок, вкладений у блок case, створить нове лексичне середовище блочної області видимості, яке не викличе помилок повторного оголошення, показаних вище.</p> + +<pre class="brush: js">let x = 1; + +switch(x) { + case 0: { + let foo; + break; + } + case 1: { + let foo; + break; + } +}</pre> + +<h3 id="Тимчасова_мертва_зона">Тимчасова мертва зона</h3> + +<p>На відміну від змінних, оголошених через <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/var#var_hoisting">var</a></code>, які спочатку мають значення <code>undefined</code>, <code>let</code>-змінні <em>не</em> ініціалізуються, поки не відбудеться обчислення їхнього оголошення. Звернення до змінної до ініціалізації призводить до викидання <code><a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/ReferenceError">ReferenceError</a></code>. Змінна знаходиться у "тимчасовій мертвій зоні" від початку блоку і до проходження ініціалізації.</p> + +<pre class="brush: js example-bad">function do_something() { + console.log(bar); // undefined + console.log(foo); // ReferenceError + var bar = 1; + let foo = 2; +}</pre> + +<h3 id="Тимчасова_мертва_зона_та_typeof">Тимчасова мертва зона та <code>typeof</code></h3> + +<p>На відміну від просто неоголошених змінних та змінних, що містять значення <code>undefined</code>, використання оператора <code>typeof</code> для перевірки типу змінної, що знаходиться у своїй ТМЗ, викине <code>ReferenceError</code>:</p> + +<pre class="brush: js">// виведе 'undefined' +console.log(typeof undeclaredVariable); +// призведе до 'ReferenceError' +console.log(typeof i); +let i = 10;</pre> + +<h3 id="Ще_один_приклад_тимчасової_мертвої_зони_у_поєднанні_з_лексичною_областю_видимості">Ще один приклад тимчасової мертвої зони у поєднанні з лексичною областю видимості</h3> + +<p>Через наявність лексичної області видимості, ідентифікатор <code>foo</code> у виразі <code>(foo + 55)</code> оцінюється як ідентифікатор foo блоку if, а не розташована вище змінна foo зі значенням 33.</p> + +<p>У цьому конретному рядку змінна <code>foo</code> блоку if вже була створена у лексичному середовищі, але ще не пройшла (і перервала) свою ініціалізацію (яка є частиною інструкції).</p> + +<p>Змінна <code>foo</code> блоку if досі у тимчасовій мертвій зоні.</p> + +<pre class="brush: js example-bad">function test(){ + var foo = 33; + if (true) { + let foo = (foo + 55); // ReferenceError + } +} +test();</pre> + +<p>Цей феномен може заплутати, наприклад, у наступній ситуації. Інструкція <code>let n of n.a</code> вже знаходиться всередині приватної області видимості блоку циклу for. Отже, ідентифікатор <code>n.a</code> вважається властивістю 'a' об'єкта 'n', розташованого у першій частині цієї ж інструкції ("let n").</p> + +<p>Він досі знаходиться у тимчасовій мертвій зоні, оскільки його оголошення ще не було виконано та перервалось.</p> + +<pre class="brush: js example-bad">function go(n) { + // n тут визначений! + console.log(n); // Object {a: [1,2,3]} + + for (let n of n.a) { // ReferenceError + console.log(n); + } +} + +go({a: [1, 2, 3]}); +</pre> + +<h2 id="Інші_ситуації">Інші ситуації</h2> + +<p>При використанні всередині блоку, <strong><code>let</code></strong> обмежує область видимості змінної цим блоком. Зауважте відмінність від <code><strong>var</strong></code><em>,</em> чия область видимості - функція, де відбулось оголошення.</p> + +<pre class="brush: js">var a = 1; +var b = 2; + +if (a === 1) { + var a = 11; // глобальна область видимості + let b = 22; // областю видимості є блок if + + console.log(a); // 11 + console.log(b); // 22 +} + +console.log(a); // 11 +console.log(b); // 2 +</pre> + +<p>Однак, комбінація оголошень <code><strong>var</strong></code> та <strong><code>let</code></strong>, наведена нижче, спричинить <code>SyntaxError </code>через підняття <code><strong>var</strong></code> наверх блоку. Це призводить до неявного повторного оголошення змінної.</p> + +<pre class="brush: js example-bad">let x = 1; + +{ + var x = 2; // SyntaxError через повторне оголошення +} +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Початкове визначення. Не визначає let-вирази та let-блоки.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.statements.let")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Reference/Statements/var"><code>var</code></a></li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Statements/const"><code>const</code></a></li> + <li><a href="https://hacks.mozilla.org/2015/07/es6-in-depth-let-and-const/">ES6 In Depth: <code>let</code> and <code>const</code></a></li> + <li><a href="https://blog.mozilla.org/addons/2015/10/14/breaking-changes-let-const-firefox-nightly-44/">Breaking changes in <code>let</code> and <code>const</code> in Firefox 44</a></li> + <li><a href="https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20%26%20closures/ch3.md">You Don't Know JS: Scope & Closures: Chapter 3: Function vs. Block Scope</a></li> + <li><a href="https://stackoverflow.com/a/33198850/1125029">StackOverflow: What is the Temporal Dead Zone. </a></li> + <li><a href="https://stackoverflow.com/questions/762011/whats-the-difference-between-using-let-and-var-to-declare-a-variable">StackOverflow: What is the difference between using let and var?</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/statements/return/index.html b/files/uk/web/javascript/reference/statements/return/index.html new file mode 100644 index 0000000000..030027232f --- /dev/null +++ b/files/uk/web/javascript/reference/statements/return/index.html @@ -0,0 +1,159 @@ +--- +title: return +slug: Web/JavaScript/Reference/Statements/return +tags: + - JavaScript + - Оператор +translation_of: Web/JavaScript/Reference/Statements/return +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><strong>Оператор</strong> <strong><code>return</code></strong> завершує виконання функції та вказує значення, що буде повернене функцією.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-return.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">return [[expression]]; </pre> + +<dl> + <dt><code>expression</code></dt> + <dd>Вираз, значення якого буде повернене. Якщо пропущений, повертається <code>undefined</code>.</dd> +</dl> + +<h2 id="Опис">Опис</h2> + +<p>Коли у тілі функції використовується оператор <code>return</code>, виконання функції зупиняється. За наявності, надане значення повертається у інструкцію, що викликала функцію. Наприклад, наступна функція повертає квадрат свого аргументу <code>x</code>, де <code>x</code> є числом.</p> + +<pre class="brush: js">function square(x) { + return x * x; +} +var demo = square(3); +// demo дорівнюватиме 9 +</pre> + +<p>Якщо значення не вказане, повертається <code>undefined</code>.</p> + +<p>Всі наведені оператори return переривають виконання функції:</p> + +<pre class="brush: js">return; +return true; +return false; +return x; +return x + y / 3; +</pre> + +<h3 id="Автоматична_вставка_крапки_з_комою">Автоматична вставка крапки з комою</h3> + +<p>Оператор <code>return</code> підпадає під <a href="/uk/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">автоматичну вставку крапки з комою (ASI, automatic semicolon insertion)</a>. Символи кінця рядка недозволені між ключовим словом <code>return</code> та виразом.</p> + +<pre class="brush: js">return +a + b; +</pre> + +<p>перетворюється у:</p> + +<pre class="brush: js">return; +a + b; +</pre> + +<p>Консоль виведе попередження "unreachable code after return statement" (недосяжний код після оператора return).</p> + +<div class="note">Починаючи з Gecko 40 {{geckoRelease(40)}}, у консолі виводиться попередження, якщо після оператора return знайдено недосяжний код.</div> + +<p>Щоб уникнути цієї проблеми (запобігти ASI), використовуйте дужки:</p> + +<pre class="brush: js">return ( + a + b +); +</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Переривання_функції">Переривання функції</h3> + +<p>Функція негайно зупиняється у точці виклику оператора <code>return</code>.</p> + +<pre class="brush: js">function counter() { + for (var count = 1; ; count++) { // нескінченний цикл + console.log(count + 'A'); // до 5 + if (count === 5) { + return; + } + console.log(count + 'B'); // до 4 + } + console.log(count + 'C'); // ніколи не виводиться +} + +counter(); + +// Результат: +// 1A +// 1B +// 2A +// 2B +// 3A +// 3B +// 4A +// 4B +// 5A +</pre> + +<h3 id="Повернення_результату_функції">Повернення результату функції</h3> + +<p>Дивіться також статтю про <a href="/uk/docs/Web/JavaScript/Closures">Замикання</a>.</p> + +<pre class="brush: js">function magic() { + return function calc(x) { return x * 42; }; +} + +var answer = magic(); +answer(1337); // 56154 +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Початкове визначення.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.9', 'Return statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-return-statement', 'Return statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-return-statement', 'Return statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.statements.return")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Reference/Functions" title="En/Core_JavaScript_1.5_Reference/Functions">Функції</a></li> + <li><a href="/uk/docs/Web/JavaScript/Closures">Замикання</a></li> +</ul> diff --git a/files/uk/web/javascript/reference/statements/switch/index.html b/files/uk/web/javascript/reference/statements/switch/index.html new file mode 100644 index 0000000000..986ba49599 --- /dev/null +++ b/files/uk/web/javascript/reference/statements/switch/index.html @@ -0,0 +1,295 @@ +--- +title: switch +slug: Web/JavaScript/Reference/Statements/switch +tags: + - JavaScript + - Інструкція + - Довідка +translation_of: Web/JavaScript/Reference/Statements/switch +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><span class="seoSummary"><strong>Інструкція</strong> <strong><code>switch</code> </strong>обчислює <a href="/uk/docs/Web/JavaScript/Guide/Вирази_та_оператори">вираз</a>, зіставляє значення виразу зі значенням блоку <code>case</code> та виконує <a href="/uk/docs/Web/JavaScript/Reference/Statements">інструкції</a>, що відносяться до цього блоку, а також інструкції у блоках <code>case</code>, наступних за блоком, що має збіг.</span></p> + +<div>{{EmbedInteractiveExample("pages/js/statement-switch.html", "taller")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">switch (<var>expression</var>) { + case <var>value1</var>: + //Інструкції, що виконуються, коли + //результат виразу збігається з value1 + [break;] + case <var>value2</var>: + //Інструкції, що виконуються, коли + //результат виразу збігається з value2 + [break;] + ... + case <var>valueN</var>: + //Інструкції, що виконуються, коли + //результат виразу збігається з valueN + [break;] + [default: + //Інструкції, що виконуються, коли жодне + //значення не збігається зі значенням виразу + [break;]] +}</pre> + +<dl> + <dt><code><var>expression</var></code></dt> + <dd>Вираз, чий результат зіставляється з кожним блоком <code>case</code>.</dd> + <dt><code>case <var>valueN</var></code> {{optional_inline}}</dt> + <dd>Блок <code>case</code>, який зіставляється з виразом <code><var>expression</var></code>. Якщо значення <code><var>expression</var></code> збігається з вказаним значенням <code><var>valueN</var></code>, інструкції всередині блоку <code>case</code> виконуються, поки не досягнуть або кінця інструкції <code>switch</code>, або оператора <code>break</code>.</dd> + <dt><code>default</code> {{optional_inline}}</dt> + <dd>Блок <code>default</code>; якщо вказаний, виконується у випадку, коли значення <code><var>expression</var></code> не збігається з жодним з блоків <code>case</code>.</dd> +</dl> + +<h2 id="Опис">Опис</h2> + +<p>Інструкція <code>switch</code> спочатку обчислює вираз. Далі шукає перший блок <code>case</code>, чий вираз має таке саме значення, що й результат вхідного виразу (використовуючи <a href="/uk/docs/Web/JavaScript/Reference/Operators/Оператори_порівняння">строгу рівність</a>, <code>===</code>) та передає контроль цьому блоку, виконуючи інструкції, що до нього відносяться. (Якщо більше одного <code>case</code> збігаються з наданим значенням, обирається перший знайдений <code>case</code>, навіть якщо блоки <code>case</code> не дорівнюють одне одному.)</p> + +<p>Якщо не знайдено жодного збігу серед блоків <code>case</code>, програма шукає необов'язковий блок <code>default</code>, і, якщо знаходить, передає йому контроль, виконуючи відповідні інструкції. Якщо блоку <code>default</code> не знайдено, програма продовжує виконання першої з інструкції, що йде після завершення <code>switch</code>. Прийнято писати блок <code>default</code> останнім, але це не обов'язково.</p> + +<p>Необов'язковий оператор <code><a href="/uk/docs/Web/JavaScript/Reference/Statements/break" title="JavaScript/Reference/Statements/break">break</a></code> у кожному <code>case</code> гарантує, що програма перериває виконання <code>switch</code>, як тільки виконані знайдені інструкції, та продовжує виконання з інструкції, що йде після <code>switch</code>. Якщо <code>break</code> не вказано, програма продовжує виконання наступної інструкції у <code>switch</code>.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_switch">Використання <code>switch</code></h3> + +<p>У наступному прикладі, якщо <code>expr</code> дорівнює <code>Банани</code>, програма знаходить збіг з блоком <code>case 'Банани'</code> та виконує відповідну інструкцію. Дійшовши до оператора <code>break</code>, програма перериває виконання <code>switch</code> та виконує інструкцію, наступну після <code>switch</code>. Якби не оператор <code>break</code>, інструкція блоку <code>case 'Вишні'</code> також би виконалась.</p> + +<pre class="brush: js">switch (expr) { + case 'Апельсини': + console.log('Апельсини коштують $0.59 за фунт.'); + break; + case 'Яблука': + console.log('Яблука коштують $0.32 за фунт.'); + break; + case 'Банани': + console.log('Банани коштують $0.48 за фунт.'); + break; + case 'Вишні': + console.log('Вишні коштують $3.00 за фунт.'); + break; + case 'Манго': + case 'Папайя': + console.log('Манго та папайя коштують $2.79 за фунт.'); + break; + default: + console.log('Вибачте, в нас закінчились ' + expr + '.'); +} + +console.log("Бажаєте чого-небудь ще?"); +</pre> + +<h3 id="Що_станеться_якщо_я_забуду_break">Що станеться, якщо я забуду <code>break</code>?</h3> + +<p>Якщо ви забудете <code>break</code>, скрипт буде виконуватись, починаючи від блоку, який відповідає умові, і продовжить виконувати наступні блоки, <strong>незалежно від того, чи відповідають вони умові</strong>.</p> + +<p>Дивіться наступний приклад:</p> + +<pre class="brush: js">var foo = 0; +switch (foo) { + case -1: + console.log('від\'ємна 1'); + break; + case 0: // foo дорівнює 0, отже, умова виконана, і цей блок виконається + console.log(0); + // ЗАУВАГА: забутий break стояв би тут + case 1: // немає оператора break у 'case 0:', тому цей блок також виконається + console.log(1); + break; // програма зустріне тут break і не виконуватиме 'case 2:' + case 2: + console.log(2); + break; + default: + console.log('default'); +}</pre> + +<h3 id="Чи_можна_поставити_default_між_блоками_case">Чи можна поставити <code>default</code> між блоками <code>case</code>?</h3> + +<p>Так, можна! JavaScript відправить вас у <code>default</code>, якщо не знайде збігів:</p> + +<pre class="brush: js">var foo = 5; +switch (foo) { + case 2: + console.log(2); + break; // програма зустріне тут break, і не виконуватиме 'default:' + default: + console.log('default') + // проходимо далі + case 1: + console.log('1'); +} +</pre> + +<p>Це також працює, якщо поставити <code>default</code> перед усіма блоками <code>case</code>.</p> + +<h3 id="Методи_для_кількох_критеріїв_case">Методи для кількох критеріїв <code>case</code></h3> + +<p>Джерело цієї техніки тут:</p> + +<p><a href="http://stackoverflow.com/questions/13207927/switch-statement-multiple-cases-in-javascript">Інструкція switch з кількома блоками case у JavaScript (Stack Overflow)</a></p> + +<h4 id="Декілька_case_одна_операція">Декілька <code>case</code> : одна операція</h4> + +<p>Цей метод використовує переваги того факту, що, якщо в кінці блоку <code>case</code> немає оператора break, він продовжить виконувати наступний блок <code>case</code>, незалежно від того, чи той відповідає необхідній умові. (Дивіться розділ <a href="#Що_станеться_якщо_я_забуду_break">Що станеться, якщо я забуду <code>break</code>?</a>)</p> + +<p>Ось приклад інструкції для єдиної операції з послідовних <code>case</code>, де чотири різні значення виконують одне й те саме.</p> + +<pre class="brush: js">var Animal = 'Жирафа'; +switch (Animal) { + case 'Корова': + case 'Жирафа': + case 'Собака': + case 'Свиня': + console.log('Ці тварини підуть на Ноїв ковчег.'); + break; + case 'Динозавр': + default: + console.log('Ця тварина не піде.'); +}</pre> + +<h4 id="Декілька_case_ланцюгові_операції">Декілька <code>case</code> : ланцюгові операції</h4> + +<p>Ось приклад кількох операцій у послідовних блоках <code>case</code>, де, в залежності від наданого цілого числа, ви можете отримати різний результат. Він демонструє, що виконуватиметься у тому порядку, в якому ви розташували блоки <code>case</code>, і вони не обов'язково мають бути чисельно послідовні. У JavaScript ви навіть можете змішувати їх з рядковими значеннями.</p> + +<pre class="brush: js">var foo = 1; +var output = 'Результат: '; +switch (foo) { + case 0: + output += 'То '; + case 1: + output += 'як '; + case 2: + output += 'тебе '; + case 3: + output += 'звати'; + case 4: + output += '?'; + console.log(output); + break; + case 5: + output += '!'; + console.log(output); + break; + default: + console.log('Будь ласка, оберіть число від 0 до 5!'); +}</pre> + +<p>Результат цього прикладу:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Значення</th> + <th scope="col">Виведений текст</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>foo</code> дорівнює <code>NaN</code> або не <code>1</code>, <code>2</code>, <code>3</code>, <code>4</code>, <code>5</code> чи <code>0</code></td> + <td>Будь ласка, оберіть число від 0 до 5!</td> + </tr> + <tr> + <td><code>0</code></td> + <td>Результат: То як тебе звати?</td> + </tr> + <tr> + <td><code>1</code></td> + <td>Результат: як тебе звати?</td> + </tr> + <tr> + <td><code>2</code></td> + <td>Результат: тебе звати?</td> + </tr> + <tr> + <td><code>3</code></td> + <td>Результат: звати?</td> + </tr> + <tr> + <td><code>4</code></td> + <td>Результат: ?</td> + </tr> + <tr> + <td><code>5</code></td> + <td>Результат: !</td> + </tr> + </tbody> +</table> + +<h3 id="Змінні_блочної_області_видимості_у_інструкціях_switch">Змінні блочної області видимості у інструкціях <code>switch</code></h3> + +<p>Маючи підтримку ECMAScript 2015 (ES6) у більшості сучасних веб-переглядачів, у певних випадках ви захочете використати оператори {{jsxref("Statements/let", "let")}} та {{jsxref("Statements/const", "const")}} для оголошення змінних блочної області видимості.</p> + +<p>Погляньте на цей приклад:</p> + +<pre class="brush: js">const action = 'скажи_привіт'; +switch (action) { + case 'скажи_привіт': + let message = 'привіт'; + console.log(message); + break; + case 'скажи_бувай': + let message = 'бувай'; + console.log(message); + break; + default: + console.log('Отримана порожня дія.'); + break; +}</pre> + +<p>Цей приклад спричинить помилку <code>Uncaught SyntaxError: Identifier 'message' has already been declared</code>, яку ви, можливо, не очікували.</p> + +<p>Все тому, що перше оголошення <code>let message = 'привіт';</code> конфліктує з другим оголошенням <code>let message = 'бувай';</code> хоча вони й розташовані у окремих блоках <code>case 'скажи_привіт':</code> та <code>case 'скажи_бувай':</code>. Зрештою, це відбувається тому, що обидва оголошення <code>let</code> інтерпретуються як дублюючі оголошення однієї змінної всередині тієї самої блочної області видимості.</p> + +<p>Ми можемо легко це виправити, огорнувши наші блоки <code>case</code> у дужки:</p> + +<pre class="brush: js">const action = 'скажи_привіт'; +switch (action) { + case 'скажи_привіт': <strong>{ // додані дужки</strong> + let message = 'привіт'; + console.log(message); + break; + <strong>} // додані дужки</strong> + case 'скажи_бувай': <strong>{ // додані дужки</strong> + let message = 'бувай'; + console.log(message); + break; + <strong>} // додані дужки</strong> + default: <strong>{ // додані дужки</strong> + console.log('Отримана порожня дія.'); + break; + <strong>} // додані дужки</strong> +}</pre> + +<p>Тепер цей код, як і задумано, виведе у консоль <code>привіт</code> без жодних помилок.</p> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-switch-statement', 'switch statement')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.statements.switch")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Statements/if...else", "if...else")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/statements/throw/index.html b/files/uk/web/javascript/reference/statements/throw/index.html new file mode 100644 index 0000000000..96b8974f40 --- /dev/null +++ b/files/uk/web/javascript/reference/statements/throw/index.html @@ -0,0 +1,198 @@ +--- +title: throw +slug: Web/JavaScript/Reference/Statements/throw +tags: + - JavaScript + - throw + - виняток +translation_of: Web/JavaScript/Reference/Statements/throw +--- +<div>{{jsSidebar("Statements")}}</div> + +<p><strong>Оператор</strong> <strong><code>throw</code> </strong>викидає визначений користувачем виняток. Виконання поточної функції буде зупинено (оператори після <code>throw</code> не будуть виконані), а контроль буде передано до першого блоку <a href="/uk/docs/Web/JavaScript/Reference/Statements/try...catch"><code>catch</code></a> у стеку викликів. Якщо жодного блоку <code>catch</code> не існує, виконання програми переривається.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-throw.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">throw <em>expression</em>; </pre> + +<dl> + <dt><code>expression</code></dt> + <dd>Вираз, що викидається.</dd> +</dl> + +<h2 id="Опис">Опис</h2> + +<p>Скористайтеся оператором <code>throw</code>, щоб викинути виняток. Коли викидаєте виняток, <code>expression</code> вказує значення винятка. Кожна з наступних команд викидає виняток:</p> + +<pre class="brush: js">throw 'Error2'; // генерує виняток, що має рядкове значення +throw 42; // генерує виняток, що має значення 42 +throw true; // генерує виняток, що має значення true +throw new Error('Required'); // генерує об'єкт помилки з повідомленням Required +</pre> + +<p>Також зазначте, що на оператор <code>throw</code> впливає <a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Automatic_semicolon_insertion">автоматична вставка крапки з комою (automatic semicolon insertion, ASI)</a>, оскільки між ключовим словом <code>throw</code> та виразом не дозволяється вставляти символи закінчення рядка.</p> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Викидання_обєкта">Викидання об'єкта</h3> + +<p>Ви можете вказати об'єкт, коли викидаєте виняток. Після цього ви можете звертатися до властивостей об'єкта у блоці <code>catch</code>. Наступний приклад створює об'єкт типу <code>UserException</code>, і далі використовує його з оператором <code>throw</code>.</p> + +<pre class="brush: js">function UserException(message) { + this.message = message; + this.name = 'UserException'; +} +function getMonthName(mo) { + mo = mo - 1; // Припасувати номер місяця до індексу масиву (1 = Січ, 12 = Груд) + var months = ['Січ', 'Лют', 'Берез', 'Квіт', 'Трав', 'Черв', 'Лип', + 'Серп', 'Верес', 'Жовт', 'Листоп', 'Груд']; + if (months[mo] !== undefined) { + return months[mo]; + } else { + throw new UserException('InvalidMonthNo'); + } +} + +try { + // команди до виконання + var myMonth = 15; // 15 не входить у визначені межі й викликає виняток + var monthName = getMonthName(myMonth); +} catch (e) { + monthName = 'unknown'; + console.error(e.message, e.name); // передати об'єкт винятку до обробника помилок +} +</pre> + +<h3 id="Ще_один_приклад_викидання_обєкта">Ще один приклад викидання об'єкта</h3> + +<p>Наступний приклад перевіряє наданий текстовий рядок на формат поштового індексу. Якщо поштовий індекс використовує неправильний формат, оператор throw викидає виняток, створюючи об'єкт типу <code>ZipCodeFormatException</code>.</p> + +<pre class="brush: js">/* + * Створює об'єкт ZipCode. + * + * Дозволені формати поштового індексу: + * 12345 + * 12345-6789 + * 123456789 + * 12345 6789 + * + * Якщо аргумент, переданий до конструктора ZipCode, не відповідає + * жодному з цих шаблонів, викидається виняток. + */ + +function ZipCode(zip) { + zip = new String(zip); + pattern = /[0-9]{5}([- ]?[0-9]{4})?/; + if (pattern.test(zip)) { + // значення поштового індексу буде першим збігом у рядку + this.value = zip.match(pattern)[0]; + this.valueOf = function() { + return this.value + }; + this.toString = function() { + return String(this.value) + }; + } else { + throw new ZipCodeFormatException(zip); + } +} + +function ZipCodeFormatException(value) { + this.value = value; + this.message = 'не відповідає очікуваному формату поштового індексу'; + this.toString = function() { + return this.value + this.message; + }; +} + +/* + * Це можна вставити у скрипт, який перевіряє дані адреси + * на відповідність формату адрес. + */ + +const ZIPCODE_INVALID = -1; +const ZIPCODE_UNKNOWN_ERROR = -2; + +function verifyZipCode(z) { + try { + z = new ZipCode(z); + } catch (e) { + if (e instanceof ZipCodeFormatException) { + return ZIPCODE_INVALID; + } else { + return ZIPCODE_UNKNOWN_ERROR; + } + } + return z; +} + +a = verifyZipCode(95060); // повертає 95060 +b = verifyZipCode(9560); // повертає -1 +c = verifyZipCode('a'); // повертає -1 +d = verifyZipCode('95060'); // повертає 95060 +e = verifyZipCode('95060 1234'); // повертає 95060 1234 +</pre> + +<h3 id="Повторне_викидання_винятку">Повторне викидання винятку</h3> + +<p>Ви можете скористатись оператором <code>throw</code>, щоб повторно викинути виняток після того, як перехопите його. Наступний приклад перехоплює виняток з числовим значенням та повторно викидає його, якщо значення більше за 50. Повторно викинутий виняток спливає наверх до замикаючої функції або на верхній рівень, так, що користувач його бачить.</p> + +<pre class="brush: js">try { + throw n; // викидає виняток з числовим значенням +} catch (e) { + if (e <= 50) { + // команди для обробки винятків 1-50 + } else { + // неможливо обробити цей виняток, тому викидаємо його повторно + throw e; + } +} +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Початкове визначення. Реалізоване у JavaScript 1.4</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.13', 'throw statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-throw-statement', 'throw statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-throw-statement', 'throw statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.statements.throw")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Reference/Statements/try...catch"><code>try...catch</code></a></li> +</ul> diff --git a/files/uk/web/javascript/reference/statements/try...catch/index.html b/files/uk/web/javascript/reference/statements/try...catch/index.html new file mode 100644 index 0000000000..9d506beb60 --- /dev/null +++ b/files/uk/web/javascript/reference/statements/try...catch/index.html @@ -0,0 +1,319 @@ +--- +title: try...catch +slug: Web/JavaScript/Reference/Statements/try...catch +tags: + - Error + - JavaScript + - виняток + - помилка +translation_of: Web/JavaScript/Reference/Statements/try...catch +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>Конструкція <strong><code>try...catch</code></strong> позначає блок команд, які треба виконати, та визначає реакцію в разі, якщо буде викинуто виняток.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-trycatch.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">try { + <em>try_statements</em> +} +[catch (<em>exception_var_1</em> if <em>condition_1</em>) { // нестандартна форма + <em>catch_statements_1</em> +}] +... +[catch (<em>exception_var_2</em>) { + <em>catch_statements_2</em> +}] +[finally { + <em>finally_statements</em> +}] +</pre> + +<dl> + <dt><code>try_statements</code></dt> + <dd>Команди, які треба виконати.</dd> +</dl> + +<dl> + <dt><code>catch_statements_1</code>, <code>catch_statements_2</code></dt> + <dd>Команди, що виконуються, якщо викинуто виняток у блоці <code>try</code>.</dd> +</dl> + +<dl> + <dt><code>exception_var_1</code>, <code>exception_var_2</code></dt> + <dd>Ідентифікатор, що містить об'єкт винятку для відповідного блоку <code>catch</code>.</dd> +</dl> + +<dl> + <dt><code>condition_1</code></dt> + <dd>Умовний вираз.</dd> +</dl> + +<dl> + <dt><code>finally_statements</code></dt> + <dd>Команди, що виконуються після завершення блоку <code>try</code>. Ці команди виконуються незалежно від того, чи було викинуто або перехоплено виняток.</dd> +</dl> + +<h2 id="Опис">Опис</h2> + +<p>Вираз <code>try</code> містить одну або більше команд у блоці <code>try</code>. Фігурні дужки <code>{}</code> є обов'язковими, навіть для однієї команди. Має бути присутній принаймні один блок <code>catch</code> або <code>finally</code>. Це утворює три можливі форми виразу <code>try</code>:</p> + +<ol> + <li><code>try...catch</code></li> + <li><code>try...finally</code></li> + <li><code>try...catch...finally</code></li> +</ol> + +<p>Блок <code>catch</code> містить команди, які визначають, що робити, якщо викинуто виняток у блоці <code>try</code>. Отже, ви хочете, щоб блок <code>try</code> виконався успішно, а в разі неуспіху ви хочете передати контроль до блоку <code>catch</code>. В разі, якщо будь-який вираз всередині блоку <code>try</code> (або функція, викликана зсередини блоку <code>try</code>) викидає виняток, контроль негайно переходить до блоку <code>catch</code>. Якщо жодних винятків у блоці <code>try</code> не було викинуто, блок <code>catch</code> пропускається.</p> + +<p>Блок <code>finally</code> виконується після виконання блоків <code>try</code> та <code>catch</code>, але до команд, що йдуть після виразу <code>try</code>. Він завжди виконується, незалежно від того, чи було викинуто або перехоплено виняток.</p> + +<p>Ви можете створити один або більше вкладених виразів <code>try</code>. Якщо внутрішній <code>try</code> не має блоку <code>catch</code>, контроль передається у блок <code>catch</code> зовнішнього <code>try</code>.</p> + +<p>Ви також можете використовувати <code>try</code>, щоб обробляти винятки JavaScript. Ви знайдете більше інформації щодо винятків JavaScript у <a href="/uk/docs/Web/JavaScript/Guide" title="en/JavaScript/Guide">Посібнику JavaScript</a>.</p> + +<h3 id="Безумовний_catch">Безумовний <code>catch</code></h3> + +<p>Коли використовується один безумовний блок <code>catch</code>, перехід у <code>catch</code> відбувається у випадку викидання будь-якого винятку. Наприклад, коли виняток стається у наступному коді, контроль передається до блоку <code>catch</code>.</p> + +<pre class="brush: js">try { + throw 'myException'; // генерує виняток +} +catch (e) { + // команди обробки будь-яких винятків + logMyErrors(e); // передає об'єкт винятку до обробника помилок +} +</pre> + +<p>Блок <code>catch</code> вказує ідентифікатор (<code>e</code> у наведеному прикладі), який містить значення, визначене у операторі <code>throw</code>. Блок <code>catch</code> унікальний тим, що JavaScript створює цей ідентифікатор при вході у блок <code>catch</code>, а також додає його у область видимості; ідентифікатор "живе" тільки протягом виконання блоку <code>catch</code>; коли <code>catch</code> завершується, ідентифікатор більше недоступний.</p> + +<h3 id="Умовний_блок_catch">Умовний блок <code>catch</code></h3> + +<p>{{non-standard_header}}</p> + +<p>Ви також можете використати один або декілька умовних блоків <code>catch</code> для обробки специфічних винятків. В цьому випадку вхід у відповідний блок <code>catch</code> відбувається, коли викидається вказаний виняток. У наступному прикладі код у блоці <code>try</code> може викинути один з трьох винятків: {{jsxref("TypeError")}}, {{jsxref("RangeError")}} або {{jsxref("EvalError")}}. Коли виникає виняток, контроль передається до відповідного блоку <code>catch</code>. Якщо виняток не є одним із вказаних, і був знайдений безумовний блок <code>catch</code>, контроль передається до цього блоку <code>catch</code>.</p> + +<p>Якщо ви використовуєте безумовний <code>catch</code> з одним або кількома умовними блоками <code>catch</code>, безумовний <code>catch</code> має бути вказаний останнім. Інакше безумовний <code>catch</code> перехоплюватиме всі види винятків до того, як вони потраплять в умовні блоки.</p> + +<p>Нагадування: ця функціональність не є частиною специфікації ECMAScript і ніколи не прибиралася з Firefox 59. Вона більше не підтримується у жодних сучасних веб-переглядачах.</p> + +<pre class="brush: js">try { + myroutine(); // може викинути три типи винятків +} catch (e if e instanceof TypeError) { + // команди обробки винятків типу TypeError +} catch (e if e instanceof RangeError) { + // команди обробки винятків типу RangeError +} catch (e if e instanceof EvalError) { + // команди обробки винятків типу EvalError +} catch (e) { + // команди обробки не вказаних типів винятків + logMyErrors(e); // передати об'єкт винятку до обробника помилок +} +</pre> + +<p>Ось такі ж "Умовні блоки catch", написані кодом, що відповідає специфікації ECMAScript (він доволі багатослівний, зате працює всюди):</p> + +<pre class="brush: js">try { + myroutine(); // може викинути три типи винятків +} catch (e) { + if (e instanceof TypeError) { + // команди обробки винятків типу TypeError + } else if (e instanceof RangeError) { + // команди обробки винятків типу RangeError + } else if (e instanceof EvalError) { + // команди обробки винятків типу EvalError + } else { + // команди обробки не вказаних типів винятків + logMyErrors(e); // передати об'єкт винятку до обробника помилок + } +} +</pre> + +<h3 id="Ідентифікатор_винятку">Ідентифікатор винятку</h3> + +<p>Коли викидається виняток у блоці <code>try</code>, ідентифікатор <em><code>exception_var</code></em> (наприклад, <code>e</code> у <code>catch (e)</code>) містить значення, вказане у виразі <code>throw</code>. Ви можете скористатись цим ідентифікатором, щоб отримати інформацію про виняток. Це локальний ідентифікатор блоку <code>catch</code>. Тобто, він створюється при вході у <code>catch</code>, а після того, як виконання блоку <code>catch</code> завершується, ідентифікатор більше недоступний.</p> + +<pre class="brush: js">function isValidJSON(text) { + try { + JSON.parse(text); + return true; + } catch { + return false; + } +} +</pre> + +<h3 id="Блок_finally">Блок <code>finally</code></h3> + +<p>Блок <code>finally</code> містить команди, які виконуються після виконання блоків <code>try</code> та <code>catch</code>, але до команд, що розташовані після конструкції <code>try...catch...finally</code>. Зверніть увагу, що <code>finally</code> виконується незалежно від того, чи був викинутий виняток. Також, якщо виняток було викинуто, команди блоку <code>finally</code> виконуються навіть якщо немає блоку <code>catch</code>, щоб обробити виняток.</p> + +<p>Ви можете скористатись блоком <code>finally</code>, щоб у разі викидання винятку ваш скрипт переривався красиво; наприклад, вам може знадобитися звільнити ресурс, до якого був прив'язаний ваш скрипт.</p> + +<p>Це може виглядати дивним, мати спеціальний блок, пов'язаний з винятками, що виконується <em>незалежно</em> від того, чи стався виняток, але ця конструкція насправді виконує свою задачу. Важливим моментом є те, що блок <code>finally</code> виконується завжди, на відміну від звичайного коду, розташованого після <code>try...catch</code>.</p> + +<p>Наприклад, якщо станеться інший виняток всередині <code>catch</code> цього <code>try</code>, будь-який код, що не був виконаний у зовнішньому <code>try</code>, що замикає цей <code>try...catch</code> (або у головному потоці, якщо виконувався не зовнішній <code>try</code>), не буде виконаний, оскільки контроль негайно перейде до блоку <code>catch</code> зовнішнього <code>try</code> (або до внутнішнього генератора помилок, якщо виконується не блок <code>try</code>).</p> + +<p>Таким чином, будь який поточний код очистки, що виконується у цій зовнішній (або головній) секції перед закінченням, буде пропущений. Однак, якщо вираз <code>try</code> містить блок <code>finally</code>, то спочатку буде виконаний код блоку <code>finally</code>, дозволяючи зробити очистку, і тільки ПОТІМ контроль буде передано до блоку <code>catch</code> іншого <code>try</code> (або до генератора помилок) для обробки винятку.</p> + +<p>Отже, якщо поточна очистка повинна бути зроблена, не зважаючи на те, чи успішно виконаний код у <code>try...catch</code>, тоді, якби блок <code>finally</code> виконувався тільки після винятку, той самий код очистки довелося б повторювати і всередині, і поза блоком <code>finally</code>, і, таким чином, немає причини не мати один лише блок <code>finally</code>, який виконується незалежно від того, стався виняток чи ні.</p> + +<p>Наступний приклад відкриває файл і далі виконує команди, які використовують цей файл (JavaScript на стороні сервера дозволяє звертатись до файлів). Якщо викидається виняток, доки файл відкритий, блок <code>finally</code> закриває цей файл до того, як скрипт переривається. Код у блоці <code>finally</code> також виконується з явним поверненням з блоку <code>try</code> або <code>catch</code>.</p> + +<pre class="brush: js">openMyFile(); +try { + // прив'язати ресурс + writeMyFile(theData); +} +finally { + closeMyFile(); // завжди закривати ресурс +} +</pre> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Вкладені_блоки_try">Вкладені блоки try</h3> + +<p>Спочатку подивимось, що відбувається тут:</p> + +<pre class="brush: js">try { + try { + throw new Error('ой-ой'); + } + finally { + console.log('finally'); + } +} +catch (ex) { + console.error('зовнішній', ex.message); +} + +// Результат: +// "finally" +// "зовнішній" "ой-ой" +</pre> + +<p>Тепер, якщо ми вже перехопили виняток у внутрішньому try, додавши блок catch.</p> + +<pre class="brush: js">try { + try { + throw new Error('ой-ой'); + } + catch (ex) { + console.error('внутрішній', ex.message); + } + finally { + console.log('finally'); + } +} +catch (ex) { + console.error('зовнішній', ex.message); +} + +// Результат: +// "внутрішній" "ой-ой" +// "finally" +</pre> + +<p>А тепер викинемо цю помилку повторно.</p> + +<pre class="brush: js">try { + try { + throw new Error('ой-ой'); + } + catch (ex) { + console.error('внутрішній', ex.message); + throw ex; + } + finally { + console.log('finally'); + } +} +catch (ex) { + console.error('зовнішній', ex.message); +} + +// Результат: +// "внутрішній" "ой-ой" +// "finally" +// "зовнішній" "ой-ой" +</pre> + +<p>Будь-який виняток буде перехоплений лише один раз найближчим замикаючим блоком catch, якщо тільки він не був викинутий повторно. Звісно, будь-які нові винятки, викинуті у "внутрішньому" блоці (бо код у блоці catch може зробити те, що викине помилку), будуть перехоплені "зовнішнім" блоком.</p> + +<h3 id="Повернення_значень_з_блоку_finally">Повернення значень з блоку finally</h3> + +<p>Якщо блок <code>finally</code> повертає значення, це значення повертається усією конструкцією <code>try-catch-finally</code>, не зважаючи на будь-які інші оператори <code>return</code> у блоках <code>try</code> та <code>catch</code>. Це стосується й винятків, викинутих всередині блоку catch:</p> + +<pre class="brush: js">(function() { + try { + try { + throw new Error('ой-ой'); + } + catch (ex) { + console.error('внутрішній', ex.message); + throw ex; + } + finally { + console.log('finally'); + return; + } + } + catch (ex) { + console.error('зовнішній', ex.message); + } +})(); + +// Результат: +// "внутрішній" "ой-ой" +// "finally"</pre> + +<p>Зовнішній "ой-ой" не викидається через return у блоці finally. Те саме стосувалося б будь-якого значення, що поверталося б з блоку catch.</p> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Початкове визначення. Реалізоване у JavaScript 1.4</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.14', 'try statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-try-statement', 'try statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-try-statement', 'try statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Не є частиною нинішнього стандарту ECMA-262: Використання кількох блоків catch та умовні блоки (розширення SpiderMonkey, JavaScript 1.5).</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.statements.try_catch")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Error")}}</li> + <li>{{jsxref("Statements/throw", "throw")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/statements/var/index.html b/files/uk/web/javascript/reference/statements/var/index.html new file mode 100644 index 0000000000..5044c8cfc5 --- /dev/null +++ b/files/uk/web/javascript/reference/statements/var/index.html @@ -0,0 +1,226 @@ +--- +title: var +slug: Web/JavaScript/Reference/Statements/var +tags: + - JavaScript + - Довідка + - Оператор +translation_of: Web/JavaScript/Reference/Statements/var +--- +<div><font><font><font><font>{{jsSidebar("Заяви")}}</font></font></font></font></div> + +<p><font><font><strong><font><font>Оператор <code>var</code></font></font></strong><font><font> оголошує змінну, з необов'язковим наданням їй початкового значення.</font></font></font></font></p> + +<div><font><font><font><font>{{EmbedInteractiveExample ("pages/js/statement-var.html")}}</font></font></font></font></div> + +<p class="hidden">Першокод цього прикладу збережено у репозиторії GitHub. Якщо ви хочете долучитися до створення чи поліпшення таких прикладів, пропонуйте нам свої зміни до репозиторію <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a>.</p> + +<h2 id="Синтаксис"><font><font><font><font>Синтаксис</font></font></font></font></h2> + +<pre class="syntaxbox"><font><font><font><font>var </font></font></font></font><em><font><font><font><font>varname1 [</font></font></font></font></em><font><font><font><font>= </font></font></font></font><em><font><font><font><font>value1] [</font></font></font></font></em><font><font><font><font>, </font></font></font></font><em><font><font><font><font>varname2 [</font></font></font></font></em><font><font><font><font>= </font></font></font></font><em><font><font><font><font>value2] …</font></font></font></font></em><em><font><font><font><font> [</font></font></font></font></em><font><font><font><font>, </font></font></font></font><em><font><font><font><font>varnameN [</font></font></font></font></em><font><font><font><font>= </font></font></font></font><em><font><font><font><font>valueN]]]</font></font></font></font></em><font><font><font><font> ;</font></font></font></font></pre> + +<dl> + <dt><code>varnameN</code></dt> + <dd><font><font><font><font>Ім'я змінної. Може бути </font></font></font><font><font><font>будь-яким дозволеним ідентифікатором.</font></font></font></font></dd> +</dl> + +<dl> + <dt><code>valueN</code></dt> + <dd><font><font><font><font>Початкове значення змінної. Може бути будь-яким дозволеним виразом. </font></font></font><font><font><font>Якщо відсутнє, початковим значенням буде <em>undefined</em></font></font></font></font><font><font><font><font>.</font></font></font></font></dd> +</dl> + +<h2 id="Опис"><font><font><font><font>Опис</font></font></font></font></h2> + +<p><font><font><font><font>Оголошення змінних через <code>var</code> обробляються до виконання будь-якого коду. Це називається підняттям, і обговорюється нижче.</font></font></font></font></p> + +<p><font><font><font><font>Область видимості змінної, що її оголошено оператором <code>var</code>, залежить від <em>контексту виконання</em>, це або замикаюча функція, або — якщо змінну оголошено поза межами всіх функцій — глобальний контекст</font></font></font></font><font><font><font><font>. </font></font></font></font><font><font><font><font>Повторне оголошення змінної у JavaScript не скидає її значення.</font></font></font></font></p> + +<p><font><font><font><font>Присвоєння значення неоголошеній змінній просто створює її як глобальну змінну (вона стає властивістю глобального об'єкта) під час виконання присвоєння. Відмінності між оголошеними та неоголошеними змінними наступні:</font></font></font></font></p> + +<p><font><font><font><font>1. Оголошені змінні обмежені контекстом виконання, в якому їх оголошено. </font></font></font><font><font><font>Неоголошені змінні завжди глобальні.</font></font></font></font></p> + +<pre class="brush: js"><font><font><font><font>function x() { + y = 1; // у строгому режимі викидає ReferenceError + var z = 2; +}</font></font></font></font> +<font><font><font><font> +x();</font></font></font></font> +<font><font><font><font> +console.log(y); </font></font></font><font><font><font>// 1</font></font></font></font><font><font><font><font> +console.log(z); </font></font></font><font><font><font>// викидає ReferenceError: z не визначено за межами x</font></font></font></font></pre> + +<p><font><font><font><font>2. Оголошені змінні створюються до виконання будь-якого коду. Н</font><font>еоголошені </font></font></font><font><font><font>не існують до виконання коду, що присвоює їм значення.</font></font></font></font></p> + +<pre class="brush: js"><font><font><font><font>console.log(a); </font></font></font><font><font><font>// викидає ReferenceError +console.log('виконання триває…'); // ніколи не виконається</font></font></font></font> +</pre> + +<pre class="brush: js"><font><font><font><font>var a; +console.log(a); // "undefined" чи "", залежно від переглядача +console.log('виконання триває…'); // виконання триває…</font></font></font></font></pre> + +<p><font><font><font><font>3. Оголошені змінні є недоступними для налаштування властивостями свого контексту виконання (функціонального чи глобального). </font></font></font><font><font><font>Неоголошені змінні доступні для налаштування (наприклад, їх можна видалити).</font></font></font></font></p> + +<pre class="brush: js">var a = 1; +b = 2; + +delete this.а; // у строгому режимі викидає TypeError, поза ним просто не спрацьовує +delete this.b; + +console.log(a, b); // викидає ReferenceError +// Властивість 'b' була видалена й більше не існує.</pre> + +<p><font><font>Через ці відмінності використання неоголошених змінних, ймовірно, матиме несподівані наслідки. </font><font>Тож, </font></font><strong><font><font>рекомендується завжди оголошувати змінні, незалежно від того, чи розташовані вони всередині функціі, чи у глобальній області видимості. </font></font></strong><font><font>У </font></font><a href="/uk/docs/Web/JavaScript/Reference/Strict_mode"><font><font>строгому режимі</font></font></a><font><font> ECMAScript 5</font><font> присвоєння у неоголошену змінну викидає помилку.</font></font></p> + +<h3 id="Підняття_var">Підняття var</h3> + +<p><font><font>Позаяк оголошення змінних (та й оголошення загалом) обробляються до виконанням будь-якого коду, оголошення змінної будь-де у коді є тотожним оголошенню на його початку. Це також означає, що змінну можна використовувати до того, як вона була оголошена. </font></font><font><font>Ця поведінка називається «підняттям», бо виглядає так, наче оголошення було пересунуто на початок функції чи глобального коду. </font></font></p> + +<pre class="brush: js"><font><font>bla = 2;</font></font><font><font> +var bla;</font></font><font><font> +</font></font><font><font> +// ...неявно означає таке:</font></font> +<font><font> +var bla;</font></font><font><font> +bla = 2;</font></font></pre> + +<p><font><font>З цієї причини рекомендується завжди оголошувати змінні нагорі їхньої області видимості (на початку тіла функції чи глобального коду), бо так легше зрозуміти, котра змінна належить до області видимості функції (локальна), а яка обчислюється через ланцюжок областей видимості.</font></font></p> + +<p><font><font>Важливо зазначити, що підняття стосується оголошення змінної, але не її ініціалізації. Початкове значення дійсно буде присвоєне по виконанні відповідного рядка</font><font>:</font></font></p> + +<pre class="brush: js"><font><font><font><font>function</font></font> do_something() { + console.log(bar); // undefined</font></font><font><font> + var bar = 111; + console.log(bar); // 111 +}</font></font> + +<font><font>// ...неявно означає таке:</font></font> + +<font><font>function</font></font> do_something() { + var bar; + console.log(bar); // undefined + bar = 111; + console.log(bar); // 111 +}</pre> + +<h2 id="Приклади"><font><font>Приклади</font></font></h2> + +<h3 id="Оголошення_та_ініціалізація_двох_змінних"><font><font>Оголошення та ініціалізація двох змінних</font></font></h3> + +<pre class="brush: js"><font><font>var a = 0, b = 0;</font></font></pre> + +<h3 id="Присвоєння_двом_змінним_одного_рядкового_значення"><font><font>Присвоєння двом змінним одного рядкового значення</font></font></h3> + +<pre class="brush: js"><font><font>var a = 'А';</font></font><font><font> +var b = a;</font></font> +<font><font> +// ...те саме, що й:</font></font> +<font><font> +var a, b = a = 'А';</font></font></pre> + +<p><font><font>Зважайте на порядок:</font></font></p> + +<pre class="brush: js"><font><font>var x = y, y = 'А';</font></font><font><font> +console.log(x, y); </font><font>// undefinedА</font></font></pre> + +<p><font><font>Тут </font></font><code>x</code> та<font><font> </font></font><code>y</code> оголошуються до виконання коду, але присвоєння значень відбувається пізніше<font><font>. </font><font>Під час обчислення "</font></font><code>x = y</code><font><font>" змінна </font></font><code>y</code><font><font> вже існує, тому </font></font><code>ReferenceError</code> <font><font>не викидається, а її значенням є <code>undefined</code></font></font><font><font>. </font><font>Отже, змінна </font></font><code>x</code> <font><font>дістане значення <code>undefined</code></font></font><font><font>. Далі змінній <code>y</code> присвоюється значення <code>'А'</code>. Отже, після першого рядка <code>x === undefined && y === 'A'</code>, звідси результат.</font></font></p> + +<h3 id="Ініціалізація_кількох_змінних"><font><font>Ініціалізація кількох змінних</font></font></h3> + +<pre class="brush: js"><font><font>var x = 0;</font></font> +<font><font>function f() { + var x = y = 1; // Оголошує x локально; оголошує y глобально. +}</font></font> + +f(); + +<font><font>console.log (x, y); // 0 1 + +// У нестрогому режимі: +// глобальна змінна x, як і очікувалось; +// Але змінна y просочилась за межі функції!</font></font></pre> + +<p>Той самий приклад, але у строгому режимі:</p> + +<pre class="brush: js">'use strict'; + +var x = 0; +function f() { + var x = y = 1; // Викидає ReferenceError у строгому режимі. +} +f(); + +console.log(x, y);</pre> + +<h3 id="Неявні_глобальні_змінні_та_область_видимості_зовнішньої_функції"><font><font>Неявні глобальні змінні та область видимості зовнішньої функції</font></font></h3> + +<p>Змінні, що виглядають неявними глобальними змінними, можуть бути посиланнями на змінні області видимості зовнішньої функції:</p> + +<pre class="brush: js"><font><font><font><font>var x = 0; // оголошує змінну х в межах файлу та присвоює їй значення 0</font></font></font></font> +<font><font><font><font> +console.log(typeof z); </font></font></font><font><font><font>// "undefined", позаяк змінна z ще не існує</font></font></font></font> +<font><font><font><font> +function a() {</font></font></font></font><font><font><font><font> + var y = 2; </font></font></font><font><font><font>// Оголошує змінну y в області видимості функції a, та присвоює їй значення 2</font></font></font></font> +<font><font><font><font> + console.log (x, y); </font></font></font><font><font><font>// 0 2 </font></font></font></font> +<font><font><font><font> + function b() { + x = 3; // Присвоює 3 оголошеній в межах файлу змінній x. + у = 4; // Присвоює 4 оголошеній зовнішній змінній y. + z = 5; // Створює нову глобальну змінну z та присвоює їй значення 5. + // (Викидає ReferenceError у строгому режимі.) + }</font></font></font></font> +<font><font><font><font> + b(); </font></font></font><font><font><font>// Створює змінну z в глобальній області видимості.</font></font></font></font><font><font><font><font> + console.log(x, y, z); </font></font></font><font><font><font>// 3 4 5 </font></font></font></font><font><font><font><font> +</font></font></font></font>} +<font><font><font><font> +a(); </font></font></font><font><font><font>// Також викликає b. +console.log(x, z); // 3 5 +console.log(typeof y); // "undefined", бо y є локальною змінною функції a</font></font></font></font></pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col"><font><font><font><font>Специфікація</font></font></font></font></th> + <th scope="col"><font><font><font><font>Статус</font></font></font></font></th> + <th scope="col"><font><font><font><font>Коментар</font></font></font></font></th> + </tr> + <tr> + <td><font><font><font><font>{{SpecName ('ES1')}}</font></font></font></font></td> + <td><font><font><font><font>{{Spec2('ES1')}}</font></font></font></font></td> + <td>Початкова виознака. Запроваджено у JavaScript 1.0.</td> + </tr> + <tr> + <td><font><font><font><font>{{SpecName ('ES5.1', '#sec-12.2', 'var statement')}}</font></font></font></font></td> + <td><font><font><font><font>{{Spec2('ES5.1')}}</font></font></font></font></td> + <td></td> + </tr> + <tr> + <td><font><font><font><font>{{SpecName ('ES6', '#sec-variable-statement', 'variable statement')}}</font></font></font></font></td> + <td><font><font><font><font>{{Spec2('ES6')}}</font></font></font></font></td> + <td></td> + </tr> + <tr> + <td><font><font><font><font>{{SpecName ('ESDraft', '#sec-variable-statement', 'variable statement')}}</font></font></font></font></td> + <td><font><font><font><font>{{Spec2('ESDraft')}}</font></font></font></font></td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Підтримка_веб-переглядачами">Підтримка веб-переглядачами</h2> + +<div class="hidden">Таблиця сумісності на цій сторінці створена зі структурованих даних. Якщо ви хочете долучитися до розробки цих даних, пропонуйте нам свої pull request до репозиторію <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div> + +<p><font><font><font><font>{{Compat ("javascript.statements.var")}}</font></font></font></font></p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Statements/let", "let")}}</li> + <li>{{jsxref("Statements/const", "const")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/statements/while/index.html b/files/uk/web/javascript/reference/statements/while/index.html new file mode 100644 index 0000000000..bddac682fb --- /dev/null +++ b/files/uk/web/javascript/reference/statements/while/index.html @@ -0,0 +1,104 @@ +--- +title: while +slug: Web/JavaScript/Reference/Statements/while +tags: + - JavaScript + - while +translation_of: Web/JavaScript/Reference/Statements/while +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>Оператор <strong>while</strong> створює цикл, який виконує вказану інструкцію, доки перевірочна умова оцінюється як true. Умова оцінюється перед виконанням інструкції.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-while.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">while (<var>condition</var>) + <var>statement</var> +</pre> + +<dl> + <dt><code><var>condition</var></code></dt> + <dd>Вираз, який оцінюється перед кожним проходом циклу. Якщо ця умова оцінюється як true, <code><var>statement</var></code> виконується. Коли умова оцінюється як false, виконання продовжується з інструкції, що розташована після циклу <code>while</code>.</dd> + <dt><code><var>statement</var></code></dt> + <dd>Необов'язкова інструкція, яка виконується, поки умова оцінюється як true. Для виконання кількох інструкцій у циклі, скористайтесь <a href="/uk/docs/JavaScript/Reference/Statements/block">блоком</a> <code>({ ... })</code>, щоб згрупувати ці інструкції.<br> + <br> + Заувага: Використовуйте оператор <code>break</code>, щоб зупинити цикл раніше, ніж умова буде оцінена як false.</dd> +</dl> + +<h2 id="Приклади">Приклади</h2> + +<p>Наступний цикл <code>while</code> виконується, поки <code>n</code> менше трьох.</p> + +<pre class="brush:js">var n = 0; +var x = 0; + +while (n < 3) { + n++; + x += n; +}</pre> + +<p>На кожній ітерації цикл збільшує змінну <code>n</code> на один та додає її до <code>x</code>. Отже, <code>x</code> та <code>n</code> приймають наступні значення:</p> + +<ul> + <li>Після першого проходу: <code>n</code> = 1 та <code>x</code> = 1</li> + <li>Після другого проходу: <code>n</code> = 2 та <code>x</code> = 3</li> + <li>Після третього проходу: <code>n</code> = 3 та <code>x</code> = 6</li> +</ul> + +<p>Після завершення третього проходу умова <code>n</code> < 3 більше не дорівнює true, тому цикл переривається.</p> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Специфікація</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-while-statement', 'while statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-while-statement', 'while statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.6.2', 'while statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-12.6.2', 'while statement')}}</td> + <td>{{Spec2('ES3')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-12.6.1', 'while statement')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Початкове визначення</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.statements.while")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Statements/do...while", "do...while")}}</li> + <li>{{jsxref("Statements/for", "for")}}</li> +</ul> diff --git a/files/uk/web/javascript/reference/statements/with/index.html b/files/uk/web/javascript/reference/statements/with/index.html new file mode 100644 index 0000000000..fca48fda25 --- /dev/null +++ b/files/uk/web/javascript/reference/statements/with/index.html @@ -0,0 +1,107 @@ +--- +title: with +slug: Web/JavaScript/Reference/Statements/with +tags: + - JavaScript + - Оператор + - не рекомендований +translation_of: Web/JavaScript/Reference/Statements/with +--- +<div class="warning">Використання оператора <code>with</code> не рекомендоване, оскільки може бути джерелом заплутаних помилок та проблем із сумісністю. Дивіться абзац "Мінуси для однозначності" у розділі "Опис", щоб дізнатись більше.</div> + +<div>{{jsSidebar("Statements")}}</div> + +<p>Оператор <strong>with</strong> розширює ланцюжок областей видимості для інструкції.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate">with (expression) + <em>statement</em> +</pre> + +<dl> + <dt><code>expression</code></dt> + <dd>Додає наданий вираз до ланцюжка областей видимості, який використовується під час обчислення інструкції. Круглі дужки навколо виразу є обов'язковими.</dd> + <dt><code>statement</code></dt> + <dd>Будь-яка інструкція. Щоб виконати більше однієї інструкції, скористайтесь <a href="/uk/docs/Web/JavaScript/Reference/Statements/block">блоком</a> ({ ... }), щоб згрупувати ці інструкції.</dd> +</dl> + +<h2 id="Опис">Опис</h2> + +<p>JavaScript шукає некваліфіковане ім'я у ланцюжку областей видимості, пов'язаних з контекстом виконання скрипта чи функції, що містить це некваліфіковане ім'я. Оператор 'with' додає наданий об'єкт у початок цього ланцюжка під час обчислення своїх інструкцій. Якщо некваліфіковане ім'я, що використовується у інструкціях, співпадає з властивістю з ланцюжка областей видимості, це ім'я зв'язується з властивістю та об'єктом, що містить цю властивість. Інакше, викидається помилка {{jsxref("ReferenceError")}}.</p> + +<div class="note">Використання <code>with</code> не рекомендоване та заборонене у <a href="/uk/docs/Web/JavaScript/Reference/Strict_mode">строгому режимі </a>ECMAScript 5. Рекомендованою альтернативою є присвоєння об'єкта, чиї властивості вам потрібні, тимчасовій змінній.</div> + +<h3 id="Плюси_та_мінуси_для_швидкодії">Плюси та мінуси для швидкодії</h3> + +<p><strong>Плюси:</strong> Оператор <code>with</code> може допомогти зменшити розмір файлу, скорочуючи необхідність повторювати довгі посилання на об'єкти без погіршення швидкодії. Зміна ланцюжка областей видимості, спричинена використанням 'with', не є затратною для обчислення. Використання 'with' звільнить інтерпретатор від розбору повторюваних посилань на об'єкти. Зауважте, однак, що у багатьох випадках ця перевага досягається використанням тимчасової змінної для зберігання посилання на необхідний об'єкт.</p> + +<p><strong>Мінуси:</strong> Оператор <code>with</code> спочатку спричиняє пошук усіх імен на вказаному об'єкті. Таким чином, усі ідентифікатори, що не є членами вказаного об'єкта, шукатимуться у блоці 'with' набагато повільніше. У випадках, коли швидкодія важлива, 'with' слід використовувати лише у тих блоках коду, які звертаються до членів вказаного об'єкта.</p> + +<h3 id="Мінуси_для_однозначності">Мінуси для однозначності</h3> + +<p><strong>Мінус:</strong> З оператором <code>with</code> стає важко зрозуміти, людині чи компілятору JavaScript, чи буде некваліфіковане ім'я знайдене у ланцюжку областей видимості, і, якщо так, то в якому об'єкті. Отже, у наступному прикладі:</p> + +<pre class="brush: js notranslate">function f(x, o) { + with (o) { + console.log(x); + } +}</pre> + +<p>Лише коли функція <code>f</code> викликана, змінна <code>x</code> або буде знайдена, або ні, а, якщо буде знайдена, то або в <code>o</code>, або (якщо такої властивості не існує) у об'єкті активації <code>f</code>, де <code>x</code> іменує перший формальний аргумент. Якщо ви забудете визначити <code>x</code> у об'єкті, який передаєте другим аргументом, або в разі якоїсь схожої помилки чи плутанини, ви не отримаєте помилку -- лише неочікувані результати.</p> + +<p><strong>Мінус: </strong>Код, що використовує <code>with</code>, може бути несумісним знизу вгору, особливо при використанні з чимось інакшим, ніж простий об'єкт. Розглянемо цей приклад:</p> + +<div> +<pre class="brush:js notranslate">function f(foo, values) { + with (foo) { + console.log(values); + } +} +</pre> + +<p>Якщо ви викличете <code>f([1,2,3], obj)</code> у середовищі ECMAScript 5, то посилання <code>values</code> всередині блоку <code>with</code> поверне <code>obj</code>. Однак, ECMAScript 2015 вводить властивість <code>values</code> у {{jsxref("Array.prototype")}} (таким чином, доступну у кожному масиві). Отже, у середовищі JavaScript, яке підтримує ECMAScript 2015, посилання <code>values</code> всередині блоку <code>with</code> може повернути <code>[1,2,3].values</code>. Однак, конкретно у цьому прикладі {{jsxref("Array.prototype")}} було визначено з <code>values</code> у об'єкті {{jsxref("Symbol.unscopables")}}. Якби не це, ми б побачили, як важко було б його відлагоджувати.</p> +</div> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Використання_with">Використання <code>with</code></h3> + +<p>Наступний оператор <code>with</code> вказує, що об'єкт <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Math"><code>Math</code></a> є об'єктом за замовчуванням. Інструкції, що йдуть після <code>with</code>, посилаються на властивість <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Math/PI"><code>PI</code></a>, а також методи <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Math/cos"><code>cos</code></a> та <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Math/sin"><code>sin</code></a> без зазначення об'єкта. JavaScript припускає, що об'єктом цих посилань є <code>Math</code>.</p> + +<pre class="brush:js notranslate">var a, x, y; +var r = 10; + +with (Math) { + a = PI * r * r; + x = r * cos(PI); + y = r * sin(PI / 2); +}</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-with-statement', 'with statement')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + + + +<p>{{Compat("javascript.statements.with")}}</p> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li>{{jsxref("Statements/block", "block")}}</li> + <li><a href="/uk/docs/Web/JavaScript/Reference/Strict_mode">Строгий режим</a></li> + <li>{{jsxref("Symbol.unscopables")}}</li> + <li>{{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}</li> +</ul> |