JavaScript ES6 Features - Arrow Functions, Destructuring, Spread

JavaScript ES6 / ECMAScript 2015

ES6, officially called ECMAScript 2015, was one of the biggest upgrades in JavaScript history. It introduced modern syntax and language features that make JavaScript easier to write, easier to read, and better suited for large applications.

Most modern JavaScript code uses ES6 every day. If you work with React, Vue, Angular, Node.js, npm packages, bundlers, or browser APIs, you will constantly see let, const, arrow functions, template literals, destructuring, classes, modules, promises, and spread/rest syntax.

• ES6 introduced block-scoped variables with let and const.
• It added cleaner syntax for functions, strings, objects, arrays, classes, and modules.
• It made asynchronous programming easier with Promise.
• It gave JavaScript better tools for building maintainable applications.

ES6 Feature Overview

The table below summarizes the most important ES6 features and why they matter.

let, const, and Block Scope

Before ES6, JavaScript mainly used var. A var variable is function-scoped, which can create confusing bugs inside blocks and loops. ES6 added let and const, which are block-scoped. A block is the area inside curly braces, such as an if statement, loop, or function body.

Use const by default when the variable should not be reassigned. Use let when the value needs to change. Avoid var in modern JavaScript unless you are maintaining older code.

const course = "JavaScript ES6";
let lesson = 1;

if (lesson === 1) {
  const topic = "let and const";
  lesson = lesson + 1;
  console.log(topic); // let and const
}

console.log(course); // JavaScript ES6
console.log(lesson); // 2
// console.log(topic); // ReferenceError: topic is not defined

const prevents reassignment, but it does not make objects or arrays immutable. You can still change the contents of an object declared with const.

const user = {
  name: "Riya",
  role: "Student"
};

user.role = "Developer"; // allowed
user.city = "Pune";      // allowed

// user = {}; // TypeError: Assignment to constant variable

Template Literals

Template literals use backticks instead of single or double quotes. They support interpolation with ${...}, multi-line strings, and readable dynamic text. They are very useful for messages, HTML snippets, logs, and generated URLs.

const name = "Kabir";
const score = 92;

const message = `Hello ${name}, your score is ${score}%.`;
console.log(message);

const card = `
  <article class="student-card">
    <h2>${name}</h2>
    <p>Score: ${score}%</p>
  </article>
`;

Arrow Functions

Arrow functions give JavaScript a compact way to write functions. They are common in callbacks, array methods, promises, and component code. If an arrow function has one parameter, parentheses are optional. If the body is a single expression, the result is returned automatically.

const double = number => number * 2;
const add = (a, b) => a + b;

const greet = name => {
  const message = `Welcome, ${name}`;
  return message;
};

console.log(double(6));    // 12
console.log(add(10, 20));  // 30
console.log(greet("Maya"));

Arrow functions do not create their own this. Instead, they use this from the surrounding scope. This is useful in many callbacks, but arrow functions are usually not the right choice for object methods that need their own receiver.

const timer = {
  seconds: 0,
  start() {
    setInterval(() => {
      this.seconds++;
      console.log(this.seconds);
    }, 1000);
  }
};

// timer.start();

Default Parameters

Default parameters let you define fallback values directly in the function signature. This avoids extra checks inside the function body and makes intent clear.

function createUser(name = "Guest", role = "Reader") {
  return {
    name,
    role,
    active: true
  };
}

console.log(createUser());
console.log(createUser("Anika", "Admin"));

Rest Parameters

The rest parameter syntax collects remaining function arguments into an array. It is useful when a function can receive any number of values.

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

console.log(sum(5, 10));       // 15
console.log(sum(1, 2, 3, 4));  // 10

Spread Syntax

Spread syntax also uses three dots, but it expands arrays or objects instead of collecting values. Use it to copy arrays, merge arrays, pass array values as arguments, or build new objects without mutating the original.

const frontend = ["HTML", "CSS"];
const javascript = ["JavaScript", "TypeScript"];

const skills = [...frontend, ...javascript];
console.log(skills);

const user = { name: "Ishaan", role: "Student" };
const updatedUser = { ...user, role: "Developer", active: true };

console.log(updatedUser);

Array Destructuring

Destructuring extracts values from arrays or objects and assigns them to variables. Array destructuring is based on position.

const colors = ["red", "green", "blue"];

const [primary, secondary] = colors;
console.log(primary);   // red
console.log(secondary); // green

const [first, , third] = colors;
console.log(third); // blue

Object Destructuring

Object destructuring extracts values by property name. It is heavily used with function parameters, configuration objects, API responses, and imports from libraries.

const student = {
  id: 101,
  name: "Nisha",
  address: {
    city: "Hyderabad"
  }
};

const { id, name } = student;
const { address: { city } } = student;

console.log(id, name, city);

function printProfile({ name, role = "User" }) {
  console.log(`${name} works as ${role}`);
}

printProfile({ name: "Dev", role: "Frontend Engineer" });
printProfile({ name: "Sana" });

Enhanced Object Literals

ES6 improved object literal syntax. If the variable name and property name are the same, you can write the name once. You can also write methods without the function keyword and create dynamic property names with computed keys.

const name = "Task Manager";
const version = "1.0";
const dynamicKey = "createdAt";

