ES6 Features (ECMAScript 2015)

Before ES6, JavaScript suffered from several limitations:

• Function-level scoping using var
• Verbose string concatenation
• Poor modularity
• Limited syntax for complex data handling

ES6 resolved these issues and modernized JavaScript with cleaner syntax, better scoping, and built-in modularity.

ES6 introduced let and const as safer and more predictable alternatives to var.

Block-Scoped Variables Using let

Key characteristics of let:

• Block-scoped ({} scope)
• Cannot be redeclared in the same scope
• Prevents common bugs caused by var

let name = "Alice";

if (true) {
  let name = "Bob";
  console.log(name); // Bob
}

console.log(name); // Alice

Constants Using const

Key characteristics of const:

• Block-scoped
• Cannot be reassigned
• Objects and arrays can still be mutated

const age = 30;
// age = 31; ❌ Error

const user = { name: "Alice", age: 25 };
user.age = 26; // ✅ Allowed

Best Practices for let and const

• Use const by default
• Use let only when reassignment is required
• Avoid var

Template literals use backticks (`) and provide powerful string handling features.

String Interpolation with Template Literals

let name = "Alice";
let age = 25;

let message = `My name is ${name} and I am ${age} years old.`;
console.log(message);

Multi-Line Strings Using Template Literals

let text = `
This is line one
This is line two
`;

Destructuring allows you to extract values from arrays or objects into variables easily.

Array Destructuring Example

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

const [first, second] = colors;
console.log(first);  // red
console.log(second); // green

Object Destructuring Example

const person = { name: "Alice", age: 25, city: "New York" };

const { name, age } = person;
console.log(name); // Alice
console.log(age);  // 25

Default Values in Object Destructuring

const { country = "USA" } = person;
console.log(country); // USA

Nested Object Destructuring

const user = {
  name: "Alice",
  address: {
    city: "New York",
    zip: 10001
  }
};

const { address: { city, zip } } = user;
console.log(city); // New York

The spread and rest operators share the same syntax (...) but serve different purposes.

Spread Operator in JavaScript

The spread operator expands elements of arrays or objects.

Using Spread with Arrays

const nums = [1, 2, 3];
const newNums = [...nums, 4, 5];

console.log(newNums); // [1, 2, 3, 4, 5]

Using Spread with Objects

const person = { name: "Alice", age: 25 };
const updated = { ...person, city: "New York" };

console.log(updated);

Common Use Cases:

• Copying arrays or objects
• Merging data
• Avoiding mutation

Rest Operator in JavaScript

The rest operator collects remaining values into an array.

Rest Operator in Function Parameters

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

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

Rest Operator in Destructuring

const [first, ...rest] = [1, 2, 3, 4];
console.log(rest); // [2, 3, 4]

ES6 introduced native modules to improve code structure, reuse, and maintainability.

Exporting Modules in ES6

Named Exports

// math.js
export const pi = 3.14;
export function add(a, b) {
  return a + b;
}

Default Export

// greet.js
export default function greet(name) {
  return `Hello, ${name}!`;
}

Importing Modules in ES6

Named Import

import { pi, add } from "./math.js";
console.log(add(2, 3));

Default Import

import greet from "./greet.js";
console.log(greet("Alice"));

Renaming Imports and Exports

// export
export { add as sum };

// import
import { sum as addNumbers } from "./math.js";

ES6 modernized JavaScript by introducing:

• Safer variables (let, const)
• Cleaner syntax (template literals)
• Powerful data handling (destructuring, spread/rest)
• Native modularity (import / export)

These features are essential for modern JavaScript development and form the backbone of today’s frontend and backend frameworks.