DEV Community

Mavis
Mavis

Posted on

Hoisting quiz

#javascript

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.

mavis_chen

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')}
Enter fullscreen mode Exit fullscreen mode

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

Q2

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

======= 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')})
Enter fullscreen mode Exit fullscreen mode

======= 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
Enter fullscreen mode Exit fullscreen mode

======= 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())
Enter fullscreen mode Exit fullscreen mode

======= 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())
Enter fullscreen mode Exit fullscreen mode

======= 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)
Enter fullscreen mode Exit fullscreen mode

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

Q8

console.log(a) console.log(a()) a() function a() {console.log('hi')}
Enter fullscreen mode Exit fullscreen mode

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

Q9

a() function a() {console.log('hi')} a() function a() {console.log('bye')} a()
Enter fullscreen mode Exit fullscreen mode

======= 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()
Enter fullscreen mode Exit fullscreen mode

======= 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()
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)