const app = {
  name,
  version,
  [dynamicKey]: new Date().toISOString(),
  start() {
    console.log(`${this.name} started`);
  }
};

app.start();

for...of Loop

The for...of loop iterates over iterable values such as arrays, strings, maps, sets, and NodeLists. It gives you the value directly, unlike for...in, which iterates over property keys.

const languages = ["JavaScript", "Python", "PHP"];

for (const language of languages) {
  console.log(language);
}

for (const letter of "ES6") {
  console.log(letter);
}

Map and Set

ES6 introduced new collection types. A Map stores key-value pairs and allows any value to be used as a key. A Set stores unique values and automatically removes duplicates.

const scores = new Map();
scores.set("Aarav", 95);
scores.set("Meera", 88);

console.log(scores.get("Aarav")); // 95
console.log(scores.has("Meera")); // true

const tags = new Set(["js", "web", "js", "frontend"]);
console.log([...tags]); // ["js", "web", "frontend"]

Classes

ES6 classes provide a clean syntax for creating objects with shared behavior. A class is syntactic sugar over JavaScript's prototype system. It does not replace prototypes; it makes constructor functions and prototype methods easier to read.

class User {
  constructor(name, email) {
    this.name = name;
    this.email = email;
  }

  login() {
    return `${this.name} logged in`;
  }
}

const user = new User("Tara", "tara@example.com");
console.log(user.login());

Classes can also inherit from other classes using extends and call the parent constructor with super().

class Admin extends User {
  constructor(name, email, permissions) {
    super(name, email);
    this.permissions = permissions;
  }

  canEdit() {
    return this.permissions.includes("edit");
  }
}

const admin = new Admin("Rohan", "rohan@example.com", ["edit", "delete"]);
console.log(admin.login());
console.log(admin.canEdit());

Modules: import and export

ES6 modules let you split code into separate files. A module can export variables, functions, classes, or a default value. Other files can import only what they need. Modules make code easier to organize and help avoid global variables.

// math.js
export const pi = 3.14159;

export function square(number) {
  return number * number;
}

// app.js
import { pi, square } from "./math.js";

console.log(pi);
console.log(square(5));

// logger.js
export default function log(message) {
  console.log(`[App] ${message}`);
}

// app.js
import log from "./logger.js";

log("Application started");

Promises

A Promise represents the eventual result of an asynchronous operation. It starts in the pending state, then becomes fulfilled or rejected. Promises replaced many callback-heavy patterns and became the foundation for modern async JavaScript.

const loadData = new Promise((resolve, reject) => {
  const success = true;

  if (success) {
    resolve("Data loaded");
  } else {
    reject(new Error("Failed to load data"));
  }
});

loadData
  .then(result => console.log(result))
  .catch(error => console.error(error.message));

Useful ES6 String and Array Methods

ES6 also added helpful methods to strings and arrays. These methods make everyday checks and transformations cleaner.

const title = "JavaScript ES6 Tutorial";

console.log(title.startsWith("JavaScript")); // true
console.log(title.endsWith("Tutorial"));     // true
console.log(title.includes("ES6"));          // true
console.log("Hi ".repeat(3));                // Hi Hi Hi

const numbers = [5, 12, 8, 130, 44];

const firstLarge = numbers.find(number => number > 10);
const firstLargeIndex = numbers.findIndex(number => number > 10);

console.log(firstLarge);      // 12
console.log(firstLargeIndex); // 1
console.log(Array.from("ES6")); // ["E", "S", "6"]

Symbols

A Symbol is a unique primitive value. Symbols are often used as special object keys when you want to avoid accidental name conflicts.

const id = Symbol("id");

const user = {
  name: "Leena",
  [id]: 123
};

console.log(user[id]); // 123
console.log(Symbol("id") === Symbol("id")); // false

Generators

Generator functions can pause and resume execution with yield. They return an iterator, which means you can request values one at a time. Generators are useful for custom iteration, lazy sequences, and advanced async patterns.

function* idGenerator() {
  let id = 1;

  while (true) {
    yield id++;
  }
}

const ids = idGenerator();

console.log(ids.next().value); // 1
console.log(ids.next().value); // 2
console.log(ids.next().value); // 3

ES6 Practice Example

The following example combines several ES6 features in one practical piece of code: const, default parameters, destructuring, template literals, arrow functions, spread syntax, and array methods.

const students = [
  { name: "Asha", marks: 82 },
  { name: "Vikram", marks: 74 },
  { name: "Neha", marks: 91 }
];

const addGrade = ({ name, marks }, passingMarks = 75) => ({
  name,
  marks,
  status: marks >= passingMarks ? "Passed" : "Needs Practice"
});

const result = students.map(student => addGrade(student));

const topStudent = result.find(({ marks }) => marks > 90);

console.log([...result]);
console.log(`${topStudent.name} scored above 90 marks.`);

Conclusion

ES6 changed JavaScript from a small scripting language into a much more expressive language for serious application development. Once you understand let, const, arrow functions, template literals, destructuring, spread/rest syntax, classes, modules, and promises, most modern JavaScript code becomes much easier to read.

The best way to master ES6 is to use these features together. Start by replacing old var declarations, practice array and object destructuring, write small modules, and build simple examples with promises. These patterns appear everywhere in modern frontend and backend JavaScript.