JavaScript

javascriptにおけるスコープについて説明する

投稿日:

javascriptを書く上で絶対に外せない「スコープ問題」

今回は初学者やスコープという言葉は知っていても詳しく紹介はできない方に向けてjavascriptにおけるスコープについて説明していきます。

javascriptのスコープとはなんぞや

javascriptのスコープは一言でまとめると変数が使える範囲です。

変数って何、、?

という方はググってください!!

 

さて本題ですがjavascriptを書く時に同じ変数名を複数回使うと思わぬバグを生み出す原因になります。

 

そこで同じ変数名でも使う場所を指定してあげることで使いやすくしてあげようぜ!!

という時に出てくるその「場所」がスコープです。

 

まとめ

スコープ=変数が使える範囲

 

スコープを考えないと問題が起きる

 

スコープを使わずに同じ変数名を使うとバグなどの原因になります。

イメージだと、名前しかわからない学校で佐藤くんが3人いるとします。

佐藤くんと呼んだときに3人に返事されたら先生は混乱しちゃいますよね。

こんな感じで機械も混乱しちゃいます。

 

同じ変数名を使うのは混乱の元

 

この問題を解決してくれるのがスコープという考え方です。

今回の佐藤くんのケースの置き換えてあげると

各佐藤くんが存在する範囲を指定してあげるイメージなります。

例えばふじ組の佐藤くん、もも組の佐藤くん、ひまわり組の佐藤くん

こんな感じですね。

これで先生も混乱しません!!

 

変数の範囲を指定してあげると混乱は起きない

javascriptのスコープの種類

 

javascriptには

グローバルスコープ

ローカルスコープ

の二種類あります。

 

グローバルスコープ

 

関数の外で宣言された変数の範囲です。

プログラムのどこからでも参照できます。

グローバルスコープで変数を作りまくると機械が混乱する元ですので、時と場合に分けて使いましょう。

 

グローバルスコープを使う時

 

グローバルスコープはどこで使うの?

と思われる方がいるかもしれません。

基本的にグローバルスコープは一回しか使わない変数を作る時に使います。

初期化時の変数などですね。

 

ローカルスコープ

 

特定の範囲内で宣言する変数の範囲です。

指定した範囲の中でのみ使えます。

 

ローカルスコープを使う時

 

特定の処理を行う際に、他の場所で既に使ってしまった変数名を使いたい時などに使います。

基本的に決まった処理は別にして変数もローカルスコープを指定しましょう。

 

ローカルスコープは2種類

 

ローカルスコープは

・関数スコープ

・ブロックスコープ

の2種類に分けることができます。

 

関数スコープを使うとき

 

関数ごとで処理を行う際に、他の場所で既に使った変数名を使いたい時などに使います。

基本的に決まった処理は関数別にして変数も関数スコープを使いましょう。

 

ブロックスコープを使う時

関数以外にブロックごとで処理を行う際に、他の場所で既に使った変数名を使いたい時などに使います。

 

まとめ

・ローカルスコープはさらに関数スコープとブロックスコープに分けることができる

・状況によって使い分けること

 

-JavaScript

Copyright© エンジニアてんし君ブログ , 2020 All Rights Reserved.