ES6+ Features That Make Your Code Cleaner

You've actually been using several ES6 features throughout this course already — let/const, arrow functions, template-literal-style thinking, destructuring. ES6 (officially ECMAScript 2015) was the biggest single update the language ever had, and this lesson rounds up the remaining pieces worth knowing, plus ties together a couple you've seen without a full explanation.

Template Literals

Template literals, using backticks instead of quotes, let you embed variables directly inside a string instead of concatenating with +.

const name = "Vikesh Singh";
const role = "Author";

const oldWay = "Name: " + name + ", Role: " + role;
const newWay = `Name: ${name}, Role: ${role}`;

console.log(oldWay);
console.log(newWay);

Both lines print the same result, but the template literal version is far easier to read once you have more than one or two variables, and it avoids a common typo source — a missing or mismatched + sign. Template literals can also span multiple lines directly, which string concatenation with + cannot do cleanly.

const message = `Hello ${name},
Welcome back to the dashboard.`;
console.log(message);

The Spread Operator

The spread operator (...) expands an array or object into individual elements — genuinely useful for copying and combining data without mutating the original.

const heroNames = ["Tony Stark", "Vikesh Singh"];
const allNames = [...heroNames, "Natasha Romanoff"];
console.log(allNames);
console.log(heroNames);

const baseUser = { alias: "Iron Man" };
const fullUser = { ...baseUser, name: "Tony Stark" };
console.log(fullUser);

[...heroNames, "Natasha Romanoff"] creates a brand-new array containing everything from heroNames plus the new name — crucially, heroNames itself stays untouched, which matters for the same reasons covered in the array methods lesson (avoiding unexpected mutation of data other code might still rely on). The object version works the same way, and is an extremely common pattern for "take this object, but override one or two properties" without mutating the original.

Default Parameters

Default parameters let a function fall back to a sensible value when an argument is missing, instead of you writing manual undefined checks.

function greet(name = "Guest", greeting = "Hello") {
  return `${greeting}, ${name}!`;
}

console.log(greet());
console.log(greet("Tony Stark"));
console.log(greet("Tony Stark", "Welcome back"));

greet() with no arguments still works correctly, printing "Hello, Guest!" — before default parameters existed, you'd have needed something like name = name || "Guest" inside the function body, which is both more code and has its own subtle bug (it would also override a deliberately passed falsy value like an empty string or 0).

Rest Parameters

Rest parameters, using the same ... syntax as spread but in a function's parameter list, let a function accept any number of arguments as a real array.

function sumAll(...numbers) {
  return numbers.reduce((total, n) => total + n, 0);
}

console.log(sumAll(1, 2, 3));
console.log(sumAll(10, 20, 30, 40));

numbers inside sumAll is a genuine array, so every array method from lesson 6 works on it directly — this is the modern replacement for the older, clunkier arguments object that functions used to rely on.

Combining ES6 Features

Finally, template literals combine nicely with everything else you've learned, especially array methods, to build real output.

const posts = [
  { title: "JavaScript Basics", author: "Vikesh Singh" },
  { title: "Advanced CSS", author: "Tony Stark" }
];

const html = posts
  .map(post => `<li>${post.title} by ${post.author}</li>`)
  .join("");

console.log(html);

This builds a string of HTML list items from an array of objects in three readable lines — map transforms each object into a string, and join("") combines them into one final string with no separator. This exact pattern, producing an HTML string to later insert with innerHTML, is extremely common, though remember the earlier caution from the DOM lesson: only do this with data you trust, never with raw, un-sanitized user input.

A practical tip: these ES6 features aren't separate tricks to memorize in isolation — they're meant to be combined. Spread for safe copying, destructuring for pulling out exactly what you need, template literals for readable strings, default and rest parameters for flexible functions. Together they're most of what makes modern JavaScript read more cleanly than the pre-2015 style.

It's worth knowing that many of these ES6 features also work when destructuring function arguments with defaults combined, which you'll see often in real code: function createUser({ name = "Guest", role = "viewer" } = {}) accepts a whole options object, pulls out name and role with their own fallbacks, and even defaults the entire object to {} if nothing is passed in at all, so calling createUser() with zero arguments still works without throwing. This combination — destructuring plus defaults in one parameter — is extremely common in real function signatures, especially for functions that take a lot of optional configuration.

A final practical habit: when choosing between an older syntax and its ES6 equivalent, default to the ES6 version in new code, since it's now supported everywhere that matters and is generally what you'll see in current documentation, job postings, and real production codebases. Recognizing the older forms is still useful for reading legacy code, but there's rarely a reason to reach for them yourself once the newer equivalent is this widely supported.

To make this stick, try this: write a function addItem(item, list = []) that returns a new array containing all of list plus item, using the spread operator rather than push, so the original list passed in is never mutated. Then build a small array of objects and turn it into an HTML string with map, a template literal, and join, just like the example above.