これまでのJavaScriptの変数宣言

これまでJavaScriptで変数を宣言する時は var を使っていました。
var での宣言には問題があり、バグが出やすくなるため現在ではほぼ使われていません。

var で変数宣言する問題点

・内容を上書きできてしまう

var a = 1;
a = 2; // 内容を上書き

console.log(a); // 2が表示される

・すでに宣言されていても宣言できてしまう

var b = 1;
var b = 2; // エラーにならない

これらの特徴はコードが小さいうちは良いのですが、大きくなってくるにつれてバグを生み出しやすくなってしまいます。

そこで現在のJavaScriptでは var の代わりに ES6(ES2015) から導入された let と const が使われるようになりました。

モダンJavaScriptの変数宣言

letを使った変数宣言

letは内容を上書きできるので、ほぼvarと同じように使うことができます。

let a = 1;
a = 2; // 内容を上書き

console.log(a); // 2が表示される

ただし var と違って再宣言しようとするとエラーになります。

let b = 1;
let b = 2; // エラーになる

const を使った変数宣言

constで変数を宣言すると、内容を上書きできません。
もちろん再宣言もできません。

const a = 1;
a = 2; // エラーになる

これらの特徴によって、var で変数宣言するよりも比較的安全になるので、現在では let と const で変数を宣言することが標準的になっています。

constの注意点

constで宣言した変数は内容を上書きできないと言いましたが、実は種類によっては上書きできてしまうケースがあります。
それが配列とオブジェクトです。

constで配列を宣言して内容を上書きする例

constで宣言された配列要素の内容を書き換える例

const array = ['x', 'y', 'z']; // 配列を宣言
array[2] = 'a'; // 最後の要素の中身を書き換える
console.log(array);
['x', 'y', 'a'] // 内容が書き換わっている

constで宣言された配列に要素を追加する例

array.push('b');
console.log(array);
['x', 'y', 'a', 'b'] // 要素が追加されている

constでオブジェクトを宣言して内容を上書きする例

まずは const でオブジェクトを宣言します。

const obj = {
  a: 1,
  b: 2
}

constで宣言されたオブジェクトのプロパティを変更してみます。

obj.b = 5;
console.log(obj);
{ a:1, b:5 }

プロパティの中身を書き換えてしまうことができました。
さらに新しいプロパティを追加してみます。

obj.c = 3;
console.log(obj);
{ a:1, b:5, c:3 }

このように新しいプロパティを追加することもできます。

delete obj.b; // プロパティを削除

console.log(obj);
{ a:1, c:3 }

プロパティの削除もできます。

しかし以下のように Object.freeze を使うことでオブジェクトの内容を変更できないようにすることもできます。

const obj2 = {
  a: 1,
  b: 2
};
Object.freeze(obj2); // オブジェクトを凍結

obj2.a = 3; //エラーが出るわけではない
obj2.b = 4; //同上

console.log(obj2);
{ a:1, b:2 } // 上書きする前の値のままになっている

ただし Object.freeze を使っても孫プロパティは変更できてしまうので注意が必要です。

const obj3 = {
  a: 1,
  b: 2,
  c: {
    d: 3
  }
};
Object.freeze(obj3);

obj3.c.d = 9; // 孫プロパティdの内容を上書き

console.log(obj3);
{ a:1, b:2, c:{ d:9 } } // freezeしたのに上書きできてしまう

以上のようにオブジェクトの場合は const でも中身を書き換えることができるので、Reactでオブジェクトを宣言する場合には基本的に const を使うのが良さそうです。