JavaScriptのブロックステートメントとは？構文とスコープの仕組みをわかりやすく解説

ブロックステートメント（block statement）は、0個以上の文をひとまとめにグループ化するための構文です。中括弧 { } で囲まれた部分がブロックとなり、複数の処理をひとつのまとまりとして扱えます。JavaScript以外のプログラミング言語では、これと同じものは「複合文（compound statement）」と呼ばれることが一般的です。

基本構文

ブロックステートメントの書き方は非常にシンプルで、次のように中括弧の中に実行したい文を記述します。

{
  // 実行したい文をここに記述
}

ブロックと変数のスコープ

重要なポイントとして、var を使って宣言された変数はブロックスコープを持たないという点が挙げられます。つまり、ブロック内で var で宣言した変数であっても、そのスコープはブロックではなく「それを含む関数全体」になります。

次の例を見てみましょう。

var a = 20;
{
  var b = 40;
}
// ブロックの外からでもアクセスできる
document.write(b); // 40

このコードでは、変数 b はブロックの内側で宣言されていますが、ブロックの外側からでも参照できてしまいます。これは var の宣言がブロックレベルではなく関数レベルで扱われるためです。

さらに、同じ名前の変数をブロック内外で宣言した場合も挙動に注意が必要です。

var a = 20;
{
  var a = 40;
}
// どちらも同じ変数として扱われる
document.write(a); // 40

この例では、ブロック内の var a = 40; は新しい変数を作るのではなく、ブロックの外で宣言済みの a と同一の変数として扱われます。そのため、出力結果は 40 となります。

let・constとの違い

ES6（ECMAScript 2015）以降では、let や const を使うことで、ブロックごとのスコープ（ブロックスコープ）を実現できます。意図しない変数の上書きやスコープ漏れを防ぎたい場合は、var の代わりに let や const を使うのが現代のJavaScriptにおけるベストプラクティスです。