ES6+ Modern JavaScript Features

JavaScript ES6+ Features and Modern Syntax

With the release of ES6 (ECMAScript 2015) and beyond, JavaScript became more powerful, readable, and developer-friendly. These modern features are essential for writing clean, maintainable code in today's JavaScript ecosystem.

1. let and const

• let: Block-scoped variable, can be reassigned
• const: Block-scoped constant, cannot be reassigned

let score = 10;
const name = "Alice";

2. Arrow Functions

Shorter function syntax with implicit this binding.

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

3. Template Literals

Multi-line and dynamic strings using backticks and ${} syntax.

const greeting = `Hello, ${name}`;

4. Default Parameters

Set default values in function arguments.

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

5. Destructuring

Extract values from arrays or objects.

const [a, b] = [1, 2];
const { title, author } = book;

6. Spread and Rest Operators

• Spread (...) expands values.
• Rest (...) gathers values into an array.

const nums = [1, 2, 3];
const copy = [...nums];

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

7. Object Property Shorthand

const name = "Bob", age = 25;
const user = { name, age };

8. Enhanced Object Literals

Dynamic keys and method definitions.

const prop = "score";
const obj = {
  [prop]: 100,
  greet() {
    return "Hi!";
  }
};

9. Modules (import/export)

Modularize code using import and export.

// utils.js
export const PI = 3.14;

// app.js
import { PI } from './utils.js';

10. Classes and Inheritance

Object-oriented syntax for constructor functions.

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

class Dog extends Animal {
  bark() {
    return "Woof!";
  }
}

11. Promises and Async/Await

Handle asynchronous code with cleaner syntax.

async function fetchData() {
  const res = await fetch("url");
  const data = await res.json();
}

12. Optional Chaining and Nullish Coalescing

Avoid runtime errors and set fallback values.

const name = user?.profile?.name;
const age = user.age ?? 18;

13. for...of Loop

Iterate over iterable objects like arrays.

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

14. Map, Set, WeakMap, WeakSet

New collection types for unique needs.

const ids = new Set([1, 2, 3]);
const map = new Map([['name', 'Alice']]);

Summary

ES6+ made JavaScript more powerful and expressive. By mastering modern syntax such as arrow functions, template literals, destructuring, and async/await, you’ll write cleaner, faster, and more scalable code.

These features are not just nice-to-have—they are essential in modern development with React, Node.js, TypeScript, and beyond.