Une instruction de bloc 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.
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 https://github.com/mdn/interactive-examples et à envoyer une pull request !
Syntaxe
Instruction de bloc
{ instruction_1; instruction_2; ... instruction_n; }
Instruction de bloc étiquetée
// ou, avec une étiquette : label { instruction_1; instruction_2; instruction_n; }
instruction_1
,instruction_2
,instruction_n
- Les instructions qu'on souhaite regrouper au sein du bloc.
label
Facultatif- Une étiquette qui permet une identification visuelle de la cible d'une instruction
break
.
Description
Cette instruction est le plus souvent utilisée avec les instructions de contrôle (ex. Instructions/if...else
, Instructions/for
, Instructions/while
). On verra ainsi :
while (x < 10) { x++; }
On peut voir dans cet exemple que cette instruction se termine sans point-virgule.
L'instruction de bloc est souvent appelée instruction composée (compound statement) 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 instruction vide pour ne rien faire là où JavaScript attend une instruction.
Gestion des portées
Avec var
Important : Le bloc n'introduit aucune portée pour les variables déclarées avec var
ou pour les déclarations de fonction. 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 :
var x = 1; { var x = 2; } console.log(x); // affiche 2
Cela affiche 2 dans la console car l'instruction var x
au sein du bloc partage la même portée que l'instruction var x
précédente en dehors du bloc. Un code C ou Java équivalent aurait produit 1.
Avec let
et const
En revanche, les identifiants déclarés avec let
et const
appartiennent à la portée du bloc :
let x = 1; { let x = 2; } console.log(x); // affiche 1
On voit ici que l'instruction x = 2
est limitée à la portée du bloc dans laquelle elle est présente.
On a le même résultat avec const
.
const c = 1; { const c = 2; } console.log(c); // affiche 1, il n'y a pas de SyntaxError
On notera que l'instruction const c = 2
ne lève pas d'exception SyntaxError
car on a une seule déclaration de c
pour ce bloc.
Spécifications
Spécification | État | Commentaires |
---|---|---|
ECMAScript Latest Draft (ECMA-262) La définition de 'instruction de bloc' dans cette spécification. |
Projet | |
ECMAScript 2015 (6th Edition, ECMA-262) La définition de 'instruction de bloc' dans cette spécification. |
Standard | |
ECMAScript 5.1 (ECMA-262) La définition de 'instruction de bloc' dans cette spécification. |
Standard | |
ECMAScript 3rd Edition (ECMA-262) La définition de 'instruction de bloc' dans cette spécification. |
Standard | |
ECMAScript 1st Edition (ECMA-262) La définition de 'instruction de bloc' dans cette spécification. |
Standard | Définition initiale. Implémentée avec JavaScript 1.0. |
Compatibilité des navigateurs
Ordinateur | Mobile | Serveur | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
block | Chrome Support complet 1 | Edge Support complet 12 | Firefox Support complet 1 | IE Support complet 11 | Opera Support complet Oui | Safari Support complet Oui | WebView Android Support complet 1 | Chrome Android Support complet 18 | Firefox Android Support complet 4 | Opera Android Support complet Oui | Safari iOS Support complet Oui | Samsung Internet Android Support complet 1.0 | nodejs Support complet Oui |
Légende
- Support complet
- Support complet