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
|
---
title: bloc
slug: Web/JavaScript/Reference/Statements/block
tags:
- Instruction
- JavaScript
- Reference
translation_of: Web/JavaScript/Reference/Statements/block
original_slug: Web/JavaScript/Reference/Instructions/bloc
---
<div>{{jsSidebar("Statements")}}</div>
<p>Une <strong>instruction de bloc</strong> est utilisée afin de grouper zéro ou plusieurs instructions. Le bloc est délimité par une paire d'accolades. On peut éventuellement « étiqueter » un bloc avec un label.</p>
<div>{{EmbedInteractiveExample("pages/js/statement-block.html")}}</div>
<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>
<h2 id="Syntaxe">Syntaxe</h2>
<h3 id="Instruction_de_bloc">Instruction de bloc</h3>
<pre class="brush: js">{
<em><var>instruction_1</var></em>;
<em><var>instruction_2</var></em>;
...
<em><var>instruction_n</var></em>;
}
</pre>
<h3 id="Instruction_de_bloc_étiquetée">Instruction de bloc étiquetée</h3>
<pre class="brush: js">// ou, avec une étiquette :
label {
instruction_1;
instruction_2;
instruction_n;
}
</pre>
<dl>
<dt><code>instruction_1</code>, <code>instruction_2</code>, <code>instruction_n</code></dt>
<dd>Les instructions qu'on souhaite regrouper au sein du bloc.</dd>
<dt><code>label</code> {{optional_inline}}</dt>
<dd>Une <a href="/fr/docs/Web/JavaScript/Reference/Instructions/label">étiquette</a> qui permet une identification visuelle de la cible d'une instruction <code><a href="/fr/docs/Web/JavaScript/Reference/Instructions/break">break</a></code>.</dd>
</dl>
<h2 id="Description">Description</h2>
<p>Cette instruction est le plus souvent utilisée avec les instructions de contrôle (ex. {{jsxref("Instructions/if...else")}}, {{jsxref("Instructions/for")}}, {{jsxref("Instructions/while")}}). On verra ainsi :</p>
<pre class="brush: js">while (x < 10) {
x++;
}
</pre>
<p>On peut voir dans cet exemple que cette instruction se termine sans point-virgule.</p>
<p>L'instruction de bloc est souvent appelée <strong>instruction composée (<em>compound statement</em>)</strong> dans d'autres langages. En effet, elle permet d'utiliser plusieurs instructions là où JavaScript n'attend qu'une instruction. C'est une pratique courante que de combiner plusieurs instructions grâce aux blocs. À l'opposé, on peut utiliser une {{jsxref("Instructions/vide","instruction vide","",1)}} pour ne rien faire là où JavaScript attend une instruction.</p>
<h3 id="Gestion_des_portées">Gestion des portées</h3>
<h4 id="Avec_var">Avec <code>var</code></h4>
<p><strong>Important </strong>: Le bloc n'introduit <strong>aucune portée pour les variables déclarées avec <code>var</code></strong> ou pour <a href="/fr/docs/Web/JavaScript/Reference/Instructions/function">les déclarations de fonction</a>. Les variables introduites dans un bloc font partie de la portée de la fonction ou du script, elles persisteront donc en dehors du bloc. Autrement dit, aucune portée n'est introduite par les blocs. Bien qu'il soit tout à fait possible d'utiliser des blocs hors de tout contexte, il est fortement déconseillé de coder de cette façon. En effet, les blocs ne se comportent pas comme d'autres langages tels que C ou Java et il pourrait être surprenant de lire un tel code. Par exemple :</p>
<pre class="brush: js example-bad">var x = 1;
{
var x = 2;
}
console.log(x); // affiche 2
</pre>
<p>Cela affiche 2 dans la console car l'instruction <code>var x</code> au sein du bloc partage la même portée que l'instruction <code>var x</code> précédente en dehors du bloc. Un code C ou Java équivalent aurait produit 1.</p>
<h4 id="Avec_let_et_const">Avec <code>let</code> et <code>const</code></h4>
<p>En revanche, les identifiants déclarés avec <code>let</code> et <code>const</code> appartiennent à la portée du bloc : </p>
<pre class="brush: js">let x = 1;
{
let x = 2;
}
console.log(x); // affiche 1
</pre>
<p>On voit ici que l'instruction <code>x = 2</code> est limitée à la portée du bloc dans laquelle elle est présente.</p>
<p>On a le même résultat avec <code>const</code>.</p>
<pre class="brush: js">const c = 1;
{
const c = 2;
}
console.log(c); // affiche 1, il n'y a pas de SyntaxError
</pre>
<p>On notera que l'instruction <code>const c = 2</code> ne lève pas d'exception <code>SyntaxError</code> car on a une seule déclaration de <code>c</code> pour ce bloc.</p>
<h2 id="Spécifications">Spécifications</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">Spécification</th>
<th scope="col">État</th>
<th scope="col">Commentaires</th>
</tr>
<tr>
<td>{{SpecName('ESDraft', '#sec-block', 'instruction de bloc')}}</td>
<td>{{Spec2('ESDraft')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('ES6', '#sec-block', 'instruction de bloc')}}</td>
<td>{{Spec2('ES6')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('ES5.1', '#sec-12.1', 'instruction de bloc')}}</td>
<td>{{Spec2('ES5.1')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('ES3', '#sec-12.1', 'instruction de bloc')}}</td>
<td>{{Spec2('ES3')}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('ES1', '#sec-12.1', 'instruction de bloc')}}</td>
<td>{{Spec2('ES1')}}</td>
<td>Définition initiale. Implémentée avec JavaScript 1.0.</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>
<p>{{Compat("javascript.statements.block")}}</p>
<h2 id="Voir_aussi">Voir aussi</h2>
<ul>
<li>{{jsxref("Instructions/while", "while")}}</li>
<li>{{jsxref("Instructions/if...else", "if...else")}}</li>
<li>{{jsxref("Instructions/let", "let")}}</li>
</ul>
|
