block
A block statement is used to group zero or more statements. The block is delimited by a pair of braces ("curly brackets") and contains a list of zero or more statements and declarations.
Try it
Syntax
js
{
StatementList
}
StatementList
-
Statements and declarations grouped within the block statement.
Description
The block statement is often called the compound statement 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, especially when used in association with control flow statements like if...else
and for
. The opposite behavior is possible using an empty statement, where you provide no statement, although one is required.
In addition, combined with block-scoped declarations like let
, const
, and class
, blocks can prevent temporary variables from polluting the global namespace, just like IIFEs do.
Block scoping rules with var or function declaration in non-strict mode
Variables declared with var
or created by function declarations in non-strict mode do not 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. For example:
js
var x = 1;
{
var x = 2;
}
console.log(x); // 2
This logs 2 because the var x
statement within the block is in the same scope as the var x
statement before the block.
In non-strict code, function declarations inside blocks behave strangely. Do not use them.
Block scoping rules with let, const, class, or function declaration in strict mode
By contrast, identifiers declared with let
, const
, and class
do have block scope:
js
let x = 1;
{
let x = 2;
}
console.log(x); // 1
The x = 2
is limited in scope to the block in which it was defined.
The same is true of const
:
js
const c = 1;
{
const c = 2;
}
console.log(c); // 1; does not throw SyntaxError
Note that the block-scoped const c = 2
does not throw a SyntaxError: Identifier 'c' has already been declared
because it can be declared uniquely within the block.
In strict mode, function declarations inside blocks are scoped to that block and are hoisted.
js
"use strict";
{
foo(); // Logs "foo"
function foo() {
console.log("foo");
}
}
foo(); // ReferenceError: foo is not defined
Examples
Using a block statement as the body of a for loop
A for
loop accepts a single statement as its body.
js
for (let i = 0; i < 10; i++) console.log(i);
If you want to use more than one statement in the loop body, you can group them into one block statement:
js
for (let i = 0; i < 10; i++) {
console.log(i);
console.log(i ** 2);
}
Using a block statement to encapsulate data
let
and const
declarations are scoped to the containing block. This allows you to hide data from the global scope without wrapping it in a function.
js
let sector;
{
// These variables are scoped to this block and are not
// accessible after the block
const angle = Math.PI / 3;
const radius = 10;
sector = {
radius,
angle,
area: (angle / 2) * radius ** 2,
perimeter: 2 * radius + angle * radius,
};
}
console.log(sector);
// {
// radius: 10,
// angle: 1.0471975511965976,
// area: 52.35987755982988,
// perimeter: 30.471975511965976
// }
console.log(typeof radius); // "undefined"
Specifications
Specification |
---|
ECMAScript Language Specification # sec-block |
Browser compatibility
BCD tables only load in the browser