Techie BabajiLearn to Code. Build Real Skills.
Frontend track

ES6+ (Modern JavaScript) Tutorial

Modern JavaScript features from ES2015 onward: modules, classes, destructuring, async and more.

Intermediate
Start: Introduction to ECMAScript View all topics
0/23 complete
Topics
23
Full lessons
23
Est. hours
~4
Interview Qs
25

Overview

ECMAScript is the specification that defines the JavaScript language. ES6 (officially ES2015) was a major update, and new editions have been published every year since.

“Modern JavaScript” covers ES2015 and the features added afterwards, such as async/await (ES2017), optional chaining and nullish coalescing (ES2020).

What you will learn

  • Write concise code with arrow functions, destructuring and spread
  • Organise code into ES modules
  • Use classes, symbols, iterators and generators
  • Handle missing data safely with ?. and ??

Prerequisites

You will get the most from this track if you already know:

Learning path

The recommended sequence, from beginner to advanced. Each stage builds on the one before.

  1. 1Foundations · 5 topics · Beginner
    Introduction to ECMAScript · let and const · Arrow Functions · Template Literals · Default Parameters
  2. 2Working with Data · 4 topics · Beginner → Intermediate
    Destructuring · Spread Operator · Rest Parameters · Enhanced Object Literals
  3. 3Structure · 7 topics · Intermediate
    Classes · Modules · Promises · Symbols · Iterators · Generators · Map and Set
  4. 4ES2020 and Later · 5 topics · Advanced
    Optional Chaining · Nullish Coalescing · Dynamic Imports · Modern Array Methods · Async and Await
  5. 5Practice · 2 topics · Advanced
    ES6 vs Older JavaScript · Practical Examples

Complete topic list

23 topics
1

Foundations

5 topics
  1. Introduction to ECMAScriptBeginner5m
  2. let and constBeginner5m
  3. Arrow FunctionsBeginner5m
  4. Template LiteralsBeginner5m
  5. Default ParametersBeginner5m
2

Working with Data

4 topics
  1. DestructuringBeginner5m
  2. Spread OperatorIntermediate5m
  3. Rest ParametersIntermediate5m
  4. Enhanced Object LiteralsIntermediate5m
3

Structure

7 topics
  1. ClassesIntermediate5m
  2. ModulesIntermediate6m
  3. PromisesIntermediate5m
  4. SymbolsIntermediate5m
  5. IteratorsIntermediate5m
  6. GeneratorsIntermediate5m
  7. Map and SetIntermediate5m
4

ES2020 and Later

5 topics
  1. Optional ChainingAdvanced5m
  2. Nullish CoalescingAdvanced5m
  3. Dynamic ImportsAdvanced5m
  4. Modern Array MethodsAdvanced5m
  5. Async and AwaitAdvanced5m
5

Practice

2 topics
  1. ES6 vs Older JavaScriptAdvanced6m
  2. Practical ExamplesAdvanced6m

Code example

A taste of the track, from Introduction to ECMAScript.

JavaScriptFive modern features in seven lines Runnable
const user = { name: 'Asha', city: 'Pune' };
const { name, city } = user;                        // destructuring (ES2015)
const greet = n => `Hello, ${n} from ${city}!`;   // arrow + template literal (ES2015)
console.log(greet(name));


const scores = [70, 85, 90];
console.log(Math.max(...scores));                   // spread (ES2015)


console.log(user.address?.pin ?? 'no pin');         // ?. and ?? (ES2020)
Expected output
Hello, Asha from Pune!
90
no pin
Opens this example in the full playground

Practice exercises

Introduction to ECMAScript

Rewrite this ES5 code in modern syntax: var a = [1, 2]; var b = a.concat([3]); var msg = "Total items: " + b.length; console.log(msg);

let and const

Fix this so it logs 1, 2, 3 instead of 4, 4, 4: for (var n = 1; n <= 3; n++) setTimeout(() => console.log(n));

Arrow Functions

Convert to arrows: function double(n) { return n * 2; } and function toPair(k, v) { return { key: k, value: v }; }

Template Literals

Write a function card(user) that returns a multi-line string: line 1 the name in uppercase, line 2 “Age: X”, line 3 “Adult” or “Minor”.

Default Parameters

Write formatPrice(amount, { currency = "₹", decimals = 2 } = {}) that returns e.g. "₹99.50".

Destructuring

Given const point = [3, 4], swap the values into x and y using destructuring, then swap x and y with each other.

Show all 23 exercises
Spread Operator

Given const state = { user: { name: "Asha", city: "Pune" }, theme: "light" }, create a new state with city "Mumbai" without changing the original.

Rest Parameters

Write max(...nums) that returns the largest number, and use object rest to remove "id" from { id: 1, title: "Note", body: "Hi" }.

Enhanced Object Literals

Write a function handleChange(form, inputName, value) that returns a new form object with that field updated.

Classes

Create a class Counter with a private #count, methods increment() and reset(), a getter value, and a static method from(n) that returns a counter starting at n.

Modules

Create a module greetings.js with a named export hello(name) and a default export goodbye(name). Then write the import line for both in app.js.

Promises

Write timeout(promise, ms) that rejects with "Timed out" if the promise takes longer than ms.

Symbols

Create a Money class whose instances print as "₹500" in template literals and behave as 500 in arithmetic.

Iterators

Make an object countdown = { from: 3 } iterable so that [...countdown] gives [3, 2, 1].

Generators

Write a generator range(start, end, step = 1) and use it to print the even numbers from 0 to 10.

Map and Set

Given words = ["a", "b", "a", "c", "b", "a"], build a Map of word counts and print the most frequent word.

Optional Chaining

Return the first tag of a post in upper case, or "UNTAGGED" if post, post.tags or the first tag is missing.

Nullish Coalescing

Write getLimit(query) that returns query.limit if provided (even 0), otherwise 25. Then make it safe when query itself is undefined.

Dynamic Imports

Write a function openEditor() that dynamically imports "./editor.js", calls its default export with "#editor", and shows an alert if loading fails.

Modern Array Methods

Given orders = [{ id: 1, status: "paid", total: 500 }, { id: 2, status: "pending", total: 200 }, { id: 3, status: "paid", total: 300 }], group them by status and get the paid orders sorted by total (ascending) without mutating.

Async and Await

Given ids = [1, 2, 3] and getUser = id => wait(100, { id }), fetch all users in parallel and log how many were loaded.

ES6 vs Older JavaScript

Modernise: var self = this; var total = 0; items.forEach(function (item) { total = total + item.qty * item.price; }); console.log("Total: " + total);

Practical Examples

Add a remove(id, qty = 1) method to Cart that lowers the quantity and deletes the line when it reaches 0.

Common interview questions

Frequently asked questions

Is ES6 different from JavaScript?
No. ES6 is a version of the ECMAScript specification, and JavaScript is the language that implements it.