【JavaScript】var, let, constの違いは？使い分けはどうする？

こんにちは！CODE CLUB965のKです！

今回はJavaScriptで変数を宣言する際に使う、「var」、「let」、「const」についてその違いと、使い分けについて解説しようと思います。

なんとなく使っているという方もいるかもしれませんが、違いや使い分けを理解していれば、バグの防止にも繋がるので一度読んでみてください。

今回は分かりやすく説明するために、4つの観点から違いと使い分けについて説明しようと思います。

・再宣言
・再代入
・スコープ
・初期値

一つずつ説明していきますね。

再宣言

再宣言とは、一度宣言した変数を、同じ変数名で宣言し直すことを言います。
結論から言うと、「var」は再宣言可能ですが、「let」「const」は再宣言できません。

なので、「let」「const」を使えば再宣言してしまってもエラーになりますが、「var」はエラーにならいので無闇に使うと予期せぬバグが発生する可能性がありますので気をつけましょう。

// var の再宣言
var str = "CodeClub";
var str = "CodeClub965";
console.log(str); // CodeClub965がログ出力される

// let の再宣言
let num1 = 0;
let num1 = 1; // 再宣言不可、この時点でエラー

// const の再宣言
const num2 = 0;
const num2 = 1; // 再宣言不可：この時点でエラー

再代入

再代入とは、言葉のままですが、宣言した変数に値を再度代入することです。
再代入の場合、「var」「let」は再度値が代入されますが、「const」は再代入不可なので代入されずエラーになります。

// var への再代入
var str1 = "AAA";
str1 = "BBB"; 
console.log(str1); // BBBがログ出力される

// let への再代入
let str2 = "AAA";
str2 = "BBB"; 
console.log(str2); // BBBがログ出力される

// const への再代入
var str3 = "AAA";
str3 = "BBB"; // 再代入不可のためエラー

スコープ

スコープとは、実行中のコードから宣言した値に参照できる範囲のことを言います。

{・・・}で囲まれた部分をブロックスコープと言いますが、「var」の場合ブロックスコープが適用されないので、ブロック外でも値の参照が可能です。

逆に、「let」「const」はブロックスコープが適用されるため、ブロックスコープ外からは参照不可となります。

// if 文のなかで宣言し、ブロックスコープ外から参照する
if (1) {
var a = 1;
let b = 2;
const c = 3;
}

// if 文の変数を参照しログ出力する
console.log(a); // 1 がログ出力される
console.log(b); // スコープ外なのでエラー
console.log(c); // スコープ外なのでエラー

初期値

初期値に関しては、「var」「let」は初期値を省略可能です。
逆に「const」は初期値を設定する必要があります。（省略不可）

var a = 1;
var b;  // 初期値の省略が可能

let c = 2;
let d;  // 初期値の省略が可能

// constは、初期値の省略不可
const e = 'EEE';

使い所について

それぞれの違いについてはお分かり頂けたかと思います。
使い所については、簡単に以下にまとめておきます。

・値を変更したくない変数の場合は、constを使う
　→意図しない値の変更を防げる

・再代入が必要な場合は、letを使う
　→「var」と比較して変数の有効範囲を絞れるので、間違って同名の変数宣言をしてしまうようなミスを防げる

・上の条件に当てはまらない場合は、「var」を使う

最後に

いかがでしたでしょうか？

ぜひ「var」、「let」、「const」の違いと使い所を理解した上で今後のプログラミング学習や開発への参考にしてもらえたらと思います！

それでは、また！

Follow me!