---
title: Блок
slug: Web/JavaScript/Reference/Statements/block
tags:
  - JavaScript
  - Инструкция
  - Оператор
  - справочник
translation_of: Web/JavaScript/Reference/Statements/block
original_slug: Web/JavaScript/Reference/Statements/Блок
---
<div>{{jsSidebar("Statements")}}</div>

<p><strong>Блок инструкций </strong>(или <strong>сложная инструкция</strong> в других языках) используется для группировки нуля или более инструкций. Блок отделяется парой фигурных скобок и может опционально быть {{jsxref("Statements/label", "поименован")}}:</p>

<h2 id="Синтаксис">Синтаксис</h2>

<pre class="syntaxbox">[имя:] {
  <em>инструкция_1</em>;
  <em>инструкция_2;</em>
  ...
  <em>инструкция_n;</em>
}
</pre>

<dl>
 <dt><code>инструкция_1</code>, <code>инструкция_2</code>, <code>инструкция_n</code></dt>
 <dd>Инструкции, сгруппированные внутри блока инструкций.</dd>
 <dt><font face="Consolas, Liberation Mono, Courier, monospace">имя</font></dt>
 <dd>Необязательное {{jsxref("Statements/label", "имя")}} для визуальной идентификации или использования как точки выхода для оператора {{jsxref("Statements/break", "break")}}.</dd>
</dl>

<h2 id="Описание">Описание</h2>

<p>Эта инструкция широко используется с операторами управления потоком (н., {{jsxref("Statements/if...else", "if...else")}}, {{jsxref("Statements/for", "for")}}, {{jsxref("Statements/while", "while")}}). Например:</p>

<pre class="brush: js">while (x &lt; 10) {
  x++;
}
</pre>

<p>Обратите внимание, что блок инструкций не заканчивается точкой с запятой.</p>

<p>Блок инструкций часто называется <strong>сложной (составной) инструкцией</strong> в других языках. Он позволяет вам использовать несколько операторов там, где JavaScript ожидает один оператор. Помещение инструкций в блок - это распространённая практика в JavaScript. Противоположное поведение - использование <a href="/en-US/docs/Web/JavaScript/Reference/Statements/Empty">пустого оператора</a> там, где никаких действий не нужно, а оператор требуется.</p>

<h3 id="Правила_области_видимости_блока">Правила области видимости блока</h3>

<h4 id="С_использованием_var">С использованием <code>var</code></h4>

<p>Переменные, объявленные через <code>var</code>, <strong>не</strong> <strong>имеют</strong> блочной области видимости. Переменные, введённые внутри блока, имеют областью видимости содержащую их функцию или скрипт, и последствия записи в них значения распространяются за границы, собственно, блока, в котором они объявлены. Другими словами, блок инструкций не вводит новую область видимости. Хотя "отдельно стоящие" блоки не являются нарушением синтаксиса, не стоит использовать отдельно стоящие блоки в JavaScript, потому что они не делают то, чего вы от них ожидаете, если вы ожидаете, что они будут себя вести аналогично блокам в C или Java. Например:</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> перед блоком. В C или Java подобный код вывел бы 1.</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> (<code>идентификатор 'c' уже был объявлен</code>) потому что она может быть объявлена единожды внутри блока.</p>

<h2 id="Спецификации">Спецификации</h2>

{{Specifications}}

<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2>

<p>{{Compat}}</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>