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

こんにちは！dynaです！

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

コードを書く上では、上記は結構大切だと思ったのでメモ。

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

1. スコープについて
2. グローバルスコープ/グローバル変数
3. ローカルスコープ/ローカル変数
- 3.1. 関数スコープ
- 3.2. ブロックスコープ

スコープについて

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

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

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

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

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

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

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

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

実際のコード↓


//スコープについて
    var scope ="global";//グローバルスコープ

    function glans(){
        console.log(scope);
    }
  
　console.log(scope);//global
  glans();//global

//スコープについて

var scope ="global";//グローバルスコープ

function glans(){

console.log(scope);

}

　console.log(scope);//global

glans();//global

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

var scope =”global”;

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

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

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

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

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

決められた範囲　＝　関数内（関数スコープ）または　ブロック内（ブロックスコープ）

のように分けられます。

関数スコープ

関数内のスコープです。

コードでいうと


  function getValue(){
        var scope = "local";//ローカルスコープ
        console.log(scope);//local
    }
　getValue();
  console.log(scope);// scope is not defined

function getValue(){

var scope = "local";//ローカルスコープ

console.log(scope);//local

}

　getValue();

console.log(scope);// scope is not defined

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

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

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

が返ってきます。

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

ブロックスコープ

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

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

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


 function block(){
        if(true){
            let i = 5;//ブロックスコープ
            console.log(i); //5
        } 
        console.log(i);//ReferenceError
    }

    function block2(){
        if(true){
            var d = 8;//ブロックスコープではない
            console.log(d); //8
        } 
        console.log(d);//8
    }

    block();
    block2();