初めに

プログラマ歴に比べると、超JS初心者
メモなので、間違っている箇所、誤字脱字の可能性があります
どんな言語でもそうですが、感覚の違いというのは誰しも有ります

jsのデバッグ

をしているとわかることだけれど

昔からコンテキストスイッチ

という物があり、これは、実行しているプロセスをしまっておいて、必要になった時に出してきて継続した処理を正常に動かしておくもの。

jsで言えば

例えば、スパイダーモンキーとかV8のようなエンジンが変数などの初期化の際、その実行コンテキストのオブジェクトに変数や関数の初期化されたもの等をしまっておく。
ただ、ここで気を付けておきたいことが、変数・関数の宣言・初期化処理は行うが、関数の中に存在するローカル変数に関しては宣言に留まり、初期化までは行わないということ。当然の話だけど、理解して書いていないと思わぬundefinedを引き起こしてしまう可能性がある。

サンプルコードを書いてみた。
magicという隠し味をミックスした物を生み出すコードです。内容はどうでもいいですが

.js

function make(val) {
  var name = name,
      magic = '∞';
  function mixin() {
    console.log(magic + name);
  }
  mixin();
}
make('ジュース');

make関数にブレークポイントを置いてみると
コードの実行が行われるまでは、make関数の中にあるname,magicのような変数は初期化されておらずundefinedされている。mixinのスコープのクロージャとしてもまだ初期化はされておらず

その後、make関数の中にステップインすると
name,magic変数が初期化され、それぞれの値が代入されているます。クロージャとしても値が入っている

この後は、引き続きVMの中に入っていってconsoleが呼ばれnameとmagicの合わさった文字が出力される

何こいつ当たり前のことを言っているんだ、てなるかもしれませんが。まあ、そう、本当に当たり前の話で。

実際に関数が呼ばれるまでは関数内にある変数は初期化されてないよ、という超初心者向けの記事なので。サーバサイド中心にやっていて、バグらない程度に一応JSの動き知っておこうって人のための記事です。