[JavaScript] 変数と宣言

初めに

JavaScriptでは、「これは変数である」という宣言をするキーワードとして、
var、let、constの３つがあります。

const x = 'Hello';  // constは初期値省略不可
let y = 'Hello';    // letは初期値省略可
var z = 'Hello';    // varは初期値省略可

このうち、varはもっとも古くからあるキーワードなのですが、作成者の意図しない挙動を取りやすいため、主にJavaScriptではconstとletの使用が推奨されます。

const

constキーワードでは、再代入不可の変数宣言を行うことができます。

const 変数名 = 初期値;  // 初期値省略不可

また、以下の再代入不可、再宣言不可、ブロックスコープという特徴があります。

1. 再代入不可

constキーワードは、再代入することはできません。

const bookTitle = "JavaScript Primer";
bookTitle = "新しいタイトル"; // => TypeError: invalid assignment to const 'bookTitle'

・再代入：一度宣言した変数に対して、値を再び代入すること
　

2. 再宣言不可

constキーワードは、再宣言することはできません。

// "x"という変数名で変数を定義する
const x = 初期値;
// 同じ名前の変数"x"を定義するとSyntaxErrorとなる
const x = 初期値; // => SyntaxError: redeclaration of let x

・再宣言：一度宣言した変数を同じ変数名で宣言し直すこと

2. ブロックスコープ

constキーワードは、ブロックスコープです。

・ブロックスコープ:同じ関数内であっても、{}で括られたブロックの外側から呼び出すことが不可能

let

letキーワードでは、constとは異なり、再代入可能の変数宣言を行うことができます。

let 変数名;
変数名 = 初期値; // letは初期値省略可

再代入可能の他は、constと同じく再宣言不可、ブロックスコープという特徴があります。

1. 再代入可能

letキーワードは、再代入することができます。

let bookTitle = "JavaScript Primer";
bookTitle = "新しいタイトル";

・再代入：一度宣言した変数に対して、値を再び代入すること
　

2. 再宣言不可

letキーワードは、再宣言することはできません。

// "x"という変数名で変数を定義する
let x;
// 同じ名前の変数"x"を定義するとSyntaxErrorとなる
let x; // => SyntaxError: redeclaration of let x

・再宣言：一度宣言した変数を同じ変数名で宣言し直すこと

2. ブロックスコープ

letキーワードは、ブロックスコープです。

・ブロックスコープ:同じ関数内であっても、{}で括られたブロックの外側から呼び出すことが不可能

var

varキーワードでは、letとは同じく、再代入可能の変数宣言を行うことができます。

var 変数名;
変数名 = 初期値; // varは初期値省略可

しかし、再代入可能の他は、const、letとは異なり、再宣言可能、関数コープという特徴があります。

1. 再代入可能

varキーワードは、再代入することができます。

var bookTitle = "JavaScript Primer";
bookTitle = "新しいタイトル";

・再代入：一度宣言した変数に対して、値を再び代入すること
　

2. 再宣言可能

varキーワードは、再宣言可能です。
そのため、間違えて変数を二重に定義してしまうというミスが発生しやすくなります。

// "x"という変数名で変数を定義する
var x;
// 同じ名前の変数"x"を定義可
var x;

・再宣言：一度宣言した変数を同じ変数名で宣言し直すこと

2. 関数スコープ

varキーワードは、関数スコープです。

・関数スコープ:関数内でvarを使って宣言した変数は、関数内のどこからでも呼び出すことが可能

letとvarの違い

letはvarに制約を設け、バグを防ぎやすくした、
つまりは改善したバージョンという認識で覚えておいていいです。

まとめ

以上をまとめると以下の表になる

	再代入	再宣言	スコープ
var	〇	〇	関数
let	〇	×	ブロック
const	×	×	ブロック

・基本的には、constを使うのが望ましい。
　constは、制約が多いため意図しない実装を防ぐことができる。
・変数の中身を更新する必要がある場合はletを使用。