JavaScript Hoisting – Hoisted code after Memory Creation phase

I was reading Kyle Simpson book: https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/scope%20%26%20closures/ch4.md#functions-first.

But I don’t fully understand this line “Notice that var foo was the duplicate (and thus ignored) declaration, even though it came before the function foo()… declaration, because function declarations are hoisted before normal variables.”

Let’s say this is the code:

console.log(foo);     // The output is: foo() { return 2; }

function foo() {
    return 1;
}

function foo() {
    return 2;
}

var foo = 3;

I want to visualize what would be the output in JS Engine after Memory Creation phase. Will it be like this?

function foo() {
    return 2;
}

console.log(foo);

If yes, why var foo = 3; was ignored? There is no duplicate for var in the snippet. If no, can anyone please help me visualize what would be the output in JS Engine after Memory creation phase?

Thanks

Answer

I think the text refers to

// scope creation
var foo; // the name was declared. Thrice.
foo = undefined; // from the var
foo = function foo() { return 1 }; // from the first declaration
foo = function foo() { return 1 }; // from the second iteration

// execution
console.log(foo);
;
;
foo = 3;

where foo is initialised with undefined due to the var foo declaration, but then gets overwritten by the initialisation value from the function foo declaration which takes precedence – regardless of the order in which the declarations appeared in the code, function declarations overrule var declarations.