ES6 (ECMAScript 2015) Basic to Advanced

ES6 (ECMAScript 2015) Basic to Advanced

ES6 (ECMAScript 2015) introduced major improvements to JavaScript, making it more powerful and developer-friendly. Here’s a structured guide from basics to advanced concepts.

?? 1. Let & Const (Block Scope)

1.1 let vs var

if (true) {
  var x = 10; // Function-scoped
  let y = 20; // Block-scoped
}
console.log(x); // ? 10
// console.log(y); ? Error: y is not defined
        

?? let is block-scoped, while var is function-scoped.

1.2 const (Immutable References)

const PI = 3.14;
// PI = 3.1415; ? Error: Assignment to constant variable
        

?? const ensures the reference can't be reassigned, but objects/arrays can still be modified.

?? 2. Template Literals (String Interpolation)

const name = "Alice";
console.log(`Hello, ${name}!`); // ? Hello, Alice!
        

?? Supports multi-line strings:

const text = `This is a
multi-line string.`;
console.log(text);
        

?? 3. Arrow Functions (Shorter Syntax)

3.1 Basic Syntax

const add = (a, b) => a + b;
console.log(add(5, 3)); // ? 8
        

3.2 Arrow Function with this

const obj = {
  name: "Alice",
  greet: function() {
    setTimeout(() => {
      console.log(`Hello, ${this.name}`);
    }, 1000);
  }
};
obj.greet(); // ? Hello, Alice
        

?? Arrow functions do not have their own this, making them useful for callbacks.

?? 4. Default Parameters

function greet(name = "Guest") {
  console.log(`Hello, ${name}!`);
}
greet(); // ? Hello, Guest!
greet("Bob"); // ? Hello, Bob!
        

?? 5. Destructuring (Arrays & Objects)

5.1 Array Destructuring

const [a, b, c] = [1, 2, 3];
console.log(a, b, c); // ? 1 2 3
        

5.2 Object Destructuring

const person = { name: "Alice", age: 25 };
const { name, age } = person;
console.log(name, age); // ? Alice 25
        

?? Can also rename variables:

const { name: userName } = person;
console.log(userName); // ? Alice
        

?? 6. Spread amp; Rest Operators (...)

6.1 Spread Operator (Expanding Arrays/Objects)

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // ? [1, 2, 3, 4, 5]
        

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 }; // ? {a:1, b:2, c:3}
        

6.2 Rest Operator (Collecting Arguments)

function sum(...numbers) {
  return numbers.reduce((acc, num) => acc + num, 0);
}
console.log(sum(1, 2, 3, 4)); // ? 10
        

?? 7. Object Property Shorthand & Computed Properties

7.1 Property Shorthand

const name = "Alice";
const age = 25;
const person = { name, age }; // ? { name: "Alice", age: 25 }
        

7.2 Computed Properties

const key = "email";
const user = { [key]: "[email protected]" };
console.log(user.email); // ? "[email protected]"
        

?? 8. Modules (Export & Import)

8.1 Exporting

Named Export:

// file: math.js
export const PI = 3.14;
export function add(a, b) {
  return a + b;
}
        

Default Export:

// file: person.js
export default class Person {
  constructor(name) {
    this.name = name;
  }
}
        

8.2 Importing

Named Import:

import { PI, add } from "./math.js";
console.log(PI, add(2, 3)); // ? 3.14, 5
        

Default Import:

import Person from "./person.js";
const user = new Person("Alice");
        

?? 9. Promises & Async/Await

9.1 Promises

const fetchData = () =>
  new Promise((resolve, reject) => {
    setTimeout(() => resolve("Data loaded"), 2000);
  });

fetchData().then(data => console.log(data)); // ? "Data loaded" after 2 sec
        

9.2 Async/Await

async function getData() {
  const data = await fetchData();
  console.log(data);
}
getData();
        

?? 10. Classes & Inheritance

10.1 Basic Class

class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log(`Hello, ${this.name}`);
  }
}
const user = new Person("Alice");
user.greet();
        

10.2 Inheritance

class Student extends Person {
  constructor(name, grade) {
    super(name);
    this.grade = grade;
  }
}
const student = new Student("Bob", "A");
console.log(student.name, student.grade); // ? Bob A
        

?? 11. Symbols (Unique Identifiers)

const sym1 = Symbol("id");
const obj = { [sym1]: 123 };
console.log(obj[sym1]); // ? 123
        

?? Useful for creating hidden properties in objects.

?? 12. Sets & Maps

12.1 Set (Unique Values)

const numbers = new Set([1, 2, 2, 3]);
console.log(numbers); // ? {1, 2, 3}
        

12.2 Map (Key-Value Pairs)

const users = new Map();
users.set("Alice", 25);
console.log(users.get("Alice")); // ? 25
        

?? 13. Optional Chaining (?.)

const user = { profile: { name: "Alice" } };
console.log(user.profile?.name); // ? "Alice"
console.log(user.address?.city); // ? undefined (instead of error)
        

?? 14. Nullish Coalescing (??)

const name = null;
console.log(name ?? "Guest"); // ? "Guest" (only replaces null/undefined)