This content originally appeared on DEV Community and was authored by Nikita Kozlov
Question:
What is the differences between declaring variables using var, let and const?
✨ Bonus: What is hoisting?
Quick answer:
These are all 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 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 guessed, 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 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.)
The real issue with var is it's 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 ?
This content originally appeared on DEV Community and was authored by Nikita Kozlov
Nikita Kozlov | Sciencx (2021-06-08T17:28:01+00:00) JS interview in 2 minutes / var ⚔️ let ⚔️ const. Retrieved from https://www.scien.cx/2021/06/08/js-interview-in-2-minutes-var-%e2%9a%94%ef%b8%8f-let-%e2%9a%94%ef%b8%8f-const/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.