【初心者向け】let・const・varの違いと使い分け（JavaScript）

JavaScript
2022.03.24

JavaScriptで変数を扱うときに出てくる「let・const・var」。
それぞれの違いが分かりづらく、「結局どれを使えばいいの？」と迷う人も多いです。

この記事では、
let・const・varの違いと使い分けを初心者向けに分かりやすく解説します。

結論

・基本はconstを使う
・再代入が必要な場合だけlet
・varは使わない（古い仕様のため）

let・const・varの違い（比較表）

一番重要なポイントをまとめると以下の通りです。

項目letconstvar
再代入○×○
再宣言××○
スコープブロックブロック関数
推奨度◎◎×

👉constかletを使えばOK、varは基本使わないです。

let・const・varの主な違いは「スコープ」と「再代入の可否」です。

letとconstはブロックスコープで安全に使えるのに対し、varは関数スコープのため、意図しない範囲で変数が参照される可能性があります。

また、constは再代入できず、letは再代入可能、varは再代入・再宣言ともに可能という違いがあります。

そのため、現在のJavaScriptではconstとletを使い分けるのが一般的です。

結局どれを使えばいい？

迷った場合は、まずconstを使えば問題ありません。

値をあとから変更する必要がある場合のみ、letを使います。

varは古い仕様の変数宣言で、意図しない動作の原因になることがあるため、現在のJavaScriptでは基本的に使いません。

つまり、使い分けは次のように考えると分かりやすいです。

・基本はconst
・値を変更する場合だけlet
・varは使わない

これで比較表のあとに自然につながります。

constとは（基本はこれを使う）

constは再代入ができない変数宣言です。

const dogName = "Pochi";

一度代入した値を変更できないため、意図しない上書きを防ぐことができます。

そのため、現在のJavaScriptでは基本的にconstを使うのが一般的です。

迷った場合は、まずconstを選べば問題ありません。

実務でもほとんどの場合はconstが使われています。

代入できる値は下記の4種類

  • 数字
  • 文字列
  • 配列
  • オブジェクト

値の代入方法

//数字  そのまま
変数名 = 123

//文字列  ダブルクォーテーションで囲う
変数名 = "柴犬"

//配列 
coming soon

//オブジェクト
coming soon

letとは（再代入が必要なとき）

letは再代入が可能な変数宣言です。

let dogCount = 1;
    dogCount = 2;

犬の数のように、値が変化する場合に使用します。

ループ処理やカウント処理など、値が変わるケースで使うのが適切です。

constで定義できない場合のみ、letを使うのが基本です。

varとは（現在は非推奨）

varは古い仕様の変数宣言です。

var dogName = "Pochi";

再宣言が可能であり、同じ変数名を使ってもエラーになりません。

var dogName = "Pochi";
var dogName = "Hachi"; // エラーにならず上書きされる

このように意図せず値が変更されてしまう可能性があるため、バグの原因になりやすい特徴があります。

また、スコープの仕様も分かりづらく、現在のJavaScriptでは推奨されていません。

そのため、varは使わず、constまたはletを使うのが一般的です。

varはなぜ使わないのか？

varは再宣言が可能なため、意図せず変数が上書きされてしまうリスクがあります。

var dogName = "Pochi";
var dogName = "Hachi"; // エラーにならず上書きされる

また、varは関数スコープのため、ブロック内で宣言しても外から参照できてしまいます。

if (true) {
  var dogBreed = "Shiba";
}
console.log(dogBreed); // "Shiba" と表示される

このような仕様はバグの原因になりやすく、意図しない動作につながることがあります。

そのため、現在のJavaScriptではvarは使用せず、constやletを使うのが一般的です。

constなのに値を変更できるのはなぜ？

constは「再代入」が禁止されているだけであり、オブジェクトや配列の中身を変更することは可能です。

const dog = { name: "Pochi" };
dog.name = "Hachi"; // OK

このように、オブジェクトの中の値は変更できます。

一方で、変数そのものを別の値に置き換えることはできません。

const dog = { name: "Pochi" };
dog = { name: "Hachi" }; // エラー

これは、constが「変数の参照を固定する」仕組みだからです。

そのため、オブジェクトや配列を扱う場合でも基本的にはconstを使用し、必要に応じて中身を変更する形が一般的です。

まとめ

・基本はconstを使う
・再代入が必要な場合のみletを使う
・varは使わない（非推奨）

迷った場合はconstを選べば問題ありません。

おまけ 変数(定数)とは

変数や定数の概念についてはJavaScriptだけではなく他のプログラミング言語と同じものになるのでこちらで覚えておくとほかの言語を学習する際にも応用が利きますのでぜひしっかりと身につけましょう。

変数(定数)とは文字列や数値などのデータに固有の名前をつけることで、繰り返し利用できるようにする機能のことです。

よく変数の説明の際に用いられる例としては箱からの出し入れというものがあります。

例えば、犬という名前の変数(箱)に下記の画像の通りに柴犬を入れたとします。

すると、いつでも犬という名前の変数を呼び出すだけで箱にしまわれてしまった柴犬を呼び出すことができます。

上記を例に変数宣言で覚えておきたい用語は以下の通りです

用語
  • 箱　　⇒　　変数
  • 柴犬　　⇒　　値
  • 柴犬を箱にしまうこと　　⇒　　代入または格納
  • 最初に格納される値(柴犬)　⇒　　初期値
  • 新しく別の値(別の犬)を格納する　⇒　　再代入

また、変数を定義するには『この文字列は変数です』というのをJavaScript側に理解させる必要があるため、特定のキーワードを使用した宣言を行う必要があります.

タイトルとURLをコピーしました