変数のスコープについて

変数のスコープとは

定義した変数が使用可能な範囲（参照できる範囲）を指した言い方になります。
スコープがプログラム全体である変数をグローバル変数といい、関数やメソッド等の内部で宣言された範囲内で使用可能な変数をローカル変数といいます。

変数宣言の種類

変数の宣言には以下のようなものがあります。

• const宣言

一度、値を割り当てられると、以降値を変更できなくなる宣言方法になります。
また、宣言される前には、変数にアクセスできません。

// 宣言より前に使用することはできない
console.log(number); // エラー

const number = 10;

console.log(number); // 10

// 宣言後に値を変更することはできない
number = 0; // エラー

• let宣言

一度、値を割り当てた後からでも、値の変更が可能な宣言方法になります。
また、宣言される前には、変数にアクセスできません。

// 宣言前に使用することはできない
console.log(number); // エラー

let number = 0;

for (let i = 0; i < 3; i++) {
    // 値は何度も変更可能
    number = i + 1;

    console.log(number); // 1,2,3
}

• var宣言

一度、値を割り当てた後からでも、値の変更が可能な宣言方法になります。
また、宣言した前後に関わらず、関数やメソッド内でアクセス可能であり、同じ変数名何度も宣言できる変数になります。
関数スコープ:関数ごとに作られるスコープのことで関数内で使用可能な変数のことです。
※基本的には使用しないこと。

// 宣言前に使用可能
number = 20;
console.log(number); // 20

var number = 10;

for (let i = 0; i < 3; i++) {
    // 値は何度も変更可能
    number = i + 1;

    console.log(number); // 1,2,3
}

constとletのスコープについて

先ほど紹介したconst宣言とlet宣言のスコープについて詳しく説明していきたいと思います。
2つの宣言のスコープは、『静的スコープ（レキシカルスコープ）』または『ブロックスコープ』と呼ばれていて、if文やfor文などのブロック内で宣言した物は、内部でしか使用できない作りになっています。

• const宣言

const uModel = {
    name: "",
    id: 0
};

const uName = "ユーザー1";

if (true) {
    const uId = 1;
    console.log(uName); // ユーザー1
}

// 変数の内部情報のみ変更する場合は可能
uModel.name = uName;

// uIdのスコープはif文内なので使用不可
uModel.id = uId; // エラー
console.log(uModel); // { name: 'ユーザー1', id: 0 }

• let宣言

let rankModel = {
    name: "",
    rank: 0
}

function letMethod(isExists: boolean): number {
    let score = 0;

    if (isExists) {
        score = 1;

        // 変数の内部情報のみ変更する場合は可能
        rankModel.name = `ランク${score}`;
        rankModel.rank = score;

        console.log(rankModel); // { name: 'ランク1', rank: 1 }

        return score;
    }

    console.log(rankModel); // { name: '', rank: 0 }

    return score;
}

let rank = letMethod(false);
rank = letMethod(true);
rank += 2;

// 変数の内部情報のみ変更する場合は可能
rankModel.rank = rank;
rankModel.name = `ランク${rankModel.rank}`;
console.log(rankModel); // { name: 'ランク3', rank: 3 }

まとめ

varやletは使い勝手がいいが、意図しない値の変更や参照などを避けるために使用は必要最小限にすると良いでしょう。
なるべく、変数のスコープを小さくし、処理の流れや不用意な参照を避ける工夫をすることが大切です。

記事の投稿は初めてなので指摘やコメントなどいただけると助かります。これから色々な記事を投稿していき知識を高めていきたいと思っています。皆さまよろしくお願いします。