JavaScript ES6+ Features 2026: Complete Modern JavaScript Guide

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

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

// Arrow function with multiple statements
const calculate = (x, y) => {
  const result = x * y + 10;
  return result;
};

// Arrow function with single parameter
const square = n => n * n;

// Arrow functions and 'this' binding
const person = {
  name: 'John',
  hobbies: ['reading', 'coding'],
  showHobbies() {
    this.hobbies.forEach(hobby => {
      console.log(`${this.name} loves ${hobby}`);
    });
  }
};

// String concatenation (old way)
const name = 'John';
const greeting = 'Hello, ' + name + '!';

// Template literals (new way)
const greeting = `Hello, ${name}!`;

// Multi-line strings
const message = `
  Dear ${name},
  
  Thank you for your interest in our course.
  
  Best regards,
  The Team
`;

// Tagged template literals
function highlight(strings, ...values) {
  return strings.reduce((result, str, i) => {
    return result + str + (values[i] ? `<mark>${values[i]}</mark>` : '');
  }, '');
}

const highlighted = highlight`Hello ${name}, welcome to ${'JavaScript'}!`;

// Array destructuring
const numbers = [1, 2, 3, 4, 5];
const [first, second, ...rest] = numbers;
console.log(first, second, rest); // 1, 2, [3, 4, 5]

// Object destructuring
const person = {
  name: 'John',
  age: 30,
  city: 'New York',
  country: 'USA'
};

const { name, age, city = 'Unknown' } = person;
console.log(name, age, city); // John, 30, New York

// Destructuring in function parameters
const greetUser = ({ name, age }) => {
  return `Hello ${name}, you are ${age} years old!`;
};

// Nested destructuring
const user = {
  profile: {
    name: 'John',
    address: {
      street: '123 Main St',
      city: 'New York'
    }
  }
};

const { profile: { name, address: { city } } } = user;

// Spread operator with arrays
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]

// Spread operator with objects
const person = { name: 'John', age: 30 };
const employee = { ...person, job: 'Developer' };
// { name: 'John', age: 30, job: 'Developer' }

// Rest operator in function parameters
const sum = (...numbers) => {
  return numbers.reduce((total, num) => total + num, 0);
};

sum(1, 2, 3, 4, 5); // 15

// Rest operator in destructuring
const [first, ...rest] = [1, 2, 3, 4, 5];
console.log(first, rest); // 1, [2, 3, 4, 5]

// Before ES6
function greet(name) {
  name = name || 'Guest';
  return `Hello ${name}!`;
}

// With ES6 default parameters
const greet = (name = 'Guest', age = 25) => {
  return `Hello ${name}, you are ${age} years old!`;
};

// Default parameters with destructuring
const createUser = ({ name = 'Anonymous', age = 0, role = 'user' } = {}) => {
  return { name, age, role };
};

// Default parameters with functions
const calculateTotal = (price, tax = price * 0.1) => {
  return price + tax;
};

