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