Javascript hoisting code snippet

Question

I am going through code snippets of JS hoisting. One of the snippet looks like

var employeeId = 'abc123';

function foo() {
    employeeId();
    return;

    function employeeId() {
        console.log(typeof employeeId);
    }
}
foo();

The output would be : function

I have read about hoisting and as per my understanding all the variables would be treated as if they are declared at the top of the function and initialised at the line of their actual declaration/definition. In this case the employeeId function identifier would be declared at the top of the function as var employeeId whose value would obviously be undefined and thus the very first line of the function should throw the error.

Please let me know why the output is function?

What is your question?

Jim Wright
– Jim Wright

2018-02-22 15:02:21 +00:00
Commented Feb 22, 2018 at 15:02 — Jim Wright
– Jim Wright, Commented Feb 22, 2018 at 15:02

T.J. Crowder · Accepted Answer · 2018-02-22 15:03:42Z

1

Both var declarations and function declarations are hoisted to the top of the scope in which they occur (in that order); vars get undefined as their value, the bindings for functions get the function as their value. Only after that's done is any step-by-step code in the function executed.

So your example is effectively the same as this:

var employeeId;                           // Declaration
function foo() {                          // Declaration
    function employeeId() {               // Declaration (shadows outer `employeeId`)
        console.log(typeof employeeId);
    }

    employeeId();
    return;
}
employeeId = 'abc123';
foo();

answered Feb 22, 2018 at 15:03

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

gurvinder372 · Accepted Answer · 2018-02-22 15:05:21Z

0

thus the very first line of the function should throw the error.

No, function declarations are hoisted along with the value (unless it is declared inside an inner block).

In your code,

var employeeId = 'abc123';

function foo() {
    console.log(employeeId); //will print function body
    return;
      function employeeId() {
        console.log(typeof employeeId);
      }
}

but if the function declaration is inside an inner block

var employeeId = 'abc123';

function foo() {
    console.log(employeeId); //will print undefined
    {
      function employeeId() {
        console.log(typeof employeeId);
      }
    }
    return;
}

answered Feb 22, 2018 at 15:05

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

Comments

Vishal Dhanotiya · Accepted Answer · 2021-09-29 04:44:43Z

0

This happens function declarations are hoisted before variables.

In JavaScript function and variable declarations are hoisted at the top of the execution context. You need to remember these three rules for on the same.

Variable and function declaration are hoisted at the top of the execution context.
Only declaration gets hoisted, assignments does not get hoisted. Assignment happens where variable was declared.
function declaration has a precedence over variable declaration in the hoisting.

https://www.codingame.com/playgrounds/7974/understanding-hoisting-in-javascript

edited Sep 29, 2021 at 4:44

answered Sep 29, 2021 at 4:35

Vishal Dhanotiya

2,6481 gold badge16 silver badges34 bronze badges

Collectives™ on Stack Overflow

Javascript hoisting code snippet

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related