【Amazon】人気の商品が日替わりで登場!
毎日お得なタイムセール!商品をみる

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

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

JavaScriptの学習におすすめ書籍
1冊ですべて身につくJavaScript入門講座
総合評価
( 5 )
メリット
  • 誰でも分かるように嚙み砕いて説明してくれる
  • アニメーションの知識が深く学べる
  • 1つのWebサイトを作りながら学べる
楽天ブックス
¥2,794 (2024/05/19 02:42時点 | 楽天市場調べ)
\楽天ポイント5倍セール!/
楽天市場で探す
\ポイント5%還元!/
Yahoo!ショッピングで探す
先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!

全プログラマー必見!
変数名/関数名にもう悩まない!
リーダブルコード
総合評価
( 5 )
メリット
  • 美しいコードが書けるが自然と書けるようになる
  • 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 (2023/07/23 02:48時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場で探す
\ポイント5%還元!/
Yahoo!ショッピングで探す
目次

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はホイスティングされないため、変数を宣言する前に参照するとエラーを表示してくれます。

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を再宣言するとコンソールにエラーが表示されます。

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は一度代入された値を更新することができません。

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はブロックスコープのため、ブロックスコープ内で宣言された変数は外部からの参照を防ぎます。

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

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村 FC2 Blog Ranking

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次