JavaScriptでconstを意地でも使いたい方へ。
try-catch等でもconstを使って代入を行う方法です。
前提条件
ES2015（のconst）が使用できる環境。
なお、IE11でもconstは使用できるみたいです！わーい！
ただしArrow functionsは使用できないので、function文を使用してください。ひどいよー……。
まえがき
constはES2015で追加された構文で、JavaScriptに定数という概念をもたらしました。
再代入を禁止したいので、できるだけconstを使いたいですよね。
しかし、問題となるのがtry-catch等での代入処理。
const letではブロックスコープとなるため、try文の中で変数宣言をすると、ブロックの外では変数の参照ができません。
そういった場面でもconstを使いたいと人向けの内容です。
ビフォーアフター
Before
let fileContent;
try {
fileContent = fs.readFileSync("/path/to/file");
} catch (e) {
fileContent = "default value";
}
After
const fileContent = (() => {
try {
return fs.readFileSync("/path/to/file");
} catch (e) {
return "default value";
}
})();
解説
try-catchを即時関数で包んであげているだけです。
記述の仕方によっては上記のように行数が増えますが、constを使えるメリットと比べると些細なものですね。
その他
switch-case文
returnを使用するため、breakを書く必要がなくなります。
そのため、Scalaのパターンマッチライクな記述になり、かなり見通しが良くなります。
before
let num = 0;
switch (flag) {
case "A":
num = 1;
break;
case "B":
num = 2;
break;
case "C":
num = 3;
break;
}
after
const num = (() => {
switch (flag) {
case "A": return 1;
case "B": return 2;
case "C": return 3;
default : return 0;
}
})();
if文
三項演算子よりも見やすくなる……わけないですね。
今回の技を使わず、三項演算子を使ってください。
フレンズによって得意なこと違うから！
bad
const bool = (() => {
if (str === "str") {
return "true";
} else {
return "false";
}
})();
good
const bool = (str === "str")
? "true"
: "false";
IE11
前述の通り、IE11ではArrow functionsが使えないため、IE向けにトランスパイルするか、function式を使用してください。
IE11
const element = (function () {
try {
return document.getElementById("id");
} catch (e) {
return document.body;
}
})();
あとがき
軽くググっても出てこなかったので今回書いてみました。
これを使えば、ほとんどconstでかけると思います。
もっといい方法などありましたら教えていただけると幸いです！
参考
- Can I use
- const https://caniuse.com/#feat=const
- Arrow functions https://caniuse.com/#feat=arrow-functions
![](data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="204" height="219"><rect fill-opacity="0"/></svg>)
コメント
@kgtkr1
try/switch/ifなどが式になればな…と思う