JavaScript

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

2019年12月8日

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

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

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

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

変数って何、、?

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

 

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

 

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

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

 

まとめ

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

 

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

 

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

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

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

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

 

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

 

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

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

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

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

こんな感じですね。

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

 

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

javascriptのスコープの種類

 

javascriptには

グローバルスコープ

ローカルスコープ

の二種類あります。

 

グローバルスコープ

 

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

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

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

 

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

 

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

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

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

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

 

ローカルスコープ

 

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

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

 

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

 

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

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

 

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

 

ローカルスコープは

・関数スコープ

・ブロックスコープ

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

 

関数スコープを使うとき

 

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

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

 

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

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

 

まとめ

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

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

 

プログラミングスクールに関する情報

【無料あり】プログラミングスクールおすすめランキング【WEBエンジニアになりたい方向け】と書かれた画像
【無料あり】プログラミングスクールおすすめランキング【WEBエンジニアになりたい方向け】

  あなたプログラミングスクールに通いたいけどたくさんありすぎてどこがいいのかわかりません。   最近はエンジニアブームということもありプログラミングスクールが増えました。 一方でたくさんありすぎてど ...

続きを見る

返金保証ありのプログラミングスクールランキング【エンジニアが選びました】と表示されたパソコンの画面
【転職保証つき】返金保証ありのプログラミングスクールランキング【エンジニアが選びました】

  あなた返金保証がついているオススメのプログラミングスクールってありますか?   結論から話すと、返金保証つきのプログラミングスクールランキングは次の通りです。   1位:DMMWEBキャンプ  【 ...

続きを見る

wordpress
【無料あり】WEB制作を学べるオンラインスクールランキング【副業で稼ぎたい方向け】

  あなたWeb制作の副業で稼ぎたいけど、どのスクールで学ぶのが良いの? スクール選びで失敗はしたくないです。   ↑このような疑問や不安を解決するべく、現役のWebエンジニアがWEB制作を学べるスク ...

続きを見る

フリーランス
無料あり:フリーランスを目指せるプログラミングスクールランキング【体験をもとに徹底分析しました】

  あなたフリーランスエンジニアを目指すことができるプログラミングスクールってありますか?   最近では、高年収や働きやすさの魅力からフリーランスエンジニアを目指す方も増えてきました。 結論から話すと ...

続きを見る

WEB系自社開発企業にいけるプログラミングスクールランキング【現役エンジニアおすすめ】と書かれた画像
WEB系自社開発企業にいけるプログラミングスクールランキング【現役エンジニアおすすめ】

  あなたWEB系の自社開発企業に就職したいです。 オススメのスクールを教えて下さい。   結論から話すと、WEB系自社開発に行きやすいスクールのランキングは以下の通り。   第1位:テックアカデミー ...

続きを見る

-JavaScript

S