【TypeScript】変数

変数宣言

TypeScriptの変数宣言には、letとconstがあります。

let

letを使用すると、再代入が可能です。

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

また、letは変数の初期値なしでの変数定義ができます。

初期値なしの変数の値はundefinedになります。

let x;
x = 1;
console.log(x);
// 1

const

constを使用すると、再代入が不可の変数が定義できます。

const x = 1;
x = 2;
console.log(x);
// TypeError: Assignment to constant variable.

letとconstの使い分け

上記の２つの変数宣言の使い分けに悩む人もいると思います。

個人的には基本的にはconstを使用する方針で良いと思います。

確かにletだと再代入ができて便利のように思えますが、意図しない箇所で変数の値が変わってしまいことを防ぎ、安全なコードを書くべきであるのでconstを使うようにしましょう。

letは必要な箇所でのみ使うようにしましょう。

var

変数宣言の方法にvarというものがありますが、これは古い変数宣言になります。

varにはいくつかの問題点があるため、使わないようにしましょう。

問題点1: 同名の変数宣言ができてしまう

以下のようにvarを使うと同名の変数宣言ができてしまいます。

これも意図しないところで既存の変数を書き換えてしまい、おかしな結果を出力する可能性があります。

letとconstでは同名の変数宣言はできません。

var x = 1;
x = 2;
console.log(x);
// 2

var x = 3;
console.log(x);
// 3

問題点2: グローバル変数の上書き

以下のようにあらかじめ用意されているグローバルな変数の値を書き換えてしまいます。

たとえば、ブラウザ上でinnerWidth変数をvarでグローバル変数として定義すると、標準で用意されているwindow.innerWidthの値が上書きされてしまいます。

本来であればブラウザの横幅を取得できるところが、グローバル変数として定義した値が常に返ってくるようになります。

var innerWidth = 10;
console.log(window.innerWidth);
// 10

応用：constは可変オブジェクトを保護しない

constは一見定数的な挙動に見えますが、実を言うと少し違います。

再代入が不可なのですが、すでに代入されているオブジェクトの中身を書き換えることは可能になっています。

例えば、リストや連想配列を例に説明します。

const array = [1, 2];
array.push(3); // OK
console.log(array)
// [1, 2, 3]

array = [3, 4]; // NG
// Cannot assign to 'array' because it is a constant.

const dict = { x: 1 };
dict.x = 2;  // OK

dict = { x: 2 }; // NG
// Cannot assign to 'dict' because it is a constant.

まとめ

この記事ではTypeScriptにおける変数について説明しました。

constとletをうまく使用してより安全なコーディングを意識してみてください。

是非、いいねやコメントをお願いします。