Reactの学習を始める前に(1)〜let, constで変数を宣言する〜

モダンなフロントエンドを学びたくて, Reactをテーマに選んで勉強を開始します。
しかし, その前にJavaScriptの基礎を学んでおくとスムーズにReactの学習に入れます。
やはり, フレームワークより前に, その基となるプログラミング言語を学んでおく必要があるのですね。
これはJavaScript, Reactに限った話ではなく, 全てのプログラミング言語において言えることだと思います。

そこで今回は, JavaScriptの標準規格であるECMAScript2015で追加された「let, const」2つの変数宣言について学んでいきたいと思います。
let, constはReactでも行われる変数の宣言方法であるため, 基礎からきちんと学んでいきましょう。

ECMAScript2015で追加されたlet, constとvarの違いは？

元々, JavaScriptにはVarによる変数宣言がありました。
では何故ECMAScript2015(ES2015)ではlet, constといった変数宣言が追加されたのでしょうか。

let, constはブロックスコープでの変数宣言ができる

古株となるvarとの違いを見てみると, let, constを追加した理由が浮き彫りになりそうです。
varは, グローバルスコープの変数宣言でした。

var num = 1;

if (num === 1) {
  var num = 2;
  console.log(num); // 2
}

console.log(num); // 2

スコープが広いのは, 予期せぬ不具合を招く場合があります。
例えば, たった今使用したい変数にはどんな値が入っているのか, プログラマはグローバルスコープを持った変数が持つ値を, 常に意識して書く必要があります。

それと比較すると, let, constはブロックスコープの変数宣言となります。

let num = 1;

if (num === 1) {
  let num = 2;
  console.log(num); // 2
}

console.log(num); // 1

const num = 1;

if (num === 1) {
  const num = 2;
  console.log(num); // 2
}

console.log(num); // 1

プログラマはブロック内の変数の値に気を配れば良くなります。

let, constは変数の再宣言ができない

varは同名の変数をいくつも宣言することができます。

var num = 1;
var num = 2;

console.log(num); // 2

よってプログラマは, グローバルスコープを持った同名の変数が既に定義されていないか, 常に気にする必要があります。（名前空間の衝突を意識する必要がある）

それに比べ, let, constは変数の再宣言を許可していません。

let num = 1;
let num = 2;

console.log(num); // SyntaxError: Identifier 'num' has already been declared
const num = 1;
const num = 2;

console.log(num); // SyntaxError: Identifier 'num' has already been declared

これで, スコープ内に同一の変数を再宣言してしまうことを避けることができます。

constに至っては, 変数の再代入すらできない

varは変数に値を再代入することができます。これはletも同じです。

var num = 1;
num = 2;

console.log(num); // 2
let num = 1;
num = 2;

console.log(num); // 2

しかし, constは変数を再代入することすらできません。

const num = 1;
num = 2;

console.log(num); // TypeError: Assignment to constant variable.

これは, 定数(constant)に由来しており, 定数は初期値を設定しないとエラーになります。

const num;

console.log(num); // yntaxError: Missing initializer in const declaration

上記より, 予期せぬ不具合を招く恐れがあるvarの使用は控えて, let, constを使用していきましょう。