Lesson 7 • Intermediate

ES6+ Features (Modern JavaScript Mastery)

What You'll Learn in This Lesson

✓Destructure arrays and objects cleanly
✓Spread and rest operators (...)
✓Template literals and multiline strings
✓Arrow functions and implicit returns
✓Optional chaining (?.) and nullish coalescing (??)
✓ES6 modules, classes, and modern syntax

💡 Running Code Locally: While this online editor runs real JavaScript, some advanced examples may have limitations. For the best experience:

Download Node.js to run JavaScript on your computer
Use your browser's Developer Console (Press F12) to test code snippets
Create a .html file with <script> tags and open it in your browser

🚀 Real-World Analogy: ES6+ is like upgrading from a flip phone to a smartphone:

• Same core purpose (making calls / writing code)
• But with way more features that make life easier
• Once you learn the new features, you'll never go back!

🌟 Introduction to Modern JavaScript (ES6+)

JavaScript changed forever in 2015 with the release of ECMAScript 2015 (ES6). Since then, dozens of new features have been added, making JavaScript more:

ES6+ Feature	What It Does	Why It Matters
Arrow Functions	Shorter function syntax	Cleaner, more readable code
Destructuring	Extract values easily	Less boilerplate code
Template Literals	String interpolation	Easier string building
Spread/Rest	Expand or collect values	Flexible data handling
Modules	Import/export code	Organized, reusable code

Modern JavaScript is what developers use today for:

Websites
Full-stack apps
Mobile apps
Games
APIs
AI projects
Browser extensions
Desktop apps

This lesson teaches you every major ES6+ feature with real examples, in-depth explanations, best practices, and practical exercises.

By the end of this lesson, you'll write code like a real modern JavaScript engineer.

🔥 1. Destructuring (Arrays & Objects)

Destructuring lets you unpack values from arrays and objects into clean variables.

Instead of:

const arr = [1, 2, 3];
const a = arr[0];
const b = arr[1];

We can write:

const [a, b] = [1, 2];

Array Destructuring

const numbers = [10, 20, 30, 40];
const [first, second] = numbers;

console.log(first);  // 10
console.log(second); // 20

Rest Operator in Destructuring

const [a, b, ...rest] = [1, 2, 3, 4, 5];
console.log(rest); // [3,4,5]

Object Destructuring

const person = {
    name: "Alice",
    age: 30,
    city: "New York"
};

const { name, age } = person;

Renaming Variables

const { name: username } = person;
console.log(username);

Default Values

const { country = "USA" } = person;

🚀 2. The Spread Operator (...)

Spread "expands" arrays or objects.

Combine Arrays

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

Copy Arrays

const copy = [...arr1];

Spread in Objects

const base = { a: 1, b: 2 };
const extended = { ...base, c: 3 };

🧵 3. Template Literals

Template literals replaced the messy + string concatenation system.

String Interpolation

const name = "Alice";
const greeting = `Hello, ${name}!`;

Multiline Strings

const text = `
  Line 1
  Line 2
  Line 3
`;

⚙️ 4. Default Parameters

Allows fallback values:

function greet(name = "Guest", role = "User") {
    return `Hello ${name}, your role is ${role}.`;
}

🏹 5. Arrow Functions

Arrow functions are cleaner, shorter, and preferred in modern JS.

Regular function

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

Arrow function

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

Arrow Function Features

Implicit return

const double = x => x * 2;

No own this

Great for callbacks (React, event handlers, arrays).

🏗️ 6. Enhanced Object Literals

Shorthand Properties

const x = 10, y = 20;
const point = { x, y };

Method Shorthand

const math = {
  add(a,b){ return a+b; }
};

🔗 7. Optional Chaining (?.)

Prevents crashes when accessing deep values.

const city = data?.user?.address?.city;

If any layer is missing → returns undefined safely.

🌫️ 8. Nullish Coalescing (??)

Better defaulting than ||

const username = input ?? "Guest";

|| treats empty strings or 0 as "false",
?? treats only undefined or null as empty.

🔄 9. Rest Parameters

Collect an unlimited number of arguments:

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

💾 10. Modules (import/export)

Export

export function greet(){}

Import

import { greet } from './utils.js';

Modules allow clean project structure for real apps.

😎 11. Classes (ES6 OOP Syntax)

Modern, cleaner way to write object-oriented JS:

class Person {
  constructor(name){
    this.name = name;
  }
}

🎮 Real Examples (Modern Apps Use These Daily)

React Components

const Component = ({ title="Untitled", items=[] }) => (
   <div>
      <h1>{title}</h1>
      {items.map(i => <p>{i}</p>)}
   </div>
);

Node.js APIs

app.get("/user", (req,res) => {
   res.json({ message: "Hello!" });
});

Game Logic

const player = { ...defaultStats, hp: 200 };

Data Cleaning

const clean = users
   .filter(u => u.active)
   .map(u => u.name);

Modern JS is everywhere.

📘 Best Practices for ES6+

✔️ Always use const or let

Never use var.

✔️ Use arrow functions for callbacks

Cleaner + no this binding issues.

✔️ Destructure parameters

function greet({name}){...}

✔️ Spread when copying arrays & objects

Never mutate original data.

✔️ Use template literals for all strings

Cleaner + supports embedding.

✔️ Optional chaining for safe access

Avoids crashes in large apps.

🧠 Mini-Projects with ES6+

1. Create a user profile builder

Use:

destructuring
template literals
object spreading
arrow functions

2. Build a settings manager

Using default parameters + object spread:

const defaultConfig = {...}

3. Build a mini calculator object

Using method shorthand.

4. Create a safe API fetcher

Use optional chaining and nullish coalescing.

ES6+ Features Practice

Master modern JavaScript with destructuring, spread, arrow functions, and more!

Try it Yourself »

JavaScript

// ES6+ Features Practice

// Destructuring
const user = { name: "Alice", age: 30, city: "NYC" };
const { name, age } = user;
console.log(`${name} is ${age} years old`);

// Array destructuring
const colors = ["red", "green", "blue"];
const [first, second] = colors;
console.log("First color:", first);

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

// Object spread
const defaults = { theme: "dark", lang
...

🎯 Practice Challenge

Try to complete all:

1️⃣ Use destructuring - Extract values from: an array, an object, a nested object
2️⃣ Combine arrays using spread - Create combined = [...a,...b].
3️⃣ Use template literals - Create a multi-line formatted message.
4️⃣ Write three arrow functions - multiply, square, convert minutes → seconds
5️⃣ Use default parameters - Create a function with 2 defaults.
6️⃣ Use optional chaining - Access a nested property safely.

🏁 End of Lesson 7

This completes your modern JavaScript fundamentals. Once you master ES6+, you can build real apps confidently.

📋 Quick Reference — ES6+ Features

Feature	Syntax Example
Arrow Function	`(a,b) => a+b`
Destructuring	`const {name} = user;`
Spread	`[...oldArr, 4, 5]`
Template Literal	`ID: ${id}`
Optional Chain	`user?.address?.city`

Lesson 7 Complete — ES6+ Modern JS!

You've leveled up! You now write modern, clean, efficient JavaScript using features that professional developers use every day.

Up next: Async/Await — learn how to handle long-running tasks without freezing your app! ⏳