変数宣言の巻き上げ〜JavaScriptの不思議な決まりごと

JavaScriptには変数宣言の巻き上げ(hoisting)という決まりごとがあります。これはグローバル変数、ローカル変数どちらにもあてはまる決まりごとです。
他の多くの言語はプログラムは上から順に解釈されていき、変数の宣言もこの原則に従います。
まず変数の宣言と初期化を行ってからその後で変数を活用する流れになります。

けれども、JavaScriptは変数の宣言は、グローバル、ローカルの規則に従っていればどこで宣言しても良いことになっています。関数の宣言と同じ考え方ですね。
あれ？嘘。。となりそうですが、決まりごとではそうなのです。

変数宣言の巻き上げの例1

console.log(yourName);
var yourName = 'Tarou';

この例では、undefinedが返ってきます。がエラーではありません。
この記述で「yourName」という変数は確かに認識されています。けれども初期化は巻き上げされません。
そのためundefinedが返ってくるわけです。

変数宣言の巻き上げの例2 …この結果どうなるか考えてみてください。
答えはこちらのデモで確認してください。

console.log(callName());
function callName(){
    console.log(yourName);
    var yourName = 'Tarou';
    return yourName;
}

通常は変数宣言と初期化を同時に行うことも多いですし、余計な混乱を招かないためにも変数を宣言する場合は先頭に行っておいた方が良さそうです。また、原因不明の挙動が出ている場合にこれを疑ってみるのも良いかもしれません。