JavaScript
 

JavaScript の基礎知識( const, let, var )

       

const, let, var とは?

JavaScript の定数・変数を宣言するときのキーワードです。
構文は次のようになります。

const 定数名 = 値;
let 変数名 [= 値];
var 変数名 [= 値];

具体的には次のように使います。

const name = 'Taro'; 
let total = 10;
var year = 2020;  

const, let, var の違いとは?

const

const は、定数(読み取り専用)で、再代入することができません。
次のようなコードの場合、エラーになります。

const name = 'Taro';
name = 'Hanako'; // 再代入しようとしてエラーが発生する : Uncaught TypeError: Assignment to constant variable.  

また、const は変数宣言のときに初期値を代入する必要があるため、下記のような書き方の場合もエラーになります。

const name; // 初期値を代入していないためエラーが発生する : Uncaught SyntaxError: Missing initializer in const declaration

let

let は const と異なり、値を再代入できる変数になります。
次のように再代入することが可能です。

let total = 10;
total = 11;   

また、let は変数宣言のときに初期値を代入しなくても、const と異なりエラーになりません。
変数宣言のときに初期値を代入しなかった場合の値は undefined になります。

let total;
console.log(total); // undefined がコンソールに出力される

var

var は let と似ていて、変数宣言のキーワードとして使用できます。
ただ、var にはいくつか問題点があり、その問題点を解消するために const, let が作られたという背景もあります。
そのため、今後は var を使う場面は少なくなっていくと思います。
var の問題点としては、主に次の 2点です。

問題点① 同じ変数名で宣言が可能

同じ変数名で宣言ができてしまうと、変数を二重で定義してしまう恐れがあり、不具合の原因になりかねません。

// var ではエラーにならない
var a = 1;
var a = 2; 

// let ではエラーになる
let b = 1;
let b = 2; // すでに宣言しているのでエラーが発生する : Identifier 'b' has already been declared

問題点② 変数の巻き上げが起こる

変数の巻き上げの例の 1つとして以下のような挙動があります。

// var の挙動
console.log(c); // undefined ( ReferenceError ではない) がコンソールに出力される
var c = 3;
console.log(x);  // 3 がコンソールに出力される

// let ではエラーになる
console.log(d); // 変数を宣言する前にコンソール出力をしようとしてエラーが発生する : Cannot access 'year' before initialization
let d = 4;


上記のようになるのは、var を使用して宣言された変数は、コードが実行されるよりも前に生成されるという理由です。
そのような理由から、 var は意図しない挙動で不具合を発生させてしまう恐れがあります。

参考サイト

MDN web docs / const
MDN web docs / let
MDN web docs / var
JavaScript Primer / 変数と宣言

 
  • このエントリーをはてなブックマークに追加