Hoisting with var

Sujit Singh — Thu, 21 Apr 2022 06:20:51 +0000

I came across a lot of articles describing hoisting in Javascript.. where in a nutshell, most of them indicating it as a feature where variable declarations are moved to the top of their scope, and few of them even illustrating with appropriate examples with var, let and const.

With const and let having block level scope, it becomes easy to describe.. but I find var a bit tricky to crack hoisting with. Specially when I came across a problem faced by one of my colleague in one of the interviews.

So the problem is as follows whose output was asked to explain:

var num = 4;
function test() {
    var newNum = num;
    console.log('num outside loop:', num);
    for (var num = 0; num < newNum; num++) {
        console.log('num inside loop:', num);
    }
}
test();

From first look, one can say it will be printing following:

num outside loop: 4
num inside loop: 0
num inside loop: 1
num inside loop: 2
num inside loop: 3

But actually it prints:

num outside loop: undefined

And thats it.. it doesn't even enters the loop.
Why so? Javascript hoisting kicks in and moves the num declaration at the top of the function test, so effectively it becomes:

var num; // hoisting
num = 4;
function test() {
    var num; // hoisting - redefines num as undefined
    var newNum;
    newNum = num; // undefined is assigned to newNum
    console.log('num outside loop:', num); // prints message followed by undefined
    for (num = 0; num < newNum; num++) { // var num declaration moved to top as a part of hoisting
        console.log('num inside loop:', num);
    }
}
test();

It's clear that it will never execute the loop with new value of num i.e. 0 being compared to undefined value for newNum.

Thanks for reading through. Feel free to suggest corrections / additions if any.

DEV Community: Sujit Singh

Hoisting with var