【超基礎】TypeScript変数のスコープについて

前提

この記事は、初学者の私が、サバイバルTypeScriptで学んだこと+調べたことをまとめたものになります。

従って、経験則に基づいた発言ではないため、一部慣習とは違っていたり、認知にずれがあったりする可能性がありますので、ぜひコメントで指摘していただけると幸いです。

スコープとは？

• ある変数を使うことができる範囲を指す
• 大きく分けてグローバルスコープとローカルスコープに分けることができる
• それぞれグローバル変数、ローカル変数と呼ばれる

グローバルスコープについて

• プログラムのどこからでも参照できる変数
• ブラウザではwindowオブジェクトがグローバルスコープのオブジェクトとなり、consoleやDateなどを提供している
• 意図しない影響を受けるリスクがある

JSでは変数宣言の際、letかconstを付けないとグローバル変数になるため注意が必要。

TSではエラーになる

const a:number = 10;//グローバル変数の宣言

function func(){
    console.log(a);
}

func() //=>10
console.log(a); //=>10

ローカルスコープについて

• ある一定の範囲内で参照できる変数
• 基本的に{}の中で宣言されたものは{}の中で有効となる
• グローバル変数と名前が競合した場合、ローカル変数が優先される

関数スコープ

• 関数の中でのみ参照できる変数

//関数外からのアクセスはエラーになる
function func(){
    const a:number = 10;
    console.log(a);
}
func() //=>10
console.log(a) //=>Error

//ローカルスコープ内ではローカル変数が優先される
const a: number=20;

function func(){
    const a:number = 10;
    console.log(a);
}

func() //=>10
console.log(a) //=>20

レキシカルスコープ

• 関数呼び出しの前で宣言された、関数スコープの外の変数は関数スコープの中で扱うことができる

• 安全なグローバル変数の様な振る舞いをする

前

function main() {    
    function func() {
        console.log(a);
    }    
    //関数呼び出しの前で宣言
    let a: number = 10;
    func();// => 10     
}

後

function main() {    
    function func() {
        console.log(a);
    }    
    //関数呼び出しの後で宣言    
    func();// => undefined
    let a: number = 10;
}

ブロックスコープ

• {}で囲まれた範囲でのみ有効となる
• 関数やif文じゃない、素の{}内でも有効

{    
    let a: number = 10;
    console.log(a); // => 10
}
console.log(a)// => Error

まとめ

以上になります。実装の練習をしていた時何でもかんでもグローバル変数にしていた過去の自分をぶんなぐってやりたいですね！！

当方初学者なため、認知のずれや、モダンな開発現場ではもう使わない表現などがありましたらコメントで指摘していただけると幸いです。😸