⚡ Day 19 — Modern JavaScript

⚡ Day 19 — Modern JavaScript (ES6+): Let, Const, Arrow Functions, Spread, Rest & Destructuring

Welcome to Day 19 🎉 Today we enter one of the MOST important upgrades in JavaScript history — ES6 (ECMAScript 2015) and modern JavaScript improvements. This update changed everything: cleaner code, safer variables, shorter functions, powerful array/object features, and better developer experience.

Every modern JavaScript project — React, Node.js, Angular, Vue, APIs, animations — uses ES6+ heavily. So mastering today’s topics is essential for your future JavaScript journey.

🧠 1️⃣ let & const — Modern Variable Declarations

Before ES6, JavaScript had only var. It caused many bugs due to:

• Function scope only
• Hoisting issues
• Overwriting variables accidentally

✔ let

let is block scoped and can be reassigned.

let count = 10;
count = 20; // OK

✔ const

const means the variable cannot be reassigned.

const pi = 3.14;
pi = 4; // ❌ Error

Best Practice: Use const unless you need to reassign the value → then use let.

✨ 2️⃣ Arrow Functions (=>)

Arrow functions are shorter, cleaner, and more modern than normal functions.

✔ Traditional function

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

✔ Arrow Function

const add = (a, b) => a + b;

Arrow functions are commonly used in React, arrays, events, and callbacks.

📦 3️⃣ Spread Operator (...)

Spread expands elements inside an array or object.

✔ Copying arrays

const arr1 = [1,2,3];
const arr2 = [...arr1]; // new copy

✔ Merging arrays

const a = [1,2];
const b = [3,4];
const c = [...a, ...b]; // [1,2,3,4]

✔ Spread with objects

const user = {name:"Rahul", age:22};
const updated = {...user, city:"Hyderabad"};

🧺 4️⃣ Rest Parameter (...args)

Rest collects multiple values into a single array.

Example:

function sum(...numbers) {
  return numbers.reduce((a,b) => a+b);
}

console.log(sum(1,2,3,4)); // 10

Rest = opposite of Spread.

📦 5️⃣ Destructuring (Arrays & Objects)

Destructuring allows you to extract values from arrays/objects easily.

✔ Array destructuring

const colors = ["red", "green", "blue"];

const [first, second] = colors;

console.log(first); // red

✔ Object destructuring

const user = {name:"Rahul", age:22};

const {name, age} = user;

console.log(name); // Rahul

⚡ 6️⃣ Default Parameters

Set fallback values in case no argument is provided.

function greet(name="Guest") {
  console.log("Hello " + name);
}

greet(); // Hello Guest

🧩 7️⃣ Template Literals

Cleaner string creation using backticks (``).

const name = "Rahul";
console.log(Hello ${name}, welcome!);

🧠 8️⃣ Why ES6+ Matters

• Write cleaner, more readable code
• Fewer bugs, safer variables
• Easier async programming
• Used in React, Node, Express, modern tools
• Reduces complexity in large projects

🛠 9️⃣ Mini Project — Using ES6+ to Build User Cards

const users = [
  {name:"Rahul", age:22, city:"Hyderabad"},
  {name:"Aisha", age:25, city:"Mumbai"},
];

users.forEach(({name, age, city}) => {
  console.log(${name} (${age}) — ${city});
});

🎯 Summary

Today you learned the most widely-used ES6 features that power every modern JavaScript framework and project. These features make your code simple, elegant, fast, and easier to understand. Tomorrow, we move into a major chapter — Asynchronous JavaScript (Promises & Async/Await).

← Prev Next →