【JavaScript】変数と定数の宣言（var, let, constの違い)【自己学習】

##letとconst
JavaScriptでは変数の宣言は従来よりvarが使われていたが、ES2015よりletが追加された。また、同じくES2015よりconstを用いた定数の宣言も可能になった。

##varとletの違い
変数を宣言できる点において共通しているvarとletではあるが、下記の点において２つは異なる。

####varは宣言を省略できる

variable-1.js

greet = "Hello World!";  //変数の宣言を省略
console.log(greet);  // > Hello World!

1行目において変数の宣言は省略されているが、greetに値が代入された時点で暗黙的にvarによる宣言がされたとみなされている。だが、省略した場合はすべてグローバル変数になるという性質があるため、省略は避けたほうが良い。

variable-2.js

scope = "global";

function value() {
  scope = "local";  //グローバル変数として更新
  console.log(scope);
}

value();  // > local
console.log(scope);  // > local

関数内での変数の宣言は本来ローカル変数として行われるが、上記のコードではvarを省略したため、グローバル変数の更新とみなされている。

そのため、関数内外どちらの変数scopeを参照してもlocalという値が出力されることになる。

####letは変数名の重複が許可されない
varとは異なり、letは同じ名前の変数の宣言が許可されない。

variable-3.js

var value1 = 1;
var value1 = 2;  //変数valueの値の更新

console.log(value1);  // > 2

let value2 = 1;
let value2 = 2;  //同名の変数のため宣言が許可されない

console.log(value2);  // > エラー

varでは同名の変数の宣言は許可され、変数valueの値が2に更新される。

一方letの場合は許可されず、参照すると「変数valueは既に宣言されています」という内容のエラーメッセージが表示される。

####letはブロックスコープを認識する
従来のJavaScriptでは、他の言語と異なりブロックスコープは存在しなかったが、letが導入されたことでブロックスコープを認識できるようになった。

variable-4.js

if (true) {
  var value1 = 1;  //ブロックスコープは認識されていない 
}

console.log(value1); // > 1


if (true) {
  let value2 = 2;  //ブロックスコープは認識されている
}

console.log(value2); // > エラー

ブロック内でvarを使って変数の宣言を行った場合、ブロックスコープは認識されず、value1はコード全体で参照可能となるため、1が出力される。

それに対してletを使った場合は、ブロックスコープは認識され、value2の参照できる範囲はブロック内のみとなるため、グローバル変数として参照するとエラーが表示される。

##constの特徴
####値の更新ができない
constを使って定数を宣言した場合、同名の定数を宣言できないだけでなく、定数内の値も更新できなくなる。

constant-1.js

const value1 = 1;
const value1 = 2;  //同名の定数の宣言はできない（letと同じ）

console.log(value1);  // > エラー

const value2 = 1;
value2 = 2;  //値の更新もできない

console.log(value2);  // > エラー

定数として代入された値は意図せず更新されることがなくなることから、定数を使うことで不具合等を防ぐことにつながる。

####ブロックスコープは認識する

constant-2.js

if (true) {
  const value = 1; //ブロックスコープは認識されている
}

console.log(value); // > エラー

ブロック内でconstを使って定数の宣言を行った場合、ブロックスコープは認識される（letと同様）。