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.

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/forInstructions/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. 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.

Avec function

Les déclarations de fonction sont également limitées au bloc :

toto('extérieur'); // TypeError: toto is not a function
{
  function toto(emplacement) {
    console.log('toto est appelé depuis ' + emplacement);
  }
  toto('intérieur'); // Cet appel fonctionne
}

Pour préciser la chose, le bloc empêche que la déclaration de fonction soit remontée avant le bloc. La fonction se comporte comme si elle était définie dans une expression de fonction et c'est uniquement la déclaration implicite de la variable qui est remontée plus haut :

toto; // undefined
{
  function toto(emplacement) {
    console.log('toto est appelé depuis ' + emplacement);
  }
  toto('intérieur'); // Cet appel fonctionne
}

Ainsi, si on appelle la fonction toto après le bloc, il n'y aura pas d'erreur :

{
  function toto(emplacement) {
    console.log('toto est appelé depuis ' + emplacement);
  }
  toto('intérieur'); // Cet appel fonctionne
}
toto('extérieur'); // Cet appel fonctionne

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

Update compatibility data on GitHub
OrdinateurMobileServeur
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung InternetNode.js
Support simpleChrome Support complet OuiEdge Support complet OuiFirefox Support complet 1IE Support complet OuiOpera Support complet OuiSafari Support complet OuiWebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android Support complet Ouinodejs Support complet Oui

Légende

Support complet  
Support complet

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, teoli, matteodelabre
Dernière mise à jour par : SphinxKnight,