Es6

ES6 (ECMAScript 2015) and later versions are modern updates to JavaScript that add features like let / const , arrow functions, template literals, destructuring, classes, and modules to write cleaner, more powerful code.

Part of the free JavaScript course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

What You'll Learn in This Lesson

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

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

🌟 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:

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.

Array Destructuring

Rest Operator in Destructuring

Object Destructuring

Renaming Variables

Default Values

🚀 2. The Spread Operator (...)

Combine Arrays

Copy Arrays

Spread in Objects

🧵 3. Template Literals

Template literals replaced the messy + string concatenation system.

String Interpolation

Multiline Strings

⚙️ 4. Default Parameters

🏹 5. Arrow Functions

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

Arrow Function Features

Implicit return

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

🏗️ 6. Enhanced Object Literals

Shorthand Properties

Method Shorthand

🔗 7. Optional Chaining (?.)

If any layer is missing → returns undefined safely.

🌫️ 8. Nullish Coalescing (??)

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

🔄 9. Rest Parameters

💾 10. Modules (import/export)

Export

Import

Modules allow clean project structure for real apps.

😎 11. Classes (ES6 OOP Syntax)

Modern, cleaner way to write object-oriented JS:

🎮 Real Examples (Modern Apps Use These Daily)

React Components

Node.js APIs

Game Logic

Data Cleaning

📘 Best Practices for ES6+

🧠 Mini-Projects with ES6+

1. Create a user profile builder

2. Build a settings manager

3. Build a mini calculator object

4. Create a safe API fetcher

Use optional chaining and nullish coalescing.

🎯 Practice Challenge

🏁 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

const {name} = user;

Spread

[...oldArr, 4, 5]

Template Literal

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! ⏳

Practice quiz

What does const [a, b, ...rest] = [1, 2, 3, 4, 5] make rest equal to?

The rest element collects all remaining values after a and b into a new array: [3, 4, 5].

What is the result of [...[1, 2], ...[3, 4]]?

Spread expands both arrays into a single combined array [1, 2, 3, 4].

Given const base = { a: 1, b: 2 }, what is { ...base, c: 3 }?

  • { a: 1, b: 2 }
  • { c: 3 }
  • { a: 1, b: 2, c: 3 }
  • An error

Answer: { a: 1, b: 2, c: 3 }. Object spread copies base's properties and adds c, producing { a: 1, b: 2, c: 3 }.

With const double = x => x * 2, what does double(5) return?

  • 5
  • 10
  • 25
  • undefined

Answer: 10. The arrow function has an implicit return of x * 2, so double(5) is 10.

What does the rest-parameter sum from sum(...nums) return for sum(1, 2, 3, 4, 5)?

  • 120
  • 15

Answer: 15. Rest parameters collect arguments into an array, and reduce sums them to 15.

With const greet = (name = 'Guest') => , what does greet() return?

  • Hello, !
  • Hello, undefined!
  • Hello, Guest!
  • An error

Answer: Hello, Guest!. When no argument is passed, the default parameter 'Guest' is used.

What does undefined ?? 'Guest' evaluate to?

  • undefined
  • null
  • Guest
  • false

Answer: Guest. Nullish coalescing returns the right side when the left is null or undefined, so it returns 'Guest'.

How does ?? differ from || when defaulting?

  • They are identical
  • ?? only falls back for null/undefined, while || falls back for any falsy value
  • || only falls back for null/undefined
  • ?? falls back for any falsy value

Answer: ?? only falls back for null/undefined, while || falls back for any falsy value. The lesson notes ?? treats only null/undefined as empty, while || treats 0 and '' as falsy too.

Given const person = { name: 'Alice', age: 30 }, what does const { name: username } = person assign to username?

  • 'Alice'
  • 'username'
  • 30
  • undefined

Answer: 'Alice'. This renames the destructured name property to the variable username, which holds 'Alice'.

What does optional chaining like data?.user?.address?.city return if address is missing?

  • null
  • An error is thrown
  • undefined
  • An empty string

Answer: undefined. Optional chaining short-circuits and returns undefined safely when any link is missing.

Continue this course