40代おっさんJavaScriptのスコープを学ぶ

本記事ついて

本記事は プログラミング初学者の私が学習していく中でわからない単語や概要をなるべくわかりやすい様にまとめたものです。
もし誤りなどありましたらコメントにてお知らせいただけるとありがたいです。

スコープとは

実行中のコードから値と式が参照できる範囲
JavaScriptにおけるスコープとは、変数がどの場所から参照できるのかを定義する概念

5種類のスコープ

グローバルスコープ

・プログラムのトップレベルで宣言された変数は、グローバル変数となり、プログラム全体のどこからでもアクセス可能なグローバルスコープ

・varやfunctionで値を保持するとWindowで値が保持される
これがグローバルスコープになる

スクリプトスコープ

一般的にはスクリプトスコープもグローバルスコープと呼ばれる
letで値を保持するとScopeで保持される
もし同じ変数があったとして、varとletに格納すると優先されるのはletである
そのためグローバルスコープとスクリプトスコープでは少し違いがある

関数スコープ

function a() {

}

上の関数の{}の部分を指す

関数内で宣言された変数は関数外で呼び出すとエラーになる

ブロックスコープ

{

}

関数宣言がない{}の部分を指す

条件があり、変数を宣言する場合はlet,constを使用
varを使うとブロックが無視される
またブロック内で関数を宣言してもブロックは無視される

※if,for文の時に使用、その時にvar,関数を使うと意図としない動きになるので注意！！

モジュールスコープ

こちらはモジュールを勉強時に説明します

レキシカルスコープ

レキシカルとは
語彙の、辞書（編集）の、辞書的な

プログラム的なレキシカルとは
プログラムの文脈ではソースコードのどこに何を書いているかという意味

レキシカルスコープとは
コードを書く場所によって参照できる変数が変わるスコープのこと

コードを記述した時点で決定するため「静的スコープ」ともいう

実行中のコードから見た外部スコープのこと
どのようにしてスコープを決定するかの仕様のこと

スコープチェーン

スコープチェーンとは
スコープが複数階層で、連なっている状態

let a = 2;
window.a = 4;
function fn1() {
    let a = 1;
    function fn2() {
        let a = 3;
        console.log(a);
    }
    fn2();
}
fn1();

このように複数階層になっており、また変数名が重複している場合は
内側の層から値を取ってくる
この場合は
a=3になる

特に気を付けないといけないのは

let a = 2;
window.a = 4;
function fn1() {
    function fn2() {
        console.log(a);

        if(true) {
           var a = 3;
       }
    }
    fn2();
}
fn1();

外側のlet a = 2;
の値を取りたいのにvar a = 3;
同じ変数名を定義してまって値を取ると
undefinedになってしまいエラーにすらならないのでコードが実行されてしまう

参考資料

https://www.udemy.com/course/javascript-essence/