What is causing this JavaScript function to output '2'?

Question

Recently, I came across an unusual JavaScript function:

(function f(){
    function f(){ return 1; }
    return f();
    function f(){ return 2; }
})();

To my surprise, it returns 2 instead of crashing the browsers as expected due to recursion.

Curious if anyone can shed light on this unexpected behavior.

Answer 1

Answer №1

When function declarations are hoisted, the code ends up looking like this:

(function f() {
    function f() { return 1; }
    function f() { return 2; }
    return f();
})();

This can also be represented as:

(function f() {
    var f = function f() { return 1; };
    var f = function f() { return 2; };
    return f();
})();

which is essentially:

(function f() {
    var f = function f() { return 1; };
    f = function f() { return 2; };
    return f();
})();

This further simplifies to:

(function f() {
    var f = function f() { return 2; };
    return f();
})();

Ultimately, the f in the more specific scope takes precedence over the outer one.

Answer 2

When function declarations are hoisted, the code ends up looking like this:

(function f() {
    function f() { return 1; }
    function f() { return 2; }
    return f();
})();

This can also be represented as:

(function f() {
    var f = function f() { return 1; };
    var f = function f() { return 2; };
    return f();
})();

which is essentially:

(function f() {
    var f = function f() { return 1; };
    f = function f() { return 2; };
    return f();
})();

This further simplifies to:

(function f() {
    var f = function f() { return 2; };
    return f();
})();

Ultimately, the f in the more specific scope takes precedence over the outer one.