【JavaScript】スコープの学習の振り返り① スコープとは

はじめに

Udemyの【JS】ガチで学びたい人のためのJavaScriptメカニズムの講座の振り返りです。

目的

• スコープについての理解を深める

本題

1.スコープとは

実行中のコードから値と式が参照できる範囲のこと
→５種類ある

グローバルスコープとスクリプトスコープ

// 変数をそれぞれ定義
// スクリプトスコープ
let a = 0;
// グローバルスコープ
var b = 0;
function c(){}
// railsのbyebugみたいなやつ
debugger;

ここでデベロッパーツールを使うと処理がdebuggerの部分で止まっています。

Sourcesをクリックした際に、右側のWindowでScriptと書かれた欄とGlobalと書かれた欄があります。

• letやconstで宣言されるとScriptの欄で表示されます。
• varやfunction()はWindowオブジェクトのプロパティとしてGlobalの方で表示されます。

Windowオブジェクト　=　グローバルスコープ
使い勝手が変わらないので、一般的にはスクリプトスコープもグローバルスコープと呼ばれます。

関数スコープとブロックスコープ

// 関数スコープ
// 以下の｛｝に囲まれたスコープのこと
function a(){
  // 変数宣言
  let b = 0;
  // 出力する値を定義
  console.log(b);
}
// 関数で定義した値を出力
a();


// ブロック　=　｛｝のこと　=　ブロックスコープ
// 関数は宣言が前にきているので関数スコープと呼ぶ
{
    // 　変数宣言にvarは使えない　
    let c = 1;
    // cを取得するにはスコープ内でconsole.logで出力しないとエラーになる
    console.log(c);

    // 変数dに関数の値を代入
    let d = function(){
        console.log("d");
    }
    // ブロックスコープ内であれば、関数宣言では関数の外でも呼び出せる
    d();
}

// 基本的には{}だけで使用されることはなく、if文などで使われる

今日はここまで！

参考にさせて頂いた記事

• 【JS】ガチで学びたい人のためのJavaScriptメカニズム