JavaScript

const name = 'Ada'; // reassignment throws
const user = { name: 'Ada' };
user.name = 'Grace'; // fine — the binding is const, the object isn't frozen

let count = 0;
count += 1; // fine — let can be reassigned

if (true) {
  let scoped = 'inside';
  var leaky = 'also inside';
}
// scoped is not visible here — leaky is (var ignores the block)

console.log(typeof hoisted); // "undefined", not an error
var hoisted = 'declaration is hoisted, the assignment is not';

const user = { name: 'Ada', age: 36, role: 'engineer' };
const { name, age, role: title = 'member' } = user;

const [first, second, ...rest] = [1, 2, 3, 4, 5];
// first = 1, second = 2, rest = [3, 4, 5]

function greet({ name, age }) {
  return `${name} is ${age} years old`; // template literal — embeds expressions directly
}

const html = `
  <ul>
    ${['a', 'b'].map((item) => `<li>${item}</li>`).join('')}
  </ul>
`;

function makeCounter() {
  let count = 0; // captured by the closure below
  return {
    increment: () => ++count,
    value: () => count,
  };
}

const counter = makeCounter();
counter.increment();
counter.increment();
counter.value(); // 2 — each counter keeps its own private `count`

class Timer {
  seconds = 0;
  start() {
    // arrow function keeps `this` bound to the Timer instance
    setInterval(() => this.seconds++, 1000);
  }
}

function createUser(name, role = 'member') {
  // role falls back to 'member' only when the argument is undefined
  return { name, role };
}

function sum(...numbers) {
  // rest parameter — gathers any number of arguments into a real array
  return numbers.reduce((total, n) => total + n, 0);
}
sum(1, 2, 3, 4); // 10

const scores = [88, 92, 79];
Math.max(...scores); // spread — expands the array into individual arguments

const combined = [...scores, 100]; // spread also copies/extends arrays
const merged = { ...{ a: 1 }, ...{ b: 2 } }; // and objects

const orders = [
  { id: 1, total: 42, paid: true },
  { id: 2, total: 15, paid: false },
  { id: 3, total: 99, paid: true },
];

const totals = orders.map((o) => o.total); // [42, 15, 99]
const unpaid = orders.filter((o) => !o.paid); // [{ id: 2, ... }]
const revenue = orders.filter((o) => o.paid).reduce((sum, o) => sum + o.total, 0); // 141

const firstBigOrder = orders.find((o) => o.total > 50); // the order with id 3
const allPaid = orders.every((o) => o.paid); // false
const anyUnpaid = orders.some((o) => !o.paid); // true

const original = [3, 1, 2];

// mutating — original is changed, and reused elsewhere this can surprise you
original.push(4); // [3, 1, 2, 4]
original.sort(); // [1, 2, 3, 4] — but sorts lexicographically without a comparator!
[10, 2, 1].sort(); // [1, 10, 2] — not what you probably wanted

// non-mutating — safer when other code might hold a reference to the array
const numeric = [10, 2, 1].sort((a, b) => a - b); // [1, 2, 10]
const copy = [...original, 5]; // original is untouched
const withoutFirst = original.slice(1); // new array, original unchanged

const name = 'Ada';
const age = 36;
const user = { name, age }; // shorthand — same as { name: name, age: age }

const key = 'role';
const withRole = { ...user, [key]: 'engineer' }; // computed key + spread copy

const defaults = { theme: 'dark', pageSize: 10 };
const overrides = { pageSize: 25 };
const merged = { ...defaults, ...overrides }; // { theme: 'dark', pageSize: 25 } — later keys win

for (const [key, value] of Object.entries(user)) {
  console.log(key, value);
}

Object.keys(user); // ['name', 'age']
Object.values(user); // ['Ada', 36]
Object.fromEntries([['a', 1], ['b', 2]]); // { a: 1, b: 2 }

const user = { profile: { social: null } };

user.profile.social.twitter; // throws: Cannot read properties of null
user.profile?.social?.twitter; // undefined — no throw
user.profile?.getBio?.(); // undefined — safely skips calling a method that does not exist

const settings = { retries: 0, name: '' };
settings.retries || 5; // 5 — wrong! 0 is falsy, so || overrides it
settings.retries ?? 5; // 0 — right — ?? only falls back for null/undefined
settings.name ?? 'Anonymous'; // '' — kept, because '' is not null/undefined

function fetchUser(id) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (id > 0) resolve({ id, name: 'Ada' });
      else reject(new Error('invalid id'));
    }, 300);
  });
}

