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.

Learn Python, JavaScript, Java and more with free interactive lessons, real projects and AI-powered help. Beginner-friendly.

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.

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

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

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.

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

Array Destructuring

Rest Operator in Destructuring

Renaming Variables

Default Values

Combine Arrays

Copy Arrays

Spread in Objects

Template literals replaced the messy + string concatenation system.

String Interpolation

Multiline Strings

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

Implicit return

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

Shorthand Properties

Method Shorthand

If any layer is missing → returns undefined safely.

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

Export

Import

Modules allow clean project structure for real apps.

Modern, cleaner way to write object-oriented JS:

React Components

Node.js APIs

Game Logic

Data Cleaning

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.

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

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.