ES6+ Features Deep Dive

🎯 Objective

By the end of this lesson, you will:

• Understand key ES6+ (modern JavaScript) features.
• Write cleaner, more efficient code using let/const, arrow functions, template literals, and more.
• Use ES6+ syntax confidently in modern web apps and React components.

---

🧠 What is ES6+?

ES6+ refers to versions of JavaScript released after ECMAScript 6 (2015) — including ES7, ES8, and beyond.

These modern features help you:

✅ Write less code
✅ Make code easier to read and maintain
✅ Work seamlessly with tools like React

---

📦 Why Modern JavaScript Matters

• 🧠 Most React code relies heavily on ES6+ features.
• 🧼 Code is cleaner and more expressive.
• 🚀 Tools like Babel and webpack ensure older browsers can still run it.
• 💼 ES6+ is the industry standard — knowing it is essential for jobs.

---

🚀 Core Features to Know

1. let and const (Block Scoping)

let count = 5;       // can be reassigned
const name = "Sam";  // cannot be reassigned

✅ let replaces var for mutable values
✅ const is used for values that shouldn’t change

---

2. Arrow Functions

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

// Arrow
const greet = (name) => `Hello ${name}`;

✅ Shorter syntax
✅ Automatically binds this in many cases (important in React)

---

3. Template Literals

const name = "Taylor";
const greeting = `Welcome back, ${name}!`;

✅ Use backticks (`)
✅ Embed expressions with ${}
✅ Great for building dynamic UIs

---

4. Destructuring

const user = { name: "Luna", age: 25 };
const { name, age } = user;

console.log(name); // "Luna"

✅ Pulls properties directly from arrays/objects
✅ Cleaner access to props/state in React

---

5. Default Parameters

function sayHi(name = "Guest") {
  console.log(`Hi, ${name}`);
}

✅ Sets fallback values for function arguments

---

6. Spread and Rest Operators (...)

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

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

✅ Spread: Copy or combine arrays/objects
✅ Rest: Handle multiple function arguments

---

7. Array Methods: map, filter, find

const nums = [1, 2, 3, 4];
const doubled = nums.map(n => n * 2); // [2, 4, 6, 8]

✅ Essential for rendering lists in React (.map)
✅ Modern, functional way to handle arrays

---

🧪 Example: Refactor with ES6+

Before (Old JS):

var user = {
  name: "Zoe",
  age: 30
};
function greet(user) {
  return "Hello, " + user.name;
}

After (Modern JS):

const user = {
  name: "Zoe",
  age: 30
};

const greet = ({ name }) => `Hello, ${name}`;

---

🛠 Suggested Activities

✏️ Activity 1: Convert to Arrow Functions

Take a few traditional functions and rewrite them using arrow syntax.

---

🔍 Activity 2: Use Destructuring

Create an object and write a function that pulls out specific values using object destructuring.

---

📦 Activity 3: Practice Spread and Rest

• Combine two arrays using the spread operator.
• Write a function that accepts any number of arguments using rest.

---

🔁 Recap

Feature	Use Case
let/const	Safer, scoped variables
Arrow functions	Cleaner syntax, auto-binding this
Template literals	Easy string formatting
Destructuring	Extract data from objects/arrays
Spread / Rest	Clone, merge, or handle multiple values
map, filter	Functional array handling

---

❓ Reflection Questions

• When should you use let vs const?
• How does destructuring simplify code?
• What’s the difference between spread and rest?

---

📚 Further Practice & Resources

• 🔍 MDN: ES6 Guide
• 🔧 JavaScript.info ES6+
• 🎮 ES6 Challenges on freeCodeCamp

---

✅ Action Step

Refactor a basic to-do app or calculator using:

• const, let
• arrow functions
• template literals
• .map() to display a list
• destructuring for props or state (if using React)