未経験からエンジニアになりたい人必見!
おすすめプログラミングスクール3選!

【JavaScript】var、let、constの違いについて

本記事では、JavaScriptの変数宣言の時に使用するvar、let、constの違いについて解説しています。

JavaScriptの学習におすすめ参考書
改訂新版JavaScript本格入門

参考書が苦手な人はUdemyの動画がおすすめ
ガチで学びたい人のためのJavaScriptメカニズム

作成者 CodeMafia
学習時間 20.5時間
受講者数 16,593人
レビュー (2,383件)

var、let、constの4つの違い

JavaScriptの変数を宣言するにはES5まではvarの一つだけでしたが、ES6になって以降letとconstが新たに追加されました。

var、let、constにはそれぞれ明確な違いがあり、その違いに基づいて変数宣言をする際に使い分けることができます。

それぞれの違いについて下記の表にまとめました。

ホイスティング再宣言再代入スコープ
varあり関数スコープ
letなし×ブロックスコープ
constなし××ブロックスコープ
変数宣言の違い
varは非推奨

現在のWeb開発ではvarは非推奨の書き方になります。

変数宣言をする時にはletまたはconstのどちらかを使うようにしましょう。

ホイスティング

ホイスティング
varあり
letなし
constなし
ホイスティングの違い

1つ目の違いはホイスティングがされるか、されないかです。

ホイスティングとは、変数の宣言をコードが実行する前にメモリ上に記憶しておくことをいいます。

通常変数が宣言される前にその変数を参照しようとすると、その変数はまだ宣言されてないよ!というエラーが返ってきますが、ホイスティングでメモリ上に変数が記憶されているため参照することができてしまいます。

このことからホイスティングは、宣言の巻き上げと呼ばれています。

varはホイスティングされるため、変数を宣言する前に参照することができてしまいますが、letとconstはホイスティングされないため、変数を宣言する前に参照するとエラーを表示してくれます。

JavaScript
console.log(sample1); // -> undefined
console.log(sample2); // -> ReferenceError: Cannot access 'sample2' before initialization
console.log(sample3); // -> ReferenceError: Cannot access 'sample3' before initialization

var sample1 = "サンプル1";
let sample2 = "サンプル2";
const sample3 = "サンプル3";
メモ

エラーが表示されないなら、ホイスティングされてる方が良いのでは?と思う方も多いですが、本来であれば間違った記述をしているのにエラーが返ってこないのは問題です。

また、このホイスティングによりプログラムが意図しない挙動をする原因にもなりかねません。

再宣言

再宣言
var
let×
const×
再宣言の違い

2つ目の違いは変数を再宣言することができるか、できないかです。

varは変数を再宣言することができますが、letとconstを再宣言するとコンソールにエラーが表示されます。

JavaScript
var sample1 = "サンプル1";
let sample2 = "サンプル2";
const sample3 = "サンプル3";

var sample1 = "サンプル1-1"; // -> 再宣言可能
let sample2 = "サンプル2-1"; // -> Uncaught SyntaxError: Identifier 'sample2' has already been declared
const sample3 = "サンプル3-1"; // -> Uncaught SyntaxError: Identifier 'sample3' has already been declared

再代入

再代入
var
let
const×
再代入の違い

3つ目の違いは、一度宣言された変数に対して値を代入することができるか、できないかです。

varとletは一度宣言された変数に対して値を何度も代入することができますが、constは一度代入された値を更新することができません。

JavaScript
var sample1 = "サンプル1";
let sample2 = "サンプル2";
const sample3 = "サンプル3";

sample1 = "サンプル1-1"; // -> 再代入可能
sample2 = "サンプル2-1"; // -> 再代入可能
sample3 = "サンプル3-1"; // -> Uncaught TypeError: Assignment to constant variable.

スコープ

スコープ
var関数スコープ
letブロックスコープ
constブロックスコープ
スコープの違い

4つ目の違いは変数の参照できる範囲を表すスコープです。

varは関数スコープのため、ブロックスコープ内で変数を宣言しても外部から参照することができてしまいます。letとconstはブロックスコープのため、ブロックスコープ内で宣言された変数は外部からの参照を防ぎます。

JavaScript
if (true) {
  var sample1 = "サンプル1";
  let sample2 = "サンプル2";
  const sample3 = "サンプル3";
}

console.log(sample1); // -> サンプル1
console.log(sample2); // -> Uncaught ReferenceError: sample2 is not defined
console.log(sample3); // -> Uncaught ReferenceError: sample3 is not defined
【JavaScript】スコープ(Scope)について理解しよう【JavaScript】スコープ(Scope)について理解しよう