読者です 読者をやめる 読者になる 読者になる

Javascriptのスコープ(関数、グローバル、ES6はブロック)と巻き上げについて

jsのローカルスコープは関数内のみを参照できることであり、グローバルスコープはscriptのどこからでも参照できることを指す。ローカルスコープを持つ変数をローカル変数、グローバルスコープを持つ変数をグローバル変数という。

スコープは変数が定義された位置で決まり、関数の外で定義されればグローバル変数、関数の中で定義されればローカル変数となる。

  1. 関数の外でグローバル変数を定義し、中でローカル変数を定義できる。関数内でもvarをつけなければグローバル変数を定義できる。

    js local and global scope

  2. 変数の巻き上げ(hoisting)で、グローバル変数への参照を、ローカル変数への参照へスイッチできる。

    jsでは、関数内のどこからでもローカル変数を定義できるが、関数内のどこで定義されても、その関数内の先頭で定義されたことになる。

    js hoisting

    上記のような結果になるのは、関数の先頭で、var global;という中身のない変数が定義され、globalという名前空間がローカルスコープを参照するようになったためである。=>変数定義は必ず先頭で行うこと、でないとローカル変数を参照しているかグローバル変数を参照しているかわからなくなります。

  3. ブロックスコープはES6からサポートしている。

    ECMAScript6より前の仕様では、ブロックスコープを採用していなかった。

    js block scope (before ES6)

    ES6以降はletを使うと、ブロックスコープを作れるでござる。

    js block scope (ES6)

    ES 6で開発するにはBabelか、

    babeljs.io

    気軽に試したかったら、fiddleで試してみてください。

    www.es6fiddle.net