17. Modern JavaScript (ES6+) Features

Why Modern JavaScript Matters

ES6 and later versions introduced powerful new syntax and features that make JavaScript code cleaner, shorter, and easier to read. Understanding these features allows you to write modern, maintainable, and efficient code.

let and const

`let` and `const` provide block-scoped variable declarations, replacing `var`. Use `const` by default, and `let` only when reassignment is needed.

const name = 'Ada';
let age = 25;
age = 26; // OK
console.log(name, age);

Arrow Functions

Arrow functions provide a compact syntax and lexically bind `this`, which is ideal for callbacks and methods.

const numbers = [1, 2, 3];
const squares = numbers.map(n => n * n);
console.log(squares); // [1, 4, 9]

Template Literals

Template literals use backticks to allow multi-line strings and interpolation with `${}`.

const name = 'Ada';
const greeting = `Hello, ${name}!
Welcome to modern JavaScript.`;
console.log(greeting);

Destructuring Assignment

Destructuring lets you unpack values from arrays or objects into variables.

const user = { name: 'Nia', age: 22 };
const { name, age } = user;
console.log(name, age); // Nia 22

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

Spread and Rest Operators

The spread operator (`...`) expands arrays or objects, while the rest operator collects remaining elements into an array.

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

function sum(...nums) {
  return nums.reduce((a, b) => a + b, 0);
}
console.log(sum(1, 2, 3)); // 6

Default Parameters

Functions can now have default parameter values, making your code cleaner and avoiding undefined errors.

function greet(name = 'Guest') {
  console.log(`Hello, ${name}!`);
}
greet('Ada'); // Hello, Ada!
greet();      // Hello, Guest!

Optional Chaining

Optional chaining (`?.`) allows you to safely access nested object properties without errors if a property doesn’t exist.

const user = { profile: { name: 'Nia' } };
console.log(user.profile?.name);      // Nia
console.log(user.account?.balance);   // undefined (no error)

Nullish Coalescing

Nullish coalescing (`??`) lets you provide default values only if the variable is `null` or `undefined`, avoiding false positives from falsy values like 0 or ''.

const input = 0;
const value = input ?? 10;
console.log(value); // 0, not 10

for...of Loops

`for...of` loops provide an elegant way to iterate over iterable objects like arrays and strings.

const fruits = ['apple', 'banana', 'cherry'];
for (const fruit of fruits) {
  console.log(fruit);
}

Modules: import/export

ES6 modules help organize code. Use `export` to share functions or objects, and `import` to bring them into other files.

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

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

Mini Challenge

1. Create a function with default parameters and call it without arguments. 2. Use optional chaining to safely log a nested property. 3. Demonstrate nullish coalescing by assigning a default value to a possibly undefined variable. 4. Iterate over an array of strings using a `for...of` loop. 5. Write a small module and import a function from it.

MDN Docs: ES6 Features

JavaScript.info: Modern JS Tutorial