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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
|
---
title: block
slug: Web/JavaScript/Reference/Statements/block
tags:
- Declaração
- JavaScript
- Reference
- Statement
translation_of: Web/JavaScript/Reference/Statements/block
---
<div>{{jsSidebar("Statements")}}</div>
<p>Uma <strong>declaração em bloco </strong>(ou <strong>declaração composta (compound)</strong> em outras linguagens) é usado para agrupar nenhum ou mais declarações. O bloco é delimitado por um par de chaves e pode opcionalmente ser {{jsxref("Statements/label", "nomeado")}}:</p>
<h2 id="Sintaxe">Sintaxe</h2>
<h3 id="Declaração_de_Bloco">Declaração de Bloco</h3>
<pre class="syntaxbox">{
<em>ListaDeDeclarações</em>
}
</pre>
<h3 id="Declaração_de_Bloco_Nomeada">Declaração de Bloco Nomeada</h3>
<pre class="syntaxbox"><em>NomeIdentificador</em>: {
<em>ListaDeDeclarações</em>
}
</pre>
<dl>
<dt><code>ListaDeDeclarações</code></dt>
<dd>Declarações agroupadas com a declaração em bloco.</dd>
<dt><code>NomeIdentificador</code></dt>
<dd>Um {{jsxref("Statements/label", "nome (label)")}} opcional para identificação visual ou um alvo para {{jsxref("Statements/break", "break")}}.</dd>
</dl>
<h2 id="Descrição">Descrição</h2>
<p>A declaração em bloco é frequentemente chamada de <strong>declaração composta (compound)</strong> em outras linguagens. Ela permite que você use multiplas declarações onde o JavaScript espera apenas uma declaração. Combinar declarações em blocos são uma prática comum em JavaScript. O comportamento oposto é possível usando uma <a href="/en-US/docs/Web/JavaScript/Reference/Statements/Empty">declaração vazia</a>, onde você fornece nenhuma declaração, mesmo que uma seja requerida.</p>
<h3 id="Regras_de_Bloqueio_de_Escopo">Regras de Bloqueio de Escopo</h3>
<h4 id="Com_var">Com <code>var</code></h4>
<p>Variáveis declaradas com <code>var</code> <strong>não</strong> possuem bloqueio de escopo. Variáveis introduzidas com um bloco são guardadas no escopo da função que elas estão ou script, e os efeitos de configura-las persistem pelo próprio bloco. Em outras palavras, declarações em bloco não introduzem um escopo. Mesmo blocos "standalone" são sintaxes válidas, você não vai querer usar blocos standalone em JavaScript, porque não fazem o que você pensa que eles fazem, se você pensa que eles fazer coisas como blocos em C ou Java. Por exemplo:</p>
<pre class="brush: js example-bad">var x = 1;
{
var x = 2;
}
console.log(x); // imprime 2
</pre>
<p>Isso loga 2 porque a declaração <code>var x</code> com o bloco está no mesmo escopo que a declaração <code>var x</code> antes do bloco. No C ou Java, o código equivalente iria imprimir 1.</p>
<h4 id="Com_let_e_const">Com <code>let e</code> <code>const</code></h4>
<p>Por contraste, variáveis declaradas com {{jsxref("Statements/let", "let")}} e {{jsxref("Statements/const", "const")}} <strong>tem </strong>escopo bloqueado:</p>
<pre class="brush: js">let x = 1;
{
let x = 2;
}
console.log(x); // imprime 1 1</pre>
<p><code><font face="Open Sans, arial, x-locale-body, sans-serif">O </font>x = 2</code> é limitado ao escopo do bloco em que ele foi definido.</p>
<p>O mesmo true de <code>const</code>:</p>
<pre class="brush: js">const c = 1;
{
const c = 2;
}
console.log(c); // imprime 1 e não invoca uma throw SyntaxError...</pre>
<p>Note que o escope bloqueado de <code>const c = 2</code> <em>não invoca uma</em> <code>SyntaxError: Identifier 'c' has already been declared</code> porque ele foi unicamente declarado no bloco.</p>
<h2 id="Especificações">Especificações</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Especificação</th>
<th scope="col">Situação</th>
<th scope="col">Comentário</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>
<p>Definição inicial. Implementada no JavaScript 1.0.</p>
</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidade_de_navegadores">Compatibilidade de navegadores</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Chrome for Android</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="Veja_também">Veja também</h2>
<ul>
<li>{{jsxref("Statements/while", "while")}}</li>
<li>{{jsxref("Statements/if...else", "if...else")}}</li>
<li>{{jsxref("Statements/let", "let")}}</li>
</ul>
|
