Hoisting quiz

There are some fun hoisting quiz here, and I will keep adding more. Not only focusing the result, but also trying to understand why. Here's article may help you understand Execution Context and Hoisting.

Execution Context in JavaScript

Mavis ・ Feb 7 ・ 3 min read

#javascript

Q1

console.log('1')
console.log(teddy)
var teddy = 'bear'
function sing() {console.log('ohhh la la')}

======= result =======
1
undefined

Q2

console.log('1')
console.log(teddy)
console.log(sing())
var teddy = 'bear'
function sing() {console.log('ohhh la la')}

======= result =======
1
undefined
ohhh la la // as function declaration are hoisted
undefined // ignore, as there's 2 console.log()

Q3

console.log('1')
console.log(teddy)
console.log(sing())
var teddy = 'bear'
(function sing() {console.log('ohhh la la')})

======= result =======
1
undefined
ReferenceError: sing is not defined // as it see bracket then fn, JavaScript engine doesn't hoist it.

Q4

console.log('1')
console.log(teddy)
let teddy = 'bear' // change it to let or const

======= result =======
1
ReferenceError: teddy is not defined // keyword let | const do not hoist

Q5

console.log(sing())
console.log(sing2)

// function expression
var sing2 = function() {console.log('uhhh la la')}

// function declaration
function sing() {console.log('ohhh la la')}

console.log(sing2())

======= result =======
ohhh la la
undefined //as it see var, so sing2 is undefined
uhhh la la

Q6

console.log(sing())
console.log(sing2())

// function expression
var sing2 = function() {console.log('uhhh la la')}

// function declaration
function sing() {console.log('ohhh la la')}

console.log(sing2())

======= result =======
ohhh la la
undefined //as it see var, so sing2 is undefined
TypeError: sing2 is not a function // sing2 is undefined

Q7

var one = 1 // hoisting it to undefined
var one = 2 // ignore it, as one have already hoisted
console.log(one)

======= result =======
2

Q8

console.log(a) 
console.log(a())
a()
function a() {console.log('hi')}

======= result =======
ƒ a() {console.log('hi')}
hi
undefined
hi

Q9

a()
function a() {console.log('hi')}
a()
function a() {console.log('bye')}
a()

======= result =======
bye // same as var, rewrite content
bye
bye

Q10

var favouriteFood = 'grapes'

var foodThoughts = function () {
    console.log('Original favourite food: ' + favouriteFood)
    var favouriteFood = 'sushi'
    console.log("new favourite food: " + favouriteFood)
}

foodThoughts()

======= result =======
Original favourite food: undefined
Original favourite food: sushi

Explain

• creating execution context hoisting favouriteFood and foodThoughts, all of them are undefined
• execution phrase, favouriteFood is grapes, foodThoughts is equal to a function, then creating a new execution context for it.

New execution context repeat above in foodThoughts

• creating execution context hoisting favouriteFood is undefined
• execution phrase first is undefined, second is sushi

Q11

var favouriteFood = 'grapes'
var foodThoughts = function () {
    console.log('Original favourite food: ' + favouriteFood)
    console.log("new favourite food: " + favouriteFood)
}

foodThoughts()

======= result =======
Original favourite food: grapes
Original favourite food: grapes