fetchUser(1)
  .then((user) => user.name)
  .then((name) => console.log(name.toUpperCase()))
  .catch((err) => console.error('failed:', err.message))
  .finally(() => console.log('request finished'));

async function loadProfile(id) {
  try {
    const response = await fetch(`/api/users/${id}`);
    if (!response.ok) throw new Error(`request failed: ${response.status}`);

    const user = await response.json();
    return user;
  } catch (err) {
    console.error('could not load profile:', err.message);
    return null;
  }
}

// an async function always returns a promise, even if you return a plain value
loadProfile(1).then((user) => console.log(user));

// sequential — each await waits before starting the next
async function loadBoth() {
  const a = await loadProfile(1);
  const b = await loadProfile(2);
  return [a, b];
}

const requests = [loadProfile(1), loadProfile(2), loadProfile(3)];

const users = await Promise.all(requests);
// all three ran concurrently, not one after another — much faster than sequential awaits

const results = await Promise.allSettled(requests);
// [{ status: 'fulfilled', value: ... }, { status: 'rejected', reason: ... }, ...]
// never throws — good for "load as much as you can"

const fastest = await Promise.race([
  fetchUser(1),
  new Promise((_, reject) => setTimeout(() => reject(new Error('timeout')), 2000)),
]);

const card = document.querySelector('.card');
const allButtons = document.querySelectorAll('button');

card.classList.add('active');
card.classList.toggle('collapsed');
card.classList.contains('active'); // true

card.textContent = 'Plain text, always escaped'; // safe
card.innerHTML = '<strong>Parsed as markup</strong>'; // only with trusted content

card.dataset.userId; // reads data-user-id="..."
card.dataset.status = 'ready'; // writes data-status="ready"

card.style.setProperty('--accent', '#38e0e0'); // set a CSS custom property directly

const list = document.querySelector('.todo-list');

// one listener on the parent covers every item, including ones added later
list.addEventListener('click', (event) => {
  const item = event.target.closest('.todo-item');
  if (!item) return; // click landed somewhere else inside .todo-list

  if (event.target.matches('.delete-button')) {
    item.remove();
  }
});

document.querySelector('form').addEventListener('submit', (event) => {
  event.preventDefault(); // stop the native page reload
  console.log('submitting without a full page navigation');
});

const controller = new AbortController();
window.addEventListener('scroll', onScroll, { signal: controller.signal });
controller.abort(); // removes the listener — no need to keep a reference to onScroll

class Shape {
  constructor(name) {
    this.name = name;
  }
  describe() {
    return `${this.name} has an area of ${this.area()}`;
  }
  area() {
    return 0; // overridden by subclasses
  }
}

class Circle extends Shape {
  constructor(radius) {
    super('Circle'); // must run before using `this` in a subclass constructor
    this.radius = radius;
  }
  area() {
    return Math.PI * this.radius ** 2;
  }
}

const circle = new Circle(4);
circle.describe(); // "Circle has an area of 50.26..."
circle instanceof Shape; // true

class BankAccount {
  #balance; // private — no code outside this class can reach account.#balance

  constructor(openingBalance) {
    this.#balance = openingBalance;
  }

  get balance() {
    return this.#balance; // reads like account.balance, no parentheses
  }

  set balance(amount) {
    if (amount < 0) throw new Error('balance cannot go negative');
    this.#balance = amount;
  }

  static openWithBonus() {
    return new BankAccount(50); // called as BankAccount.openWithBonus()
  }
}

const account = new BankAccount(100);
account.balance; // 100 — via the getter
account.balance = 150; // via the setter
account.#balance; // SyntaxError outside the class

// math.js
export function add(a, b) {
  return a + b;
}
export const PI = 3.14159;
export default function multiply(a, b) {
  return a * b;
}

// app.js
import multiply, { add, PI } from './math.js';
import * as math from './math.js'; // everything, namespaced

add(2, 3); // 5
multiply(2, 3); // 6
math.PI; // 3.14159

const user = { name: 'Ada', tags: ['admin', 'beta'] };

const json = JSON.stringify(user); // '{"name":"Ada","tags":["admin","beta"]}'
const restored = JSON.parse(json); // back to a real object

typeof 'text'; // "string"
typeof 42; // "number"
typeof undefined; // "undefined"
typeof null; // "object" — a famous, long-standing quirk

Array.isArray([1, 2, 3]); // true — typeof an array is just "object"
[] instanceof Array; // true

new Date() instanceof Date; // true
Number.isInteger(4.0); // true
Number.isNaN(Number('not a number')); // true — safer than the global isNaN()