はじめに
この記事ではTypeScriptにおける変数のスコープについて解説します。
スコープとは…?
スコープとは、変数の参照の有効範囲のことです。
TypeScriptには大きく分けてグローバルスコープとローカルスコープの2つがあります。
グローバルスコープ
グローバルスコープは基本的にプログラムのどこからでも参照できる変数のことです。
また、グローバルスコープの変数をグローバル変数と呼びます。
TypeScript(JavaScript)にはグローバルオブジェクトと呼ばれるオブジェクトが1つ存在します。
ブラウザではwindowオブジェクトがグローバルオブジェクトとなっています。
グローバル変数は、グローバルオブジェクトのプロパティになります。
日付のDateクラスや、デバッグに使うconsoleオブジェクトの組み込みAPIはすべてwindowオブジェクトのプロパティです。
グローバル変数へのアクセスはwindowを省略して書くことが可能です。
Date === window.Date;
// true
console === window.console;
// trueローカルスコープ以外でvarを用いて変数宣言するとグローバル変数になります。
基本的にvarの使用は非推奨です。詳細は以下をご覧ください。
ローカルスコープ
ローカルスコープは、一定範囲にだけ有効となるスコープのことです。
またローカルスコープの変数をローカル変数と呼びます。
一般的にローカルスコープは以下の3つが存在します。
- 関数スコープ
- レキシカルスコープ
- ブロックスコープ
関数スコープ
関数スコープは、関数内でのみ参照できるスコープです。
関数内で宣言された変数は、関数の外から参照できません。
function sum(numbers: number[]): number {
let sum = 0;
for (const number of numbers) {
sum += number;
}
return sum;
}
console.log(sum);
// 'sum' is not definedレキシカルスコープ
レキシカルスコープとは、関数を定義した地点から参照できる関数外のスコープのことです。
const count = 10;
function increment(): number {
// 関数外の「count」を参照できる。
const newCount = count + 1;
return newCount;
}
console.log(increment());
// 11ブロックスコープ
ブロックスコープは、ブレース「{ }」で囲まれた範囲だけ有効なスコープのことです。
ブロックスコープ内の変数はブロックの外から参照できません。
{
const number = 1;
console.log(number);
// 1
}
console.log(number);
// ReferenceError: 'number' is not definedブロックスコープはif構文などにも適用されます。
条件分岐の中で変数宣言された変数は、条件分岐の外からは参照できません。
const isLogin = true;
if (isLogin) {
const message = "ログインしています。";
} else {
const message = "ログインしていません。";
}
console.log(message);
// 'message' is not defined 上記は、以下ようにブロックスコープの外で変数を宣言する必要があります。
const isLogin = true;
let message;
if (isLogin) {
message = "ログインしています。";
} else {
message = "ログインしていません。";
}
console.log(message);
// ログインしています。より安全なコードを書くために
より安全なコードを書くためには、グローバル変数を使用しないことです。
グローバル変数はどこでも参照できるため、一見便利に思えますが、意図しないところで値を書き換えてしまう恐れがあります。
そのため、変数のスコープはできるだけ狭くすることが推奨されています。
また、varを使用せずにconst、もしくはletを使用すると良いでしょう。
基本的にはconstを使用して、どうしようもない時はletを使うのが推奨されます。
まとめ
この記事ではTypeScriptにおける変数のスコープについて解説しました。
是非、いいねやコメントをお願いします。
コメント