🚀 Day 31 — ES6+ Advanced Features in JavaScript

Hi Guys Welcome to Day 31 of your JavaScript course 🎯 From this point on, you’re officially entering **modern JavaScript (ES6 and beyond)** — the version that powers all frameworks like React, Vue, and Angular. These updates made JavaScript cleaner, faster, and easier to work with. Today, you’ll learn about let/const, arrow functions, template literals, destructuring, spread/rest operators, and default parameters.

🧩 1️⃣ let & const vs var

Before ES6, we only had var — but it caused issues with scope and redeclaration. Now, let and const solve those problems beautifully.

var x = 10;
let y = 20;
const z = 30;

// var can be redeclared
var x = 50; 

// let and const cannot
// let y = 60; ❌
// const z = 70; ❌

✅ let → used for variables that change. ✅ const → used for constants that don’t change. ✅ var → avoid it in modern JavaScript.

⚡ 2️⃣ Arrow Functions

Arrow functions make function syntax shorter and cleaner.

// Regular function
function greet(name) {
  return "Hello, " + name;
}

// Arrow function
const greetArrow = (name) => "Hello, " + name;

console.log(greetArrow("Rahul"));

They also don’t have their own this, which is helpful in callbacks and event listeners.

🧠 3️⃣ Template Literals

String concatenation can be messy with + signs. Template literals use backticks (`) for cleaner multi-line and embedded variables.

const user = "Aisha";
const course = "JavaScript";

console.log(`Welcome ${user}! You’re learning ${course} today.`);

📦 4️⃣ Destructuring

Destructuring lets you extract values from arrays or objects directly.

const userInfo = { name: "Rahul", age: 22, city: "Hyderabad" };

// Object Destructuring
const { name, age } = userInfo;
console.log(name, age);

// Array Destructuring
const colors = ["red", "green", "blue"];
const [first, , third] = colors;
console.log(first, third);

🌊 5️⃣ Spread & Rest Operators

These three dots (...) are magic in JavaScript — they spread or collect values.

// Spread
const arr1 = [1,2,3];
const arr2 = [4,5,6];
const combined = [...arr1, ...arr2];
console.log(combined);

// Rest
function sum(...nums) {
  return nums.reduce((a,b)=>a+b,0);
}
console.log(sum(1,2,3,4));

⚙️ 6️⃣ Default Parameters

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

🎯 Summary

You’ve now entered the ES6 world — where code becomes concise and readable. Today’s concepts like destructuring, arrow functions, and spread operators are foundational in every framework.

← Prev Next →