【JavaScript】var/const/letの使い分け

先日会社の先輩から、JavaScriptの変数宣言で混同していることをご指摘頂いたので、せっかくの機会なのでQiitaに初投稿してみます。

具体的には定数で欠ける箇所を変数で書いてしまっており、業務に支障が出ることもあるそうなので、理由もセットで解説していきます。

var/const/letとはそもそもなんなのか

varについて

JavaScriptの変数宣言はもともとvarのみでした。そのため古いブラウザの場合でもエラーを出さずに動きます。

しかし今では、定数の場合はconst、変数の場合はletと役割ごとに使い分けられているので特別にvarを使う必要はなくなりました。

定数constについて

定数constの特徴は、再代入をするとエラーになるという点です。

つまりconstを使用する場面としては、再代入が不要な場合、または再代入されたくない場合になります

変数letについて

反対に変数letの特徴は、再代入が可能という点です。

ということはもちろん変数letを使用する場面は、再代入が必要な場合になるわけです。

再代入とは

定数constと変数letは、再代入があるかないかで使い分けることができることはわかりました。

ではそもそも再代入とはなんなのか？

ここがわからないと使い分けられないので、簡単な例をお見せしながら解説していきます。

再代入なし

再代入なしの例として、税込価格を計算するプログラムを用意しました。

const cost = 1000;
const tax = 1 / 10
const price = cost + (cost * tax);
const message =　`原価${cost}円の商品の税込価格は${price}円です。`

console.log(message);

見ての通り一度costやtaxを決めてしまえばそれらが書き換わることありません。こういう場合は定数constを使うわけです。

再代入あり

再代入ありの例として2桁の自然数を並べて表示するプログラムを用意しました。

for(let i = 0; i < 100; i++){
    console.log(i);
}

for文のループが実行されるたびにiが書き換わっています。

このように繰り返しが出てきて、値が何度も書き換わる場合は変数letを使います。

例

ではループ中の変数宣言はどのようにすれば良いのでしょうか。

簡単な例として3の倍数を並べて表示するプログラムを用意しました。

for(let i = 0; i < 100; i++){ 
    ??? value = i * 3
    console.log(i);
}

valueは値が変わるので一見変数letを使うように思えますが、

再代入はされていません。valueはもともとのi * 3という定義で書き換わっていません。

よって???にはいる答えは定数のconstです。

つまり繰り返しのfor文が出てきても、変数宣言をした後にそれを書き換えるようなプログラムでない限り定数constを使うということです。

【番外編】なぜconst/letを使い分ける？

ここまで読んで下さった方の中にはもしかしたら、「とりあえず全部再代入OKのletを使っておけばいいじゃん」と思った方もいるかと思います。

確かに一人で開発している場合は特に問題はないかもしれません。

しかし複数人での開発で他の人がみた時仮に、定数でいいところを変数で書いていたら、この後再代入されるのかと誤解を招き作業効率が悪くなります。

自分も先輩からこの話を聞いた時はなるほどそういうことかと思い、この記事を書くきっかけになりました。

まとめ

上のような話をした後に何ですが、Web制作の分野ではほとんど変数letが必要なことはないかと思います。

自分もWeb制作をやっているので、今回の記事の内容が難しいと感じた方は、とりあえずconstでも良いかと思います。

最後にまとめておくと

・基本的にvarは使わない
・const/letは再代入があるかないかで使い分ける
・再代入とは宣言後に値を書き換えること

参考にした記事：https://sbfl.net/blog/2016/07/14/javascript-var-let-const/

この記事が少しでも役になったという方は、TwitterでもWeb制作について発信しているので、フォローしていただけると嬉しいです。