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

ESLint v1.9で追加されたno-case-declarationsルールで、へ～と思ったことがあったのでメモ。

no-case-declarationsルールとは？

no-case-declarations - Rules - 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の書き方は使えそうです。
今後は使える場面では使っていこうと思います。