ブロック

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

ブロック文 は 0 個以上の文をグループ化するのに使われます。ブロックは中括弧(「波括弧」)の組で区切られ、0 個以上の文または宣言のリストを含みます。

試してみましょう

var x = 1;
let y = 1;

if (true) {
  var x = 2;
  let y = 2;
}

console.log(x);
// Expected output: 2

console.log(y);
// Expected output: 1

構文

js
{
  StatementList
}
StatementList

ブロック文の中でグループ化される文や宣言です。

解説

ブロック文は、他の言語ではよく複合文と呼ばれます。これは複数の文を JavaScript からみて 1 つの文にまとめるために使用します。ブロック内に複数の文をまとめることは、JavaScript では、特に if...else and for などのフロー制御文との関連で良く行われることです。反対の動作は空文を使用することで実現でき、これは 1 つの文が必要な場所に文を置かずにおくことができます。

さらに、letconstclass などのブロックスコープ宣言と組み合わせることで、IIFE のように、一時変数がグローバル名前空間を汚染するのを防ぐことができます。

非厳格モード時の var または関数定義のブロックスコープの規則

非厳格モードでは、var の宣言や、関数宣言で作成された変数は、ブロックスコープを持ちません。ブロック内で導入された変数は、それを含んでいる関数またはスクリプトがスコープとなり、変数を設定した効果は、そのブロック自体を超えて持続します。言い換えれば、ブロック文はスコープを作成しません。例えば、

js
var x = 1;
{
  var x = 2;
}
console.log(x); // 2

これが 2 を出力するのは、ブロックの中の var x 文がブロックより前と同じスコープを持つからです。

非厳格モードでは、ブロック内の関数定義は奇妙な動きをします。使用しないでください。

厳格モード時の let、const、関数宣言のブロックスコープの規則

対照的に、letconstclass で宣言された識別子は、ブロックスコープを持ちます。

js
let x = 1;
{
  let x = 2;
}
console.log(x); // 1

この x = 2 は、それが定義されたブロックのスコープに制限されています。

同じことが const にも言えます。

js
const c = 1;
{
  const c = 2;
}
console.log(c); // 1 が出力され、SyntaxError は発生しない...

ブロックスコープを持つ const c = 2 は、ブロック内で固有に宣言することができるため、SyntaxError: Identifier 'c' has already been declared を発生させないことに注意してください。

厳格モードでは、ブロック内の関数宣言はそのブロックのスコープを持ち、巻き上げられます。

js
"use strict";

{
  foo(); // "foo" と出力
  function foo() {
    console.log("foo");
  }
}

foo(); // ReferenceError: foo is not defined

for ループの本体としてブロック文を使用する

for ループは本体として単一の文を受け入れます。

js
for (let i = 0; i < 10; i++) console.log(i);

ループ本体で複数の文を使用したい場合は、1 つのブロック文にまとめることができます。

js
for (let i = 0; i < 10; i++) {
  console.log(i);
  console.log(i ** 2);
}

ブロック文を使用したデータのカプセル化

letconst の宣言は、それを含むブロックのスコープになります。これにより、データを関数で包むことなく、グローバルスコープから隠すことができます。

js
let sector;
{
  // これらの変数はこのブロックのスコープであり、
  // ブロックの後でアクセスすることはできません。
  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"

仕様書

Specification
ECMAScript® 2025 Language Specification
# sec-block

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
block

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

関連情報