Stop 03 · HTML, CSS & JavaScript EssentialsTopics · 9/11

ES6+ Features

Part of the Full Stack Developer Roadmap

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.

Modern JavaScript syntax — destructuring, template literals, spread/rest, optional chaining — that both your React frontend and Node backend code will lean on constantly.

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 using each.
2Practice optional chaining (`?.`) and nullish coalescing (`??`) — they prevent a lot of defensive code.
3Rewrite an older piece of code using modern syntax throughout.