ES6+ Modern JavaScript

// var is function-scoped, not block-scoped
if (true) {
  var x = 10;
}
console.log(x); // 10 — leaked out of the if block!

// let and const are block-scoped
if (true) {
  let y = 10;
  const z = 20;
}
console.log(y); // ReferenceError — y is not defined

const name = 'Alice';
const age = 28;

// Old way
const msg = 'Hello, ' + name + '! You are ' + age + ' years old.';

// Template literal
const msg = `Hello, ${name}! You are ${age} years old.`;

const html = `
  <div class="card">
    <h2>${title}</h2>
    <p>${description}</p>
  </div>
`;

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

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

// With a body
const greet = (name) => {
  const message = `Hello, ${name}!`;
  return message;
};

// Single parameter — parentheses optional
const double = n => n * 2;

function createUser(name, role = 'viewer', active = true) {
  return { name, role, active };
}

createUser('Alice');              // { name: 'Alice', role: 'viewer', active: true }
createUser('Bob', 'admin');       // { name: 'Bob', role: 'admin', active: true }

function sum(...numbers) {
  return numbers.reduce((total, n) => total + n, 0);
}

sum(1, 2, 3, 4); // 10

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

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 }; // { a: 1, b: 2, c: 3 }

const name = 'Alice';
const age = 28;

// Old way
const user = { name: name, age: age };

// Shorthand — when key and variable name match
const user = { name, age };

// Computed property names
const field = 'email';
const user = { [field]: 'alice@example.com' };
// { email: 'alice@example.com' }

// Method shorthand
const calc = {
  add(a, b) { return a + b; },
  subtract(a, b) { return a - b; },
};

// utils.js
export function formatDate(date) {
  return date.toLocaleDateString();
}

export const API_URL = 'https://api.example.com';

export default function fetchData(endpoint) {
  return fetch(`${API_URL}/${endpoint}`).then(r => r.json());
}

// app.js
import fetchData, { formatDate, API_URL } from './utils.js';

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

  speak() {
    return `${this.name} says ${this.sound}!`;
  }
}

class Dog extends Animal {
  constructor(name) {
    super(name, 'woof');
  }

  fetch(item) {
    return `${this.name} fetches the ${item}!`;
  }
}

const rex = new Dog('Rex');
rex.speak();       // "Rex says woof!"
rex.fetch('ball'); // "Rex fetches the ball!"

const cache = new Map();
cache.set('user:1', { name: 'Alice' });
cache.set('user:2', { name: 'Bob' });
cache.get('user:1');   // { name: 'Alice' }
cache.has('user:3');   // false
cache.size;            // 2

const tags = new Set(['html', 'css', 'html', 'javascript']);
console.log(tags); // Set { 'html', 'css', 'javascript' }
tags.add('react');
tags.has('html');  // true
tags.size;         // 4

const unique = [...new Set([1, 2, 2, 3, 3, 3])]; // [1, 2, 3]