Javascriptのローカル変数とグローバル変数

Javascriptのローカル変数とグローバル変数

こんにちは!dynaです!

この記事は javascriptにおけるローカル変数とグローバル変数 を学習した記録です。

では行ってみましょう!!

スコープについて

「変数が、スクリプトの中のどの場所から参照できるか」を定義するもの。

つまり、どの場所でどの変数が使えるか、を決めてあげることになります。


スコープには種類があります。

グローバルスコープ・・・どこからでもアクセス可能
ローカルスコープ・・・決められた範囲でのみアクセス可能
-関数スコープ・・・関数内でのアクセスのみ可能
-ブロックスコープ(ES2015より追加)・・・ifやforでletまたはconstを用いて宣言した場合、ブロックの内側からのみアクセス可能


全体の図にするとこんな感じ↓

グローバルスコープ全体図

グローバルスコープ/グローバル変数

プログラムのトップレベルで宣言された変数を、 グローバル変数 といいます。

グローバル変数は、プログラムのどこからでもアクセスできるという、グローバルスコープを持っています。

実際のコード↓

関数外で宣言されている、

var scope =”global”;

は、どこからでもアクセスできます。 

関数内からもアクセス可能なので、関数glans 内で console.log(scope); で表示しても、”global”が表示されます。

 

ローカルスコープ/ローカル変数

 決められた範囲内でのみアクセス可能なローカル変数 は、

ローカルスコープを持ちます。

決められた範囲 = 関数内(関数スコープ)または ブロック内(ブロックスコープ)

のように分けられます。

関数スコープ

関数内のスコープです。

コードでいうと

 

関数getVlaue 内で宣言した var scope =”local” は、

関数getValue内でしかアクセスできません。

試しに、関数の外でconsole.log(scope);とすると scope is not defined

が返ってきます。

※ちなみに var をつけ忘れると、グローバル変数として扱われてしまうので、注意が必要です。

  

ブロックスコープ

{}で囲まれた範囲のスコープです。{}で囲まれた範囲は if{ } などです。

let , const で変数宣言された場合にブロックスコープの適用となります。

実際のコードを見てみましょう。

 

上記は、関数block、block2があります。

1つ目の関数blockは 「let」を用いて変数宣言しているため、ブロックスコープとなります。 

ブロックスコープ内では、変数宣言した「i」が5と出力されますが、ブロックスコープ外(ifより外側)では、ReferenceErrorとなりアクセスすることができていません。

 

2つ目の関数block2は「ver」を用いて変数宣言しているため、ブロックスコープではありません。

ver宣言では、2つの出力ともに8が出力されています。

※let とverの違いはこちらでは細かく記載しませんが、再代入できるか等の違いがあります。

変数宣言再宣言再代入スコープ
var ○グローバル、ローカル
let ×ブロック
const ××  ブロック

 

参考サイト→https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements#declarations

→個人的にわかりやすいのでお勧め!

https://qiita.com/cheez921/items/7b57835cb76e70dd0fc4 

 

ブロックスコープのメリットは、限られた場所での変数宣言ということ。

意図しないバグを防ぐことができます。

ということで、変数宣言するときは、let、const、verを使い分けたいと思います。

読んでいただきありがとうございます。

参考書籍はこちら↓