モダンなJavaScriptのお勉強：変数宣言編

これまでは、普通に var を使って変数宣言していましたが、ECMAScript 2015 で追加された let や const を使って、その違いを確認してみます。

例えば、次のような宣言をしてみます。

var message = "Hello";

この変数 message は、値の変更がでます。変数だから当然と言えば当然かもですが。

message = "Hi";
console.log(message);

結果

Hi

また、同じ変数名で再度宣言することもできます。

var message = "ハロー";
console.log(message);

結果

ハロー

letの場合は、値の変更は可能ですが、同じ変数名での再宣言は不可になります。

まず let で宣言します。

let message = "Hello";

その後、値を変更します。次のコードは正常に実行できます。

message = "Hi";
console.log(message);

結果

Hi

ただし、次のように再宣言するコードはSyntaxErrorになり、実行できません。

let message = "ハロー"; // SyntaxError
console.log(message);

constは、値の変更も、同じ変数名での再宣言も不可になります。

いわゆる定数の扱いですね。

const で宣言してみます。

const message = "Hello";
console.log(message);

その後、値を変更します。次のコードはSyntax Errorにはなりませんが、実行時にエラーになります。

message = "Hi";
console.log(message);

発生したエラーは、TypeError: Assignment to constant variable でした。

また、let と同じく次のように再宣言するコードはSyntaxErrorになり、実行できません。

const message = "ハロー"; // SyntaxError
console.log(message);

const は、値の変更が不可という事がわかりましたが、1つ注意点があります。

値が不可なのは、文字列 ( String ) や数値 ( Number) や真偽 ( Boolean) などのプリミティブ型であり、オブジェクトのプロパティや配列の要素は変更できます。

オブジェクトのプロパティの例をみてみましょう。

次のコードは const でオブジェクトを宣言していますが、そのプロパティは変更可能です。

const member1 = {
     id: 1,
     name: "Neco",
     address: "Tokyo"
};
member1.address = "Osaka";
console.log(member1);

結果

{ id: 1, name: 'Neco', address: 'Osaka' }

配列の要素の例もみてみましょう。このコードでも const で宣言した配列の要素を変更しています。

const mode = ["PLAY", "STOP"]
mode.push("PAUSE");
console.log(mode);

結果

[ 'PLAY', 'STOP', 'PAUSE' ]

var と違い、let と const は同じ変数名での再宣言は不可であることがわかりました。

再宣言は、コードが混乱する元になりがちなので、基本的に let か const での変数宣言が良さそうです。

また、let か const の使い分けは、変数として扱うか、定数として扱いかで考えればいいですね。

のべラボ.blog