読者です 読者をやめる 読者になる 読者になる

tweeeetyのぶろぐ的めも

アウトプットが少なかったダメな自分をアウトプット<br>\(^o^)/

javascriptのscope(スコープ)をおさらいメモ

javascriptのスコープはそんなに意識しなくても使えてしまうので
改めてお勉強する機会って無いことも多いですよね。

そんな時に
見ればわかった気になるスコープについて自分用メモw
流れはこんな感じ

1.スコープの種類
2.ブロックスコープ(if、forのスコープ)について
3.スコープと変数宣言(var)
4.スコープチェーン
5.マスキング
6.スコープの決定タイミング

それぞれについて
・いきなりまとめ
・ソースでお試し
・補足とか感想とか(あれば)
って感じで書いておこうと思います

1.スコープの種類

javascriptのスコープってこんなのがあるよ的な話し

いきなりまとめ

javascriptのスコープの種類は下記の3種類

・グローバルスコープ
・ローカルスコープ
・evalスコープ

ソースでお試し


補足

ちなみに8行目のxに関して、
11~12行目を無くすとhoge内に宣言されたxはなくなり
スコープチェーンをたどってグローバルなxを参照します


2.ブロックスコープ(if、forのスコープ)について

function内ではローカルスコープができるけど
ifやforのブロック内ではどーなるの?的な話し

いきなりまとめ

ifやforのブロックはスコープを生成しない

ソースでお試し


感想

ってことで、javascriptでローカルスコープを生成するのはfunctionだけ、と。

【追記】

コメントにてご指摘頂きましたので追記です。thx!
ブロックスコープが無いということではなく
try-catchなんかだとブロックスコープが存在します。
こんな感じ


3.スコープと変数宣言(var)

function内だとしてもvarをつけないとどーなるか的な話し

いきなりまとめ

function内部だとしてもvarを使わず定義した場合は(定義と呼べるか怪しいが…)
グローバルスコープの変数となる

ソースでお試し


4.スコープチェーン

javascriptでは重要だけど、とはいえ当たり前のように使ってるやつの話し

いきなりまとめ

スコープチェーンとは
構造をたどって値を検索する仕組み

ソースでお試し


5.マスキング

こちらも試すまでも無いんですが「マスキング」って名前はあまり聞かないかもですね
チェイン上に同じ名前がある場合っていう話し

いきなりまとめ

スコープチェーン上に同じ変数名がある場合
最初に発見された変数を採用して、上位の変数はマスキング(隠蔽)する

ソースでお試し


6.スコープの決定タイミング

スコープスコープ言ってるけど、
どんなタイミングでスコープが決定するかっていう話しです
何言ってるか微妙だと思うので論より証拠

いきなりまとめ

javascriptのスコープは関数実行時ではなく関数定義時に決定される

ソースでお試し


ってことで、スコープについてまとめてみました
言葉とか独自に使っちゃってるところがあるかもなので正しい言葉や解説ありましたらご指摘お待ちしてます!

この記事で参考にした書籍