ES6+ Modern Syntax

Modern JavaScript features that make coding easier.

Template Literals

const name = 'World';
const greeting = Hello, ${name}!;
// Multi-line strings
const html = 
  

    
${title}
    
${content}
  

;

Destructuring

// Array destructuring
const [first, second, ...rest] = [1, 2, 3, 4, 5];
// Object destructuring
const { name, age, city = 'Unknown' } = user;
// Function parameters
function greet({ name, age }) {
  console.log(${name} is ${age} years old);
}

Spread Operator

// Arrays
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
// Objects
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };
// Function arguments
const numbers = [1, 2, 3];
Math.max(...numbers);

Optional Chaining (?.)

const user = { profile: { name: 'John' } };
// Old way
const name = user && user.profile && user.profile.name;
// Modern way
const name = user?.profile?.name;
// With methods
user?.getName?.();
// With arrays
arr?.[0];

Nullish Coalescing (??)

const value = null ?? 'default'; // 'default'
const value = 0 ?? 'default';    // 0 (unlike ||)
const value = '' ?? 'default';   // '' (unlike ||)

Object Shorthand

const name = 'John';
const age = 30;
// Old way
const user = { name: name, age: age };
// Modern way
const user = { name, age };
// Method shorthand
const obj = {
  greet() {
    return 'Hello!';
  }
};