【JavaScript】const, let, varの違いを確実に理解する！

こんにちは！フロントエンド開発をする上で、JavaScriptは欠かせない知識です。

バックエンドばっかりやっていると、ついJavaScriptの使い方を忘れがちでした。今回は、自分の備忘録として超基本知識であるlet, const, varの違いをまとめておこうと思います。

とりあえずletを使っておこうといった、何となくをなくしていきましょう！

constとは

constは上記の表のようになっています。再宣言、再代入できないということは定数と言い換えることができます。

スコープはブロックスコープです。そのため、{ }内で宣言したものは{ }の外では使用することができません。(使用するとエラーが発生する)

constで宣言された変数はブロック外に影響を与えることがないため、気軽に使いやすいです。

letとは

letは再宣言はできないが、再代入が可能です。そのため、繰り返し処理で使われることが多いです。

for (let i = 0; i < 5; i++) {
  console.log(i+"回目");
}

上記のコードを見てください。n回目(nは回数)と5回出力するプログラムです。

0回目
1回目
2回目
3回目
4回目

for文で宣言された変数iを0で初期化し、コンソールに出力します。その後、iに1を加え、それを変数iに代入します。つまり変数iは再代入できる必要があります。

for (const i = 0; i < 5; i++) {
  console.log(i+"回目");
}

上記のコードは変数iをconstで宣言しています。constで宣言された変数は再代入が不可能です。よってこのコードを実行するとエラーになってしまいます。

また、letはconstと同様にブロックスコープであるため、ブロック外に影響することはありません。しかし、再代入可能である点からブロック内における意図しない代入に注意する必要があります。

varとは

varは影響範囲の最も大きい変数です。再代入可能であることからletと同様に繰り返し処理で使うことが可能です。

for(var i=0;i < 5;i++){
    console.log(i+"回目");
}

しかし、影響範囲が広すぎるため意図しない動作になってしまうかもしれません。

var i = "これを出力したい"

for(var i=0;i < 5;i++){

}

console.log(i)

例えば、文字列”これを出力したい“をコンソールに出力するプログラムを作成したいとします。そこで上記コードを作成しました。出力は以下の通りです。

5

5と出力されてしまいました。このコードであればバグの原因に気が付けると思いますが、コードが100行になった場合はどうでしょうか。誤って出力したい変数名と同じ名前で再宣言してしまっていることにすぐ気づけるでしょうか。

varは再宣言が可能である分、大規模な開発時には意図しない再宣言や再代入が発生してしまってバグの原因となる可能性が高いです。そのため、varの使い所には注意する必要があります。

まとめ

今回はconst、let、varの違いについて解説しました。

基本的には影響範囲の小さいconstを使うようにすると安全な開発ができます。letは繰り返し処理が必要なときに使用しましょう。

変数の有効範囲が狭いほど、バグが発生した際に確認しなくてはいけないコードの行数が減ります。これは開発効率をあげるだけでなく、保守性を高めることにも繋がります。

私も保守性を意識できるような開発を心がけていきたいです。