JavaScriptにおける変数宣言 var let const の違い

JavaScriptには変数を宣言する方法には、var let constの3つがあります。

違いはスコープ、再宣言の可不可、再代入の可不可です。違いをまとめると下の表のようになります。

これ以降コードと共に詳しく解説していきます。

varとは

varは関数スコープを持ち、再宣言可能、再代入可能な変数宣言の方法です。まずは再宣言と再代入についてです。

下記コードのように、再代入(2行目)、再宣言(3行目)ができます。

var a = 10;
a = 20; // ok
var a = 30; // ok

次に関数スコープについてです。関数スコープとは変数の有効な範囲が関数ブロックであるということです。下のコードを見てください。

変数aは関数ブロック内で有効なので、関数の外からアクセスしようとするとエラーになります。

function f() { 
  var a = 10; 
} 
console.log(a); // error

一方、if文のブロック内で宣言された変数は、スコープがブロックの外にまで及ぶので、ブロック外からでもアクセスすることが出来ます。

C++など、ほかのプログラミング言語とは異なり少し違和感があります。

if (true) {
  var a = 10;
}
console.log(a); // 10

letとは

letもvarと同様、変数を宣言する方法です。異なるのは再宣言が不可、ブロックスコープだということです。

再宣言不可なので3行目はエラーにまります。

let a = 10;
a = 20; // 再代入可能
let a = 10;// error 再宣言不可

次にスコープについてです。ほかのプログラミング言語と同様、ブロックスコープです。つまり、あるブロック内で宣言された変数の

有効範囲が、そのブロック内だけということです。よって、ブロックの外からアクセスしようとしている4行目はエラーになります。

function f() {
  let a = 10;
}
console.log(a); // error

if (true) {
  let b = 10;
}
console.log(b); // error

constとは

constは再宣言不可、再代入不可、ブロックスコープです。再宣言不可とブロックスコープについては、上2つを見ていただければ分かると思うので、再代入不可についてのみ、説明します。下のコードを見てください。

再代入が不可なので2行目でエラーになっています。5行目は変数personが参照しているオブジェクトのアドレスは変更されていないので、エラーになりません。6行目も同様に再代入をしようとしてエラーになっています。

const a = 10;
a = 20; // error

const person = {name: "tarou"};
person.name = "hanako";
person = {name: "tarou"} // error

まとめ