読者です 読者をやめる 読者になる 読者になる

なっく日報

技術やら生活やらのメモ

JSのswitch文のcaseにブロックスコープを付ける

eslint.org

ESLint v1.9出ましたね。

このバージョンで追加されたno-case-declarationsルールで、へ~と思ったことがあったのでメモ。

no-case-declarationsルールとは?

Rule no-case-declarations - ESLint - Pluggable JavaScript linter

にドキュメントがありますが、

↓のコードだと、switchブロック内でxとかyが見えてしまうので、警告してくれると。

switch (foo) {
    case 1:
        let x = 1;
        break;
    case 2:
        const y = 2;
        break;
    case 3:
        function f() {}
        break;
    default:
        class C {}
}

↓のように書くべきと。

switch (foo) {
    case 1: {
        let x = 1;
        break;
    }
    case 2: {
        const y = 2;
        break;
    }
    case 3: {
        function f() {}
        break;
    }
    default: {
        class C {}
    }
}

ちょっと待った!

↓みたいにcaseのところで、ブロックスコープを定義するという発想がありませんでした。

switch (foo) {
    case 1: {
        let x = 1;
        break;
    }
    default: {
    }
}

そもそも、文の途中で{}で囲えばどこでもブロックスコープが定義できるのですね(そんな予感はしてましたが、やったことありませんでした)

const a = 1;
{
  const a = 2;
  console.log(a); // 2
}
console.log(a); // 1

まとめ

特に、ReactでFlux系のStoreでActionの分岐を書く時とかに、このswitchの書き方は使えそうです。
今後は使える場面では使っていこうと思います。