Hoisting quiz
Tags: javascript
Published: 2023-02-06 12:42:09

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`.
{% embed https://dev.to/mavis_chen/execution-context-in-javascript-gic %}

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