1

I'm probably missing something very fundamental but I would like to ask this regardless

var a=100;
function f(){
    console.log(a)
    const a=150
}
console.log(a)
f();

Prints 100 and throws an error while changing const a=150 to var a=150 returns 100 and undefined. I'm unsure why this behavior occurs and any pointers to relevant info is appreciated

David
  • 25
  • 6

5 Answers5

4

In general, this is how hoisting works:

  • the declaration of the variable is moved to the top
  • the variable is initialized with a special "hoisted" value
  • when the program reaches the var/let/const line, the variable is re-initialized with the value mentioned on that line (or undefined if there's none).

Now, your example can be simplified down to this:

console.log(a)
let a = 150

which is actually:

a = <hoisted value>
console.log(a)
a = 150

It throws an error because, for let and const, the hoisted value is a special object that raises an error when you try to access it.

On the other side, the hoisted value for var is just undefined, so this will print undefined without throwing an error:

console.log(a)
var a = 150

Also, there's some confusion (including this very thread) about which variable types are hoisted, and a so-called "dead zone" for let/const vars. It's simpler to think of things this way: everything is hoisted, that is, all variable bindings in a block are created before entering the block. The only difference between var and let/const in this regard is that with the latter you are not allowed to use a binding until you initialize it with a value.

See https://stackoverflow.com/a/31222689/989121 for more details.

georg
  • 211,518
  • 52
  • 313
  • 390
3

const and let have temporal dead zone so when you try to access const or let before it is instantiated you get an error.

This is not true for var. var is hoisted at the top meaning it is instantiated with a value of undefined just before a function code is run.

marzelin
  • 10,790
  • 2
  • 30
  • 49
1

The problem is that with new ES6, let and const, hoisting is not applied what this means is that a variable declared with either let or const cannot be accessed until after the declaration, if you do this will throw and error

 var a=100;
    function f(){


        console.log(a)// throws an error because is accessed before is declared....
        const a=150
    }
    console.log(a)
    f();

This is commonly called the Temporal Dead Zone

On the other hand using Var will apply hoisting what this does is defines the variable in memory before all the scope is executed... 

 var a=100;
    function f(){


        console.log(a)// This won't throw an error
        var a=150
    }
    console.log(a)
    f();
Renzo Calla
  • 7,486
  • 2
  • 22
  • 37
0

the problem is

the variable with const cannot be declared more then once,

and when you declares const a=150 inside a function, it deleted the previous variable and this is why the error is coming

0

I think the answer your looking for is const is block scope and is not hoisted, whereas var is hoisted.

That's why you get 100, "Error: a is not defined" with:

var a=100;
function f(){
    console.log(a)
    const a=150
}
console.log(a)
f();

and 100, undefined with:

var a=100;
function f(){
    console.log(a)
    var a=150
}
console.log(a)
f();

In the second instance a is declared, but it is not defined yet. You'll see the same result with: 

function f() {
    console.log(a)
    var a=150
}
console.log(a)
f();

Since the var inside the function is hoisted.

Bottom line: const variables are not hoisted, var variables are.

dikuw
  • 1,134
  • 13
  • 22