近年、いわゆるモダンJavaScriptと呼ばれるものは2015年に改定されたES6(ES2015)以降を指していることが多いようです。
そこで特に大きく変わったのが変数宣言です。
これまでの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 を使うのが良さそうです。
コメント