Day 19

ES6+ Modern JavaScript

14 min
JavaScript 100 Days

ES6 (2015) ke baad JavaScript mein bohot saare modern features aaye. Yeh sab aaj ke code mein use hote hain — React, Next.js har jagah.

Spread & Rest Operator (...)

... ek hi operator hai do alag kaam karta hai — spread karna ya collect karna.

spread-rest.js
javascript
// SPREAD — expand/copy karo
let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]

let obj1 = { name: "Ali", age: 25 };
let obj2 = { ...obj1, city: "Lahore" }; // copy + add

// Array combine
let a = [1, 2], b = [3, 4];
let combined = [...a, ...b]; // [1, 2, 3, 4]

// REST — collect karo
function sum(...numbers) {
  return numbers.reduce((a, b) => a + b, 0);
}
console.log(sum(1, 2, 3, 4, 5)); // 15

function first(a, b, ...rest) {
  console.log(a, b, rest);
}
first(1, 2, 3, 4, 5); // 1 2 [3, 4, 5]

Optional Chaining (?.) & Nullish Coalescing (??)

Safe property access aur default values.

optional.js
javascript
let user = {
  name: "Zohaib",
  address: {
    city: "Lahore"
  }
};

// Without optional chaining — error prone
// console.log(user.phone.number); // ❌ TypeError!

// With optional chaining — safe
console.log(user?.phone?.number);   // undefined (no error)
console.log(user?.address?.city);   // "Lahore"

// Nullish coalescing (??)
let username = null;
let display = username ?? "Anonymous";
console.log(display); // "Anonymous"

// Different from || 
let count = 0;
console.log(count || "default");  // "default" (0 is falsy!)
console.log(count ?? "default");  // 0 (only null/undefined check)

Modules — import / export

Code ko modules mein organize karo.

math.js
javascript
// math.js — export
export const PI = 3.14159;

export function add(a, b) {
  return a + b;
}

export function multiply(a, b) {
  return a * b;
}

export default class Calculator {
  add(a, b) { return a + b; }
}

// ──────────────────────────
// main.js — import
import Calculator, { PI, add, multiply } from "./math.js";

console.log(PI);          // 3.14159
console.log(add(2, 3));   // 5
const calc = new Calculator();
console.log(calc.add(2, 3)); // 5

🎯 Practice Challenge

Ek utils.js file banao aur 5 helper functions export karo: capitalize, truncate, formatDate, randomItem, debounce.