コンパイラかく語りき

import { Fun } from 'programming'

JavaScriptのレキシカル変数について

どうも!chuckです。

JavaScript中級者に向けて、今日も勉強していきますよー!

 

chuckwebtips.hatenablog.com

 

今回学ぶのは、レキシカル変数について。クロージャはそこそこ分かったのですが、レキシカル変数についてはわかっていなかったようです。

なのでメモ。

 

 

参考にしたのはこちらのサイト様。

www.sirochro.com

 

d.hatena.ne.jp

 

まずは、スコープチェーンについて触れています。

まあこれは感覚的に分かりますよね。内側の関数は、外側の関数のもつ変数を見れるというものです。

こうして、外側に変数を探しに行ける仕組みをスコープチェーンと言います。

 

そしてレキシカルスコープについて。

たぶん、コードを見た方が早いですね

f:id:chuck0523:20150918012455p:plain

 

コードの中で、x という同名の変数が2度定義されてますね。

最初の x はグローバルで定義されており、2個めの x はローカルで定義されています。

 

そして、func1という関数はその戻り値としてxを返します。もちろん、ここでのxとは5ではなく9の方のxです。

なので、8行目で新たなfunc2 という変数に代入されるのは9を格納したxです。

 

そして、10, 11行目でコンソール出力しています。

10行目のxは当然グローバル変数であるxを出力します。

一方で、11行目のfunc2は中身はxですが、そのxはfunc1が返したxなので9が出力されます。

 

要は、func2 が持つxの内容は、console.logが実行された段階ではなく、8行目で定義された段階なんですね。

実行時ではなく、定義時に中身が決まります。このことをレキシカルスコープというらしいです。

 

なんだか難しそうなイメージでしたが、内容はカンタンでしたね!

なんとなーく体感では理解している人が大半だと思います。ただ、知識としてきちんと整理しておくことが中級者への道なのかもしれません。

 

ちなみに、lexicalには辞書的なという意味があるそうです。

ejje.weblio.jp

 はてブが1コついてる!

 
書いたコード 

gist07f7b08d798f71474ea4