Can someone explain to me why (1) returns 11 where (2) returns undefined. what is the effect of function blocks/declarations to hoisting ?

// (1)
var boo = 11
console.log(boo) // 11
var boo = 10

Can someone explain to me why (1) returns 11 where (2) returns undefined. what is the effect of function blocks/declarations to hoisting ?

// (1)
var boo = 11
console.log(boo) // 11
var boo = 10

// (2)
var boo = 11
function foo() {
   console.log(boo)
   var boo = 10
}
foo() // undefined

• javascript
• hoisting

Share Improve this question Follow edited Jun 17, 2020 at 15:32 Fahd Lihidheb asked Jun 17, 2020 at 15:25 Fahd LihidhebFahd Lihidheb 71044 silver badges2222 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

JavaScript hoisting within functions means that the declaration of variables are moved to the top of the function block. When you enter foo(), var boo is redeclared instantly even though you have not reached it (because the JS engine knows that this declaration exists within the function). Accordingly, the reason that it is undefined is because it has only been declared, you don't assign a value until the following line.

In reality, this is not a situation you should find yourself in if you declare variables in an appropriate scope and don't redeclare variables with the same name, but I understand your curiosity.

You can read more about this here.

var declaration (contrary to let) is always done at the top of its block, meaning:

var boo = 11
function foo() {
   console.log(boo)
   var boo = 10
}
foo()

is equal to

var boo = 11
function foo() {
   var boo // undefined
   console.log(boo)
   boo = 10 // 10
}
foo()

don't use var all the time after the first time you need to overwrite the boo

EDIT: it's undefined because you are declaring it twice

only 2 works fine if declared once and then overwritten in the function

// (1)
var boo = 11
console.log(boo) // 11
 boo = 10

// (2)
var boo = 11
function foo() {
   console.log(boo)
   boo = 10
}
foo() // 11

If you want to overDeclare in a function and call you need to console it after declaration at least

    // (2)
    var boo = 11
    function foo() {
       boo = 10
       console.log(boo)
    }
    foo() // 10

Hoisting happens on every execution context. During the hoisting variable or function declarations are not moving to the top, they are just being written to the memory.

When you run a javascript file, first global execution context is created. Global execution context gives global object, "this" keyword and hoists the var declarations and function declarations.

in the first part of your question:

var boo = 11
console.log(boo) // 11
var boo = 10

boo is hoisted like this:

var boo=undefined. 

Because variables are PARTIALLY hoisted. var boo=10 is not going to overwrite var boo=undefined. this is how it looks like after hoisting:

var boo=undefined
    boo = 11
    console.log(boo) // it is clear why 11
    var boo = 10

in the second part of your question:

var boo = 11
function foo() {
   console.log(boo)
   var boo = 10
}
foo() 

var boo in the global context is partially hoisted.

var boo=undefined

but this is not relevant to us. Because when we create a new function and invoke it, a new execution context is created and inside this execution context another hoisting takes place like this:

function foo() {
   var boo=undefined  
   // "boo" is partially hoisted inside  
   // "boo" is written into the variable environment of the execution context
   // "foo()" will always look into the its variable environment first
   console.log(boo)
   boo = 10
}

we defined a variable more than once but in different scopes. we have var boo =11 in parent scope and var boo=10 in the local scope. this is an example of variable shadowing. foo() will be using the local variable first, so local variable is shadowing over the parent's value.