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
|
---
title: Bloco (block)
slug: Web/JavaScript/Reference/Statements/block
tags:
- Declaração
- Funcionalidade de Linguagem
- JavaScript
- Referencia
translation_of: Web/JavaScript/Reference/Statements/block
original_slug: Web/JavaScript/Reference/Extratos_e_declarações/bloco
---
<div>Bloco {{jsSidebar("Statements")}}</div>
<p>Uma <strong>declaralção bloco </strong>(ou <strong>declaração composto</strong> em outras linguagens) é utilizada para agrupar zero ou mais declarações. O bloco é delimitado por um par de chavetas (“chavetas { }”) e opcionalmente poderá ser {{jsxref("Statements/label", "labelled", "", 1)}}:</p>
<div>{{EmbedInteractiveExample("pages/js/statement-block.html", "taller")}}</div>
<h2 id="Sintaxe">Sintaxe</h2>
<h3 id="Declaração_de_Bloco">Declaração de Bloco</h3>
<pre class="syntaxbox">{
<em>StatementList</em>
}
</pre>
<h3 id="Declaração_de_Bloco_Etiquetado">Declaração de Bloco Etiquetado</h3>
<pre class="syntaxbox"><em>LabelIdentifier</em>: {
<em>StatementList</em>
}
</pre>
<dl>
<dt><code>StatementList</code></dt>
<dd>Statements grouped within the block statement.</dd>
<dt><code>LabelIdentifier</code></dt>
<dd>An optional {{jsxref("Statements/label", "label", "", 1)}} for visual identification or as a target for {{jsxref("Statements/break", "break")}}.</dd>
</dl>
<h2 id="Descrição">Descrição</h2>
<p>The block statement is often called <strong>compound statement</strong> in other languages. It allows you to use multiple statements where JavaScript expects only one statement. Combining statements into blocks is a common practice in JavaScript. The opposite behavior is possible using an <a href="/en-US/docs/Web/JavaScript/Reference/Statements/Empty">empty statement</a>, where you provide no statement, although one is required.</p>
<p>Blocks are commonly used in association with {{jsxref("Statements/if...else", "if...else")}} and {{jsxref("Statements/for", "for")}} statements.</p>
<h3 id="Block_Scoping_Rules">Block Scoping Rules</h3>
<h4 id="With_var_or_function_declaration_in_non-strict_mode">With <code>var</code> or function declaration in non-strict mode</h4>
<p>Variables declared with <code>var</code> or created by <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">function declarations</a> in non-strict mode <strong>do not</strong> have block scope. Variables introduced within a block are scoped to the containing function or script, and the effects of setting them persist beyond the block itself. In other words, block statements do not introduce a scope. For example:</p>
<pre class="brush: js example-bad">var x = 1;
{
var x = 2;
}
console.log(x); // logs 2
</pre>
<p>This logs 2 because the <code>var x</code> statement within the block is in the same scope as the <code>var x</code> statement before the block.</p>
<p>In non-strict code, function declarations inside blocks behave strangely. Do not use them.</p>
<h4 id="With_let_const_or_function_declaration_in_strict_mode">With <code>let</code>, <code>const</code> or function declaration in strict mode</h4>
<p>By contrast, identifiers declared with {{jsxref("Statements/let", "let")}} and {{jsxref("Statements/const", "const")}} <strong>do have </strong>block scope:</p>
<pre class="brush: js">let x = 1;
{
let x = 2;
}
console.log(x); // logs 1</pre>
<p>The <code>x = 2</code> is limited in scope to the block in which it was defined.</p>
<p>The same is true of <code>const</code>:</p>
<pre class="brush: js">const c = 1;
{
const c = 2;
}
console.log(c); // logs 1 and does not throw SyntaxError...</pre>
<p>Note that the block-scoped <code>const c = 2</code> <em>does not</em> throw a <code>SyntaxError: Identifier 'c' has already been declared</code> because it can be declared uniquely within the block.</p>
<p>In <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>, starting with ES2015, functions inside blocks are scoped to that block. Prior to ES2015, block-level functions were forbidden in strict mode.</p>
<h2 id="Especificações">Especificações</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Especificação</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('ESDraft', '#sec-block', 'Block statement')}}</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidade_de_navegador">Compatibilidade de navegador</h2>
<p>{{Compat("javascript.statements.block")}}</p>
<h2 id="Consulte_também">Consulte 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>
|
