Here is a comprehensive list of ES6 (ECMAScript 2015) concepts, each explained with clear examples:
🔹 1. let and const
Concept:
Block-scoped variables.
letis mutableconstis immutable (cannot be reassigned)
Example:
let x = 10;
x = 20; // OK
const y = 30;
// y = 40; // ❌ Error: Assignment to constant variable
🔹 2. Arrow Functions
Concept:
Shorter syntax for writing functions.
Automatically binds this from the parent scope.
Example:
const add = (a, b) => a + b;
console.log(add(2, 3)); // 5
🔹 3. Template Literals
Concept:
Allows embedded expressions and multi-line strings using backticks `.
Example:
const name = 'Alice';
const greeting = `Hello, ${name}!`;
console.log(greeting); // Hello, Alice!
🔹 4. Destructuring
Concept:
Extract values from arrays or objects.
Example:
const person = { name: 'Bob', age: 25 };
const { name, age } = person;
console.log(name); // Bob
const arr = [1, 2, 3];
const [a, b] = arr;
console.log(a); // 1
🔹 5. Default Parameters
Concept:
Set default values for function parameters.
Example:
function greet(name = 'Guest') {
console.log(`Hello, ${name}`);
}
greet(); // Hello, Guest
greet('Tom'); // Hello, Tom
🔹 6. Rest and Spread Operators
Rest Operator: Collects arguments into an array
Spread Operator: Expands elements of an array or object
Example:
// Rest
function sum(...nums) {
return nums.reduce((a, b) => a + b, 0);
}
console.log(sum(1, 2, 3)); // 6
// Spread
const arr1 = [1, 2];
const arr2 = [...arr1, 3];
console.log(arr2); // [1, 2, 3]
🔹 7. Enhanced Object Literals
Concept:
Shorthand syntax for object properties and methods.
Example:
const age = 30;
const person = {
name: 'Alice',
age,
greet() {
console.log('Hello');
}
};
person.greet(); // Hello
🔹 8. Promises
Concept:
Handles asynchronous operations.
Example:
const fetchData = () => {
return new Promise((resolve) => {
setTimeout(() => resolve('Data received'), 1000);
});
};
fetchData().then(data => console.log(data)); // Data received
🔹 9. Classes
Concept:
ES6 introduced class-based syntax for OOP.
Example:
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} makes a noise.`);
}
}
const dog = new Animal('Dog');
dog.speak(); // Dog makes a noise.
🔹 10. Modules (import/export)
Concept:
Split code into reusable modules.
Example:
// file: math.js
export function add(a, b) {
return a + b;
}
// file: app.js
import { add } from './math.js';
console.log(add(2, 3)); // 5
🔹 11. For…of Loop
Concept:
Iterates over iterable objects like arrays, strings, etc.
Example:
const colors = ['red', 'green', 'blue'];
for (const color of colors) {
console.log(color);
}
🔹 12. Map and Set
Concept:
New collection types.
Example:
// Map
const map = new Map();
map.set('key1', 'value1');
console.log(map.get('key1')); // value1
// Set
const set = new Set([1, 2, 2, 3]);
console.log(set); // Set { 1, 2, 3 }
🔹 13. Symbol
Concept:
A unique and immutable primitive used as object keys.
Example:
const sym = Symbol('id');
const obj = {
[sym]: 123
};
console.log(obj[sym]); // 123
🔹 14. Iterators and Generators
Concept:
Custom iteration logic using next() and yield.
Example:
function* gen() {
yield 1;
yield 2;
yield 3;
}
const it = gen();
console.log(it.next()); // { value: 1, done: false }