Panda Noir

JavaScript の限界を究めるブログでした。最近はいろんな分野を幅広めに書いてます。

JavaScriptのブロックスコープの作り方

わざわざブロックスコープ作るためにforやifを使う必要がないって知ってましたか?

ブロックスコープの作り方

ブラケット({})を使えば簡単にできます。

// global
{
    // block scope
    let a;
}

検証コード

const a = 1;
{
    const a = 9;
    console.log('in block: ', a);
}
console.log('global: ', a);

再宣言エラーもでなければ、再代入も起こっていません。

どこで使うのか

グローバル汚染を防ぐ即時関数の代わりに使えます。まあそれくらいしか用途ないです。はい。

(function() {
    let local = "hoge"; // local
})();

{
    let local = "hoge"; // local
}

しかし、実は無意識にみなさん使っています。意図せずに使ってしまっています。使ってない人はいません(断言)。

例えば以下のコード。

for (const value of arr) {
    // ...
}

このコードの{}は、実は上の検証コードの{}と同じです。

{}とは何者なのか

{}とは複文を単文にする役割を持ちます。オブジェクトを生成する({foo: 42})機能だけではないのです。

{
    f();
    g();
    h();
} // 複文を単文にする

{
    hoge: 42
} // オブジェクトを生成する

実はif (/* ... */) {単文;単文;} という構文は存在しません。ifやforは if (/* ... */) 単文 という構文しかとりません。 ブロックが複文を単文にしてくれるのでこれで問題ないのです。ちょっと意外だったでしょう?

終わりに

ブロックスコープだけ作りたいときにforやifをわざわざ使う必要ないよ、という話でした。