入れ子にした関数の中で、var文を省略して変数を宣言した場合、どのように処理されるか

Question

関数中で、var文を省略して変数を宣言すると、グローバル変数になると習いました。
自分でも試してみたところ、確かにそのようになりました。

しかし、入れ子にした関数の中で同じことをすると、
以下のように、var文を用いてローカル変数を宣言したかのような結果となりました。

a = 1;
function f() {
    var a = 2;
    function nest() {
        a = 3;
        return a;
    }
    return [a, nest()];
}
f(); // [ 2, 3 ]
a; // [ 1 ]

これは、勝手にvar文が補完されているのでしょうか。

Answer 1

最後の行がreturn [a, nest()]となっていますが、JavaScriptの式は左から処理されるので、先にもともとのa = 2を入れてからnest()を呼んで3に変化します。

Comments

[tter]

なるほど…。
よく分かりました、ありがとうございました。

[tter]

申し訳ないのですが、追加で質問しても良いでしょうか。

return [nest(), a]とひっくり返すと、結果が[ 3, 3 ]となりました。
後者の3は、グローバルとローカルのどちらの変数の値を返しているのでしょうか。

[maisumakun]

ローカルです。

[tter]

ありがとうございます。

Answer 2

「関数中で、var文を省略して変数を宣言すると、グローバル変数になる」が正確でなく、
「関数中で、var文を省略して変数を使うと、その外側の関数でvarで宣言した変数になる。すぐ外側に無ければ、外側の外側と、順番に外側を見てもどこにもvarが無ければグローバルオブジェクトのプロパティとみなす」でしょうか。

関数の中で関数を定義する話がなければ、最初の文でも良いのですが。

Comments

[tter]

なるほど…。順に見ていくのですね。
必ずしもグローバルオブジェクトのプロパティになるわけではないと。
腑に落ちた気がします。ありがとうございます。

[otn]

あ、今はconstとかletとかもあるので、上記も正確じゃ無いですね。

Answer 3

＞function nest() {
＞ a = 3;
＞ return a;
＞ }

このa=3は、
＞var a = 2;
で設定している２を３に書き換えているのではないでしょうか。

JavaScriptの「スコープチェーンをたどる」という仕様でしょうかね。
例えば、以下の記事：
スコープチェーン（静的スコープ）とクロージャ
https://qiita.com/Knbass/items/9c124560a58538d24729

これを踏まえると、
＞return [nest(), a]とひっくり返すと、結果が[ 3, 3 ]となりました。
も予想通りの結果かと思います。

Comments

[tter]

やはり、その辺りが関係しているのですね…。
参考にさせていただきます。ありがとうございます。