Stop 04 · JavaScriptTopics · 30/36

ES6+

In short

ES6 (2015) changed JavaScript a lot, and new features have landed every year since. The code you'll read on GitHub uses them everywhere, so you need to spot them on sight.

The modern JavaScript syntax introduced from ES2015 onward — arrow functions, destructuring, template literals, spread/rest, modules and more — now baseline knowledge. Modern JavaScript is more than syntax: these features provide clearer data transformation, modularity, safer scoping, concise functions, and better ways to express common patterns.

The jaadu mascot holds an old keypad phone and a new smartphone, smiling at the new one.

Think of it like this

Phone software updates

Old features keep working, but each yearly update adds shortcuts that make life easier. ES2015 was the big one, like going from a keypad phone to a smartphone. Every year since has added a few smaller treats.

Watch it happen

Spread, at() and destructuring on nums

start

1/5nums holds three numbers.

The big ideas

What you need to know

The ES6 basics

let and const, arrow functions, template literals, classes, modules and promises all arrived in 2015.

Destructuring, spread and rest

Pull values out of objects and arrays, copy them with ..., and gather leftovers into one variable.

Safer property access

?. stops at null or undefined instead of crashing. ?? gives a fallback only for those two.

Newer helpers

at(), toSorted(), findLast() and Object.groupBy() came in recent years and save you writing loops.

See it in code

Walk through the code

1const user = { name: "Sana", city: "Lucknow", address: null };2 3const { name, ...rest } = user;                   // destructuring + rest4const greeting = `Hi ${name} from ${rest.city}`;  // template literal5const pin = user.address?.pin ?? "Not given";      // optional chaining + nullish6 7const nums = [5, 12, 8];8const max = Math.max(...nums);                    // spread: 129const last = nums.at(-1);                         // 810 11const orders = [{ type: "veg" }, { type: "non-veg" }, { type: "veg" }];12const byType = Object.groupBy(orders, (o) => o.type);13console.log(byType.veg.length);                   // 2

1/4Pull name out, and gather the remaining keys into rest.

Object.groupBy is one of the newest here. Before using any recent feature in production, check browser support on caniuse.com or MDN.

Save yourself the pain

Common mistakes

Oops

Using an arrow function for every function, including object methods.

Do this instead

Arrows have no own this. Use method shorthand for object methods and arrows for callbacks.

Oops

Copying nested data with spread and then editing a nested field.

Do this instead

Spread only copies one level deep. Use structuredClone for nested objects.

Your mission

Modernise old code

~25 min

Quick check

What does this log? const [a, , b = 10] = [1, 2]; console.log(a, b);

Go deeper

1Make a checklist of ES6+ features and confirm you're comfortable with each. Validate your understanding by applying it in a small practical example.
2Rewrite an old ES5 script using modern ES6+ syntax throughout. Validate your understanding by applying it in a small practical example.
3Follow the yearly ECMAScript proposal process to know what's coming next.

Stuck on this topic? Ask an Insider

Get 1:1 guidance from people who've walked this exact path — on the InsideEdge app.

Download