// Promise-based approach
function fetchData() {
  return fetch('/api/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));
}

// Async/Await approach
async function fetchData() {
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

// Async arrow function
const getData = async () => {
  const response = await fetch('/api/data');
  return response.json();
};

// Parallel async operations
async function fetchMultipleData() {
  const [users, posts, comments] = await Promise.all([
    fetch('/api/users').then(r => r.json()),
    fetch('/api/posts').then(r => r.json()),
    fetch('/api/comments').then(r => r.json())
  ]);
  
  return { users, posts, comments };
}

// Before optional chaining
const city = user && user.profile && user.profile.address && user.profile.address.city;

// With optional chaining
const city = user?.profile?.address?.city;

// Optional chaining with function calls
const result = data?.method?.();

// Optional chaining with array access
const firstItem = items?.[0];

// Combining with nullish coalescing
const displayName = user?.profile?.name ?? 'Anonymous';

// Using OR operator (problematic for falsy values)
const volume = settings.volume || 0.5; // 0 becomes 0.5
const name = user.name || 'Anonymous'; // '' becomes 'Anonymous'

// Using nullish coalescing operator
const volume = settings.volume ?? 0.5; // Only null/undefined trigger default
const name = user.name ?? 'Anonymous'; // Only null/undefined trigger default

// Practical examples
const config = {
  timeout: 0,
  retries: null,
  enabled: false
};

const timeout = config.timeout ?? 1000; // 0 (keeps original value)
const retries = config.retries ?? 3; // 3 (null triggers default)
const enabled = config.enabled ?? true; // false (keeps original value)

// math.js - Named exports
export const PI = 3.14159;

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

export function multiply(a, b) {
  return a * b;
}

// Default export
export default class Calculator {
  add(a, b) {
    return a + b;
  }
}

// main.js - Importing modules
import Calculator, { PI, add, multiply } from './math.js';
import * as math from './math.js';

// Using imports
const calc = new Calculator();
console.log(calc.add(5, 3)); // 8
console.log(PI); // 3.14159
console.log(math.multiply(4, 5)); // 20

// Dynamic imports
async function loadModule() {
  const { default: Calculator } = await import('./math.js');
  const calc = new Calculator();
  return calc;
}

// Class definition
class Animal {
  constructor(name, species) {
    this.name = name;
    this.species = species;
  }
  
  // Instance method
  speak() {
    return `${this.name} makes a sound`;
  }
  
  // Static method
  static getKingdom() {
    return 'Animalia';
  }
  
  // Getter
  get description() {
    return `${this.name} is a ${this.species}`;
  }
  
  // Setter
  set setName(newName) {
    this.name = newName;
  }
}

// Inheritance
class Dog extends Animal {
  constructor(name, breed) {
    super(name, 'Dog');
    this.breed = breed;
  }
  
  speak() {
    return `${this.name} barks!`;
  }
  
  // Private method (using #)
  #wagTail() {
    return '*wags tail*';
  }
  
  showExcitement() {
    return `${this.speak()} ${this.#wagTail()}`;
  }
}

// Using classes
const dog = new Dog('Rex', 'Golden Retriever');
console.log(dog.speak()); // Rex barks!
console.log(dog.description); // Rex is a Dog

// Generator function
function* numberGenerator() {
  yield 1;
  yield 2;
  yield 3;
}

// Using generator
const gen = numberGenerator();
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2
console.log(gen.next().value); // 3
console.log(gen.next().value); // undefined

// Infinite generator
function* fibonacci() {
  let [a, b] = [0, 1];
  while (true) {
    yield a;
    [a, b] = [b, a + b];
  }
}

const fib = fibonacci();
console.log(fib.next().value); // 0
console.log(fib.next().value); // 1
console.log(fib.next().value); // 1
console.log(fib.next().value); // 2

// Generator for iteration
function* range(start, end) {
  for (let i = start; i <= end; i++) {
    yield i;
  }
}

for (const num of range(1, 5)) {
  console.log(num); // 1, 2, 3, 4, 5
}

// Use appropriate array methods
const numbers = [1, 2, 3, 4, 5];

// Good: Use map for transformation
const doubled = numbers.map(n => n * 2);

// Good: Use filter for selection
const evens = numbers.filter(n => n % 2 === 0);

// Good: Use reduce for aggregation
const sum = numbers.reduce((total, n) => total + n, 0);

// Good: Use find for searching
const found = numbers.find(n => n > 3);

// Good: Use some/every for conditions
const hasEven = numbers.some(n => n % 2 === 0);
const allPositive = numbers.every(n => n > 0);

// Avoid memory leaks
class DataProcessor {
  constructor() {
    this.data = [];
    this.processed = 0;
  }
  
  processData(items) {
    // Process in chunks to avoid memory issues
    const chunkSize = 1000;
    for (let i = 0; i < items.length; i += chunkSize) {
      const chunk = items.slice(i, i + chunkSize);
      this.processChunk(chunk);
      
      // Allow garbage collection
      if (i % 10000 === 0) {
        setTimeout(() => {}, 0);
      }
    }
  }
  
  processChunk(chunk) {
    // Process chunk
    this.data.push(...chunk.map(this.transform));
    this.processed += chunk.length;
  }
  
  transform(item) {
    return { ...item, processed: true };
  }
  
  // Cleanup method
  cleanup() {
    this.data = [];
    this.processed = 0;
  }
}