js-modern

Modern JavaScript & TypeScript

Before writing code

Fetch live docs: Web-search site:developer.mozilla.org javascript for MDN JavaScript reference. Check https://www.typescriptlang.org/docs/ for TypeScript documentation.

ES6+ Features

Arrow Functions

Concise function syntax with lexical this:

• const add = (a, b) => a + b;
• Implicit return for single expressions
• No own this, arguments, super, or new.target

Template Literals

String interpolation and multi-line strings:

• `Hello, ${name}!`
• Tagged templates for DSLs

Destructuring

Extract values from objects/arrays:

• const { name, price } = product;
• const [first, ...rest] = items;
• Default values: const { name = 'Unknown' } = product;
• Nested: const { address: { city } } = customer;

Spread / Rest

• Spread: [...arr1, ...arr2], { ...obj1, ...obj2 }
• Rest: function(...args) {}, const { a, ...rest } = obj;

Modules (ES Modules)

• import { func } from './module.js';
• export const value = 42; / export default class {}
• Dynamic: const mod = await import('./lazy.js');

Optional Chaining & Nullish Coalescing

• obj?.property?.nested — short-circuits to undefined if any part is nullish
• value ?? defaultValue — returns right side only if left is null/undefined (not falsy)

Async Patterns

Promises

• new Promise((resolve, reject) => { ... })
• .then(), .catch(), .finally()
• Promise.all(), Promise.allSettled(), Promise.race(), Promise.any()

Async/Await

• async function fetchData() { const data = await fetch(url); }
• Error handling with try/catch
• Parallel: const [a, b] = await Promise.all([fetchA(), fetchB()]);

Fetch API

const response = await fetch(url, {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(data),
});
const result = await response.json();

TypeScript

Type Annotations

• let name: string = 'Product';
• function getPrice(id: number): Promise<number> { ... }
• const product: Product = { ... };