JavaScript ES6 Features Explained

Arrow Functions

Arrow functions give you a shorter syntax and, more importantly, they don't create their own `this` binding — they inherit it from the surrounding scope. That second part solves one of the most common bugs in pre-ES6 JavaScript.

// Before function add(a, b) { return a + b; }

// ES6 const add = (a, b) => a + b;

Template Literals

Before ES6, building a string with variables meant chaining a lot of `+` operators. Template literals use backticks and let you embed expressions directly with `${}`.

const name = "Aditi"; console.log(`Welcome, ${name}! You have ${5 + 2} new messages.`);

They also support multi-line strings without needing `\n` escape characters, which makes generating HTML strings in JavaScript far more readable.

Destructuring

Destructuring lets you pull values out of arrays and objects in a single line instead of accessing them one property at a time.

const user = { name: "Rahul", age: 24 }; const { name, age } = user;

const [first, second] = [10, 20];

This is used constantly in React, where you'll destructure props and state on almost every component: `const { title, onClick } = props;`

The Spread and Rest Operators

The spread operator (`...`) expands an array or object into individual elements, which is the standard way to copy or merge data immutably in modern JavaScript:

const original = [1, 2, 3]; const copy = [...original, 4];

const settings = { theme: "dark", ...userOverrides };

The same `...` syntax, used in a function parameter list, becomes the rest operator — collecting remaining arguments into an array instead.

Classes and Promises

ES6 introduced `class` syntax as a cleaner way to write constructor functions and prototypes, making object-oriented JavaScript far more approachable for developers coming from Java or Python.

ES6 also standardized Promises, giving JavaScript a proper way to handle asynchronous operations without deeply nested callbacks ("callback hell"). Promises are the foundation that `async`/`await` — introduced later in ES2017 — is built on top of.