1 files changed, 295 insertions, 0 deletions
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>