JS interview in 2 minutes / var ⚔️ let ⚔️ const

Question:
What are the differences between declaring variables using var, let and const?

✨ Bonus: What is hoisting?

Quick answer:
These are a few ways to declare variables. var is a legacy one, let and const are new ones, where let is for mutable variable reference and const is for immutable reference.

Hoisting is when you use a variable before you define it.

Longer answer:
Let's start with var. Syntax is kind of straightforward.

var x = 1, y = 2;
console.log(x, y) // 1, 2

As you may guess, it is legacy for some reason. And you were right, there are even a few reasons.

For example, var declaration happens before any code execution, so you can basically use a variable in code and declare it later.

x = 2
var y = x + 1
console.log(y) // 3
var x;

It is totally weird and tricky from my point of view, because only variable definition comes before the execution, but not initialization.

var y = x + 1
console.log(x) // undefined
console.log(y) // NaN
var x = 2;

So, when you use variable before definition is called hoisting ✨ (Don't use that. Really.)

upd: hoisting is actually can be useful with function declarations, e.g. recursive functions. Take a look on this comment https://dev.to/lowla/comment/1m48f

The real issue with var is its scope. var declare variable for the current function scope, but not for the block scope. Here.

for (var i = 0; i < 5; i++) {
  setTimeout(() => console.log(i))
}

Guess what. The output is 5,5,5,5,5.

🤯🤯🤯

Ok, ok, that was dark times, and you are safe now (almost).

let and const come into play. They will work exactly as you would expect (almost). Back to the previous example.

// Notice let
for (let i = 0; i < 5; i++) {
  setTimeout(() => console.log(i))
}

The output is ok, it is 0,1,2,3,4.

So, what is the difference between let and const? Basically, let is for the variables you want to be able to update and const is for static ones.

The "almost" issue I've mentioned before is that when you use const the value isn't changeable only for some primitive types like numbers.

let a = 1
a = 2 // 👌

const b = 1
b = 2 // Error: Assignment to constant variable.

But const doesn't make complex types as arrays or objects immutable.

const y = [1]
y.push(2) // 👌
console.log(y) // [1,2]

🤷 Life is strange, yeah 🤷

Real-life applications:

So as for real life applications, there is a useful destructive assignment.

let [a, b] = [1,2,3]
console.log(a, b) // 1, 2

let [c, ...d] = [1,2,3]
console.log(c, d) // 1, [2,3]

let { e, f } = { a: 1, e: 2, f: 3 }
console.log(e, f) // 2, 3

let { g, ...h } = { a: 1, g: 2 }
console.log(g, h) // 2, { a: 1 } 

There is an especially useful case, when you need to remove some field.

let { password, ...safeUser } = user
return safeUser 

Another real-life tip is not to mutate any array or object, but it is a bit out of scope of this article.

Resources:
MDN/var
MDN/let
MDN/const

Other posts:

• JS interview in 2 minutes / Memoization 💭
• Hidden power of || and &&
• JS interview in 2 minutes / pure vs impure functions

Btw, I will post more fun stuff here and on Twitter. Let's be friends 👋