【JavaScript】変数のスコープ

はじめに

JavaScript勉強中の👶です。
理解を深めるために日々の学びを記事にしています。
初心者の記事なので言い回しや記載に誤りがあるかも知れませんが、暖かく見守っていただけると幸いです。
(よろしければ間違いをコメントいただけると学び、励みになります！)

学んだこと

・JavaScriptにおける変数のスコープについて
（本記事では、varによる変数宣言については割愛しています）

スコープとは

スコープとは、変数を使用できる有効範囲のこと。

グローバルスコープ

プログラムのどこからでも参照できる変数。ブラウザではwindowオブジェクトがグローバルオブジェクトです。
関数に全く囲まれていない最上位の領域で変数を宣言する場合も、グローバルスコープになります。

ローカルスコープ

関数スコープ

関数内で定義した変数は、関数外から参照できません。

function func(){
	const greeting = "hello";
	console.log(greeting);
}
// 関数内でgreetingを呼び出し
func(); // [LOG]: "hello"

// 関数外からgreetingを呼び出し
console.log(greeting); // エラー

レキシカルスコープ

レキシカルスコープ変数とは、関数を定義した地点から参照できる、関数の外の変数を言います。実行中のコードから見た外部スコープのこと。

const x = 111;
function func(){
    console.log(x);
}
func(); // [LOG]: 111

ブロックスコープ

ブロック内で定義された変数は、ブロック内でのみ有効です。

const age = 10;
if (age >= 18) {
	const range = "adult"
}else{
	const range = "child"
}
console.log(`あなたは、${range}です`); // =>エラー

上記は、 range変数を2回定義しています。通常、同じ変数名で２回定義することはできません。しかし今回の場合は、変数の有効範囲がブロックスコープ内に収まっているため2回定義したこととならず、エラーにはならないのです。

上記のブロックスコープによる参照エラーを解消するには、下記のように書き換える必要があります。

const age = 10;
let range;
	if (age >= 18) {
	range = "adult"
}else{
	range = "child"
}
console.log(`あなたは、${range}です`); //[LOG]: "あなたは、childです"

参考

下記を参考に勉強させていただきました🌱
TypeScript入門『サバイバルTypeScript』〜実務で使うなら最低限ここだけはおさえておきたいこと〜