1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
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>
|
