JavaScriptの変数についてまとめました。
変数の定義にはvar、let、constの3つのキーワードを使うことができる。
var
varはES6以前からある変数を定義するためのキーワード。
var a = 0 console.log(a) // 0 // 再代入ができてしまう a = 1 console.log(a) // 再宣言ができてしまう var a = 'local' console.log(a) // local
varは再代入も再宣言もできてしまうため、letもしくはconstを使うようにする。
また、varを使って変数を定義する前に変数を参照すると、undefinedとなり、エラーにはならない。これを宣言の巻き上げという。
// 変数を定義する前に参照 console.log(a) // undefined var a = 0
let
letはES6から追加された変数を定義するためのキーワード。
letは再代入はできるが、再宣言ができない。
var a = 0 console.log(a) // 0 // 再代入は可能 a = 1 console.log(a); // 1 // 再宣言はできない let a = 'a' // Uncaught SyntaxError: Identifier 'a' has already been declared
letを使って定義した変数を定義する前に呼び出そうとするとvarとは異なりエラーになる。
console.log(a) // Uncaught ReferenceError: Cannot access 'a' before initialization let a = 0
const
constはES6から追加された変数を定義するためのキーワード。
constは再代入も再宣言もできない。
const a = 0 console.log(a) // 再代入ができない a = 1 console.log(a) // Uncaught TypeError: Assignment to constant variable. // 再宣言もできない const a = 'local' // Uncaught SyntaxError: Identifier 'a' has already been declared
再代入はできないがconstを使って定義した変数に代入したオブジェクトの構造を変えることはできる。
const obj = {} console.log(obj) // {} // プロパティを追加してもエラーにならない obj.name = 'obj' console.log(obj) // {name: 'obj'}
このためconstは定数ではなく、再代入できない変数を定義するものである。
let同様、constを使って定義した変数を定義する前に呼び出そうとするとエラーになる。
console.log(a) // Uncaught ReferenceError: Cannot access 'a' before initialization const a = 0
スコープの違い
var、let、const全て関数スコープは適用される。そのため関数の中で定義された変数を関数の外から使うことはできない。
function hello() { var a = 0 let b = 0 const c = 0 } console.log(a) // Uncaught ReferenceError: a is not defined console.log(b) // Uncaught ReferenceError: b is not defined console.log(c) // Uncaught ReferenceError: c is not defined
しかしlet、constはブロックスコープが適用されるが、varは適用されない。そのためブロックスコープの中でvarを使って定義した変数は使えるようになってしまう。
{ var a = 0 let b = 0 const c = 0 } console.log(a) // 0 console.log(b) // Uncaught ReferenceError: b is not defined console.log(c) // Uncaught ReferenceError: c is not defined
まとめ
- ループのために使うような代入する値が変わる変数は
letを使い、それ以外はconstを使う
