ES6+ Modern JavaScript Features

ES6+ Modern JavaScript

Destructuring, Spread, Template Literals & Safe Operators

By AI Learning Assistant  ·  JavaScript  ·  ES6+  ·  Modern Syntax

JavaScript has evolved beautifully. What used to take ten lines of clumsy code can now be written in two elegant lines. ES6 (ECMAScript 2015) and the versions that followed brought features that make our code more readable, less error prone, and genuinely fun to write. Think of it as upgrading from a bicycle to an electric scooter — you still get where you're going, but the ride is smoother and faster.

Today we will master six powerful modern features: destructuring (unpacking values like opening a gift box), spread operator (splatting arrays and objects like magic), template literals (string superpowers with backticks), default parameters (safety nets for functions), optional chaining (the save me from crashes operator), and nullish coalescing (the I know you meant zero, not undefined operator).

By the end, you will read old JavaScript and immediately see how to modernize it. You will write code that is shorter, clearer, and more professional. And you will use AI to refactor legacy code like a seasoned engineer.

Destructuring is like receiving a package and pulling out exactly what you need without unpacking everything else. Instead of writing const name = course.name three times, you write const { name, days, free } = course. It works beautifully with objects and arrays.

The spread operator ... takes an array or object and spreads its elements into a new array or object. Instead of week1.concat(week2), you write [...week1, ...week2]. It's perfect for copying arrays without mutating the original, and for merging objects.

Remember the old days of "Hello " + name + "!"? So many plus signs, so much squinting. Template literals use backticks (`) and ${variable} to embed values directly. They also preserve line breaks, making multiline strings effortless.

Instead of checking if (name === undefined) inside your function, you can assign a default value right in the parameter list. If the caller doesn't provide an argument, the default kicks in. This makes functions more robust and self documenting.

Have you ever seen Cannot read property 'name' of undefined? That crash happens when you try to access a property on something that doesn't exist. Optional chaining (?.) stops the crash and returns undefined instead. Nullish coalescing (??) gives you a default value only when something is null or undefined (not when it's 0 or false).

AI-Assisted JavaScript Learning · ES6+ Modern Features · Write Clean, Safe, Joyful Code