JavaScript

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

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

JavaScriptの学習におすすめ参考書
改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

参考書が苦手な人はUdemyの動画がおすすめ
ガチで学びたい人のためのWEB開発徹底実践(フロントエンド編)

動画情報
作成者CodeMafia
学習時間19.5時間
受講者数28,547人
レビュー (5,025件)
動画の詳細はこちら

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
【JavaScript】スコープ(Scope)について理解しよう本記事では、JavaScriptのスコープについてサンプルコードを載せて分かりやすく解説しています。...

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