Modern JavaScript – ES6+ Features You Should Know

Unlocking the Power of ES6+ in JavaScript

With the release of ECMAScript 2015 (commonly known as ES6) and subsequent updates (ES7 through ES2024+), JavaScript has evolved dramatically. These modern features make your code more readable, concise, and powerful. In this module, we’ll explore the most impactful and commonly used features introduced in ES6 and beyond.

Table of Contents

1. Let and Const
2. Arrow Functions
3. Template Literals
4. Destructuring
5. Spread and Rest Operators
6. Default Parameters
7. Enhanced Object Literals
8. For…of Loops
9. Map and Set
10. Classes and Inheritance
11. Promises and Async/Await
12. Optional Chaining and Nullish Coalescing
13. Modules (import/export)
14. Conclusion

1. let and const (Block Scoping)

These replace var and provide more predictable scoping.

let x = 10;
const y = 20;

x = 15;  // ✅ allowed
// y = 25; ❌ Error: Assignment to constant variable

Use const by default unless reassignment is needed.

2. Arrow Functions

Shorter syntax and lexical this.

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

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

Arrow functions do not have their own this, arguments, or super.

3. Template Literals

Allows string interpolation and multiline strings.

const name = "Sysoi";
console.log(`Welcome to ${name} platform!`);

4. Destructuring

Extract values from arrays or objects easily.

javascriptCopyEditconst user = { name: "Ravi", age: 30 };
const { name, age } = user;

const arr = [1, 2, 3];
const [a, b] = arr;

5. Spread and Rest Operators

Spread (...) – expands values

const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4]; // [1, 2, 3, 4]

Rest (...) – collects remaining items

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

6. Default Parameters

Assign default values to function arguments.

function greet(name = "Guest") {
  console.log(`Hello, ${name}`);
}

7. Enhanced Object Literals

Simplify object creation:

let age = 25;
const user = {
  name: "Amit",
  age,         // shorthand
  greet() {    // shorthand method
    console.log("Hi!");
  },
};

8. For…of Loop

Iterate over iterable objects like arrays:

for (let value of [1, 2, 3]) {
  console.log(value);
}

Unlike for...in, this does not iterate over object properties.

9. Map and Set

Map – key-value pairs (any type as key)

const map = new Map();
map.set("name", "Ravi");
console.log(map.get("name"));

Set – unique values only

const set = new Set([1, 2, 2, 3]);
console.log(set); // Set {1, 2, 3}

10. Classes and Inheritance

Syntax sugar over prototype-based inheritance.

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a sound`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks`);
  }
}

11. Promises and Async/Await

Promises:

fetch("https://api.example.com/data")
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

Async/Await:

async function getData() {
  try {
    const res = await fetch("https://api.example.com/data");
    const data = await res.json();
    console.log(data);
  } catch (err) {
    console.error(err);
  }
}

12. Optional Chaining & Nullish Coalescing

Optional Chaining (?.)

let user = {};
console.log(user?.address?.city); // undefined

Nullish Coalescing (??)

let name = null;
console.log(name ?? "Guest"); // "Guest"

13. Modules: import/export

Break code into reusable files.

// math.js
export const add = (a, b) => a + b;

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

14. Conclusion

ES6+ features make JavaScript more expressive, modern, and easier to manage. These are now the standard, so make sure you’re using them in your day-to-day development.

Next up: Error Handling in JavaScript – we’ll dive into try...catch, throw, custom error objects, and debugging tips.