path: root/files/uk/web/javascript/reference/statements/switch/index.html

---
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>