Here’s a comparison of different ES6 concepts that are often confused or related. Each comparison includes differences, explanations, and examples to clarify usage.
🔹 1. let vs const vs var
| Feature | var |
let |
const |
|---|---|---|---|
| Scope | Function-scoped | Block-scoped | Block-scoped |
| Reassignment | Allowed | Allowed | ❌ Not allowed |
| Hoisting | ✅ (initialized as undefined) |
✅ (but not initialized) | ✅ (but not initialized) |
Example:
function testVarLetConst() {
if (true) {
var x = 1;
let y = 2;
const z = 3;
}
console.log(x); // 1
// console.log(y); // ❌ ReferenceError
// console.log(z); // ❌ ReferenceError
}
🔹 2. Arrow Function vs Regular Function
| Feature | Arrow Function | Regular Function |
|---|---|---|
| Syntax | Concise | Verbose |
this binding |
Lexical (from parent scope) | Dynamic (depends on caller) |
| Use in classes | Not suitable for methods | Preferred |
Example:
const obj = {
name: 'ES6',
arrow: () => console.log(this.name), // undefined
regular() {
console.log(this.name); // ES6
}
};
obj.arrow(); // undefined
obj.regular(); // ES6
🔹 3. Rest vs Spread Operator
| Operator | Usage | Purpose |
|---|---|---|
... |
Function params → Rest | Collect multiple values |
... |
Arrays/objects → Spread | Spread values into another |
Example:
// Rest
function sum(...nums) {
return nums.reduce((a, b) => a + b);
}
console.log(sum(1, 2, 3)); // 6
// Spread
const arr1 = [1, 2];
const arr2 = [...arr1, 3];
console.log(arr2); // [1, 2, 3]
🔹 4. for...in vs for...of
| Loop Type | Iterates Over | Use Case |
|---|---|---|
for...in |
Keys (object props) | Objects |
for...of |
Values (iterables) | Arrays, strings, Maps, etc. |
Example:
const obj = { a: 1, b: 2 };
for (const key in obj) {
console.log(key); // a, b
}
const arr = [10, 20];
for (const value of arr) {
console.log(value); // 10, 20
}
🔹 5. Object Destructuring vs Array Destructuring
| Type | Syntax | Used For |
|---|---|---|
| Object | { key } = object |
Property access |
| Array | [value1, value2] = array |
Positional access |
Example:
const person = { name: 'Alice', age: 30 };
const [first, second] = ['a', 'b'];
const { name } = person;
console.log(name); // Alice
console.log(first); // a
🔹 6. Class vs Constructor Function
| Feature | ES6 Class | Constructor Function |
|---|---|---|
| Syntax | class keyword |
Regular function |
| Inheritance | extends and super() |
Use Object.create |
| Readability | Cleaner, more intuitive | More verbose |
Example:
// ES6 Class
class Animal {
constructor(name) {
this.name = name;
}
}
// Constructor function
function AnimalFn(name) {
this.name = name;
}
🔹 7. Promise vs Async/Await
| Feature | Promises | Async/Await |
|---|---|---|
| Syntax | .then(), .catch() |
async / await |
| Readability | More complex | Cleaner, synchronous-style |
| Error Handling | .catch() |
try...catch |
Example:
// Promise
fetch('https://api')
.then(res => res.json())
.then(data => console.log(data));
// Async/Await
async function getData() {
try {
const res = await fetch('https://api');
const data = await res.json();
console.log(data);
} catch (err) {
console.error(err);
}
}