Here is another basic Javascript concept that can be a good interview question.

var vs let vs const

If you are an interviewer: you can always come up with a variation of these questions.

If you are an interviewee: make sure you understand the difference so that you can answer any variation of these questions.

Question 1 - var

a) What will be the results of console.log below?

var fruit = 'apple'

{
  var fruit = 'orange'
  console.log(fruit) // ??
}

console.log(fruit) // ??

Answer

var fruit = 'apple'

{
  var fruit = 'orange'
  console.log(fruit) // orange
}

console.log(fruit) // orange

Why?

var does not respect block scopes {}.

b) What is the execution scope of the code?

Global namespace / window object.

c) Can you access the global variable via window object?

Yes, global variables can be accessed as properties on the window object. Here, our fruit can be accessed by window.fruit.

d) What is the output of the console.log below?

var fruit = 'apple'

function gimmeFruit() {
  var fruit = 'orange'
  console.log(fruit) // ??
}

console.log(fruit) // ??
gimmeFruit()

Answer

var fruit = 'apple'

function gimmeFruit() {
  var fruit = 'orange'
  console.log(fruit) // orange
}

console.log(fruit) // apple
gimmeFruit()

Why?

var respects function scopes. So the var inside the function is limited to the scope of the function, while the var outside the function is in the global namespace.

Question 2 - let

a) What is the output of the console.logs below?

let fruit = 'apple'

{
  let fruit = 'orange'
  console.log(fruit) // ??
}

console.log(fruit) // ??

Answer

let fruit = 'apple'

{
  let fruit = 'orange'
  console.log(fruit) // orange
}

console.log(fruit) // apple

Why?

let respects block scopes. This means the two fruit variables are two different variables.

Question 3 - Variation

a) What would happen in the following?

let fruit = 'apple'
let fruit = 'orange'
console.log(fruit)

Answer

let fruit = 'apple'
let fruit = 'orange' // SyntaxError: Identifier 'fruit' has already been declared
console.log(fruit)

b) Redeclaring let fails, as shown above. But how come redeclaring a var object works?

var fruit = 'apple'
var fruit = 'orange'

Answer

var has a concept of hoisting.

When you declare something using var, it first initializes the variables with the value of undefined to the top of the scope.

So this means that

var fruit = 'apple'
var fruit = 'orange'

is equal to

var fruit = undefined // place at the top of the scope. In this case, the global scope.
fruit = 'apple'
fruit = 'orange'

c) What is the console.log output of the following?

b = 25
var b
console.log(b) // ??

Answer

b = 25
var b
console.log(b) // 25

Why?

Due to the hoisting concept, the code above is equal to

var b = undefined // placed at the top of the scope
b = 25 // variable assignment
console.log(b) // 25

d) What is the console.log output of the following?

console.log(bar) // ??
var bar = 111
console.log(bar) // ??

Answer

console.log(bar) // undefined
var bar = 111
console.log(bar) // 111

e) What is the console.log output of the following?

var bar
console.log(bar) // ??
bar = 111
console.log(bar) // ??

Answer

var bar
console.log(bar) // undefined
bar = 111
console.log(bar) // 111

Question 4 - const

a) What is the output of the console.log below?

const fruit = 'apple'

{
  const fruit = 'orange'
  console.log(fruit) // ??
}

console.log(fruit) // ??

Answer

const fruit = 'apple'

{
  const fruit = 'orange'
  console.log(fruit) // orange
}

console.log(fruit) // apple

Why?

const respects block scoping.

b) What happens in the code below?

{
  const fruit = 'apple'
  fruit = 'orange'
  console.log(fruit)
}

Answer

{
  const fruit = 'apple'
  fruit = 'orange' // TypeError: Assignment to constant variable.
  console.log(fruit)
}

Why?

const variable values cannot be changed.

c) If const values cannot be changed, why does the following work?

const fruit = {}
fruit.color = 'red'

Answer

The “restriction” of const values do not do a deep equal, which means you could change the property values of fruit, but not the value of fruit itself.

That’s all. Hope you learned something.

Happy learning :)