😎

javascriptのグローバル変数とローカル変数を覚える

1 min read

記事を残した理由

変数の宣言の時なんとなく var だったり letを使っていた。
スコープに知識についてあいまい。


学びなおし

重要単語

ローカル変数 関数の内側で宣言した変数
グローバル変数 プログラムのどこからでもアクセスができる変数
スコープ 変数がプログラムの中のどの場所から参照できるのかを決定づけるもの

変数定義のコード

グローバル変数の定義方法
グローバル変数として定義するには関数の外で変数の宣言

var hoge = 'Global';
console.log(hoge);

ローカル変数の定義方法
関数内で変数を宣言

function local(){
    var huga = 'Local';
    return huga;
}
console.log(local());

豆知識

Javascriptで変数定義はvarを省略しても定義可能。
しかしvarを省略するとグローバル変数宣言扱いになってしまうので、
ローカル変数を作りたい場合はvarを使うことが望ましい。

さらにES6ではletで変数定義可能
でもvar と letでは微妙に差があるので注意

「var」だと関数スコープとなり、
関数内でブロックで変数定義をしても
同名だと上書きされてしまう。

一方「let」はブロックスコープのため
同じ関数内で同名の変数を定義しても
ブロックさえ異なっていれば違うものとして呼び出されてしまう。

このブロックスコープに対応しているか否かで
下のコードを書くと動作にも差が出る。

if (true) {
    var value1 = 10;
    console.log(value1);
}
console.log(value1);

if (true) {
    let value2 = 20;
    console.log(value2);
}
console.log(value2); // → エラー

まとめ

関数外で宣言した変数をグローバル変数と呼ぶ。
反対に関数内でvarもしくはletで定義したものをローカル変数と呼ぶ。
グローバル変数はプログラムのどこからでも参照でき、
反対にローカル変数は関数内でのみ参照ができる。

var と letにはブロックスコープに対応しているか否かの差があり、
varは同関数内で同名をつければ上書きされてしまうが、
letはブロック外であれば何度でも使用できる。

Discussion

ログインするとコメントできます