JavaScript

Getting Started

Fundamental JavaScript concepts including variables, data types, and basic syntax.

Variables

Declaring and using variables with var, let, and const.

Variable declarations

let and const are block-scoped. var is function-scoped and hoisted. const prevents reassignment but does not make objects immutable.

Code

1
var oldWay = 'function scoped';
2
let mutable = 'can be reassigned';
3
const immutable = 'cannot be reassigned';
4

5
let x = 1;
6
x = 2; // OK
7

8
const y = 1;
9
// y = 2; // TypeError: Assignment to constant variable

Execution

node variables.js

Prefer const by default, use let only when reassignment is needed.
Avoid var in modern JavaScript.

Block scoping

var leaks out of blocks, while let and const are confined to the block where they are declared.

Code

1
if (true) {
2
  var a = 1;
3
  let b = 2;
4
  const c = 3;
5
}
6
console.log(a); // 1
7
// console.log(b); // ReferenceError
8
// console.log(c); // ReferenceError

Execution

node scope.js

Output

1
1

Block scoping prevents variable leaks and accidental overwrites.
This is one of the main reasons to prefer let/const over var.

Data Types

JavaScript primitive and reference types.

Primitive types

JavaScript has 7 primitive types. typeof null returning "object" is a well-known historical bug.

Code

1
const str = 'hello';          // string
2
const num = 42;               // number
3
const float = 3.14;           // number
4
const bool = true;            // boolean
5
const nothing = null;         // object (historical bug)
6
const undef = undefined;      // undefined
7
const sym = Symbol('id');     // symbol
8
const big = 9007199254740991n; // bigint
9

10
console.log(typeof str);      // "string"
11
console.log(typeof num);      // "number"
12
console.log(typeof nothing);  // "object"

Execution

node types.js

Output

1
string
2
number
3
object

Use === instead of == to avoid type coercion surprises.
BigInt is for integers larger than Number.MAX_SAFE_INTEGER.

Type checking

typeof works for most types but returns "object" for null and arrays. Use Array.isArray() for arrays.

Code

1
typeof 'hello'      // "string"
2
typeof 42           // "number"
3
typeof true         // "boolean"
4
typeof undefined    // "undefined"
5
typeof null         // "object" (bug)
6
typeof {}           // "object"
7
typeof []           // "object"
8
Array.isArray([])   // true
9
typeof function(){} // "function"

Use instanceof for checking class instances.
null check: value === null.

Template Literals

String interpolation and multiline strings using backticks.

String interpolation

Template literals use backticks and ${} for embedding expressions directly in strings.

Code

1
const name = 'World';
2
const greeting = `Hello, ${name}!`;
3
console.log(greeting);
4

5
const a = 10, b = 20;
6
console.log(`Sum: ${a + b}`);
7
console.log(`Type: ${typeof name}`);

Execution

node template.js

Output

1
Hello, World!
2
Sum: 30
3
Type: string

Any valid JavaScript expression can go inside ${}.
Template literals preserve whitespace and newlines.

Multiline strings and tagged templates

Tagged templates allow custom processing of template literals through a function prefix.

Code

1
const multiline = `
2
  This is a
3
  multiline string
4
`;
5

6
function highlight(strings, ...values) {
7
  return strings.reduce((result, str, i) =>
8
    `${result}${str}<b>${values[i] || ''}</b>`, '');
9
}
10

11
const name = 'world';
12
console.log(highlight`Hello ${name}!`);

Execution

node tagged.js

Output

1
Hello <b>world</b>!<b></b>

Tagged templates are used in libraries like styled-components and GraphQL.
The tag function receives an array of string parts and interpolated values.

Operators

Comparison, logical, nullish coalescing, and optional chaining operators.

Comparison and logical operators

?? only checks null/undefined, unlike || which also catches 0, "", and false.

Code

1
// Equality
2
1 == '1'        // true (type coercion)
3
1 === '1'       // false (strict)
4
1 != '1'        // false
5
1 !== '1'       // true
6

7
// Logical
8
true && 'yes'   // "yes"
9
false || 'fallback' // "fallback"
10
null ?? 'default'   // "default" (nullish coalescing)
11

12
// Ternary
13
const age = 20;
14
const status = age >= 18 ? 'adult' : 'minor';

Always use === and !== to avoid type coercion bugs.
?? is safer than || when 0 or empty string are valid values.

Optional chaining and nullish assignment

Optional chaining (?.) safely accesses nested properties without throwing if intermediate values are null/undefined.

Code

1
const user = {
2
  name: 'Alice',
3
  address: { city: 'NYC' }
4
};
5

6
// Optional chaining
7
console.log(user?.address?.city);    // "NYC"
8
console.log(user?.phone?.number);    // undefined
9

10
// Optional chaining with methods
11
console.log(user.toString?.());      // "[object Object]"
12
console.log(user.nonExistent?.());   // undefined
13

14
// Nullish assignment
15
let a = null;
16
a ??= 'default';
17
console.log(a); // "default"
18

19
let b = 0;
20
b ??= 42;
21
console.log(b); // 0 (not null/undefined)

Execution

node optional.js

Output

1
NYC
2
undefined
3
[object Object]
4
undefined
5
default
6
0

?.() for optional method calls, ?.[] for optional bracket access.
Combine with ?? for safe default values.

Functions

Function declarations, expressions, arrow functions, and advanced patterns.

Arrow Functions

Concise function syntax introduced in ES6.

Arrow function syntax

Arrow functions provide concise syntax. Single expressions are implicitly returned. Multi-line bodies need explicit return.

Code

1
// Basic arrow function
2
const add = (a, b) => a + b;
3

4
// Single parameter (no parens needed)
5
const double = x => x * 2;
6

7
// No parameters
8
const greet = () => 'Hello!';
9

10
// Multi-line body (needs braces and return)
11
const sum = (a, b) => {
12
  const result = a + b;
13
  return result;
14
};
15

16
console.log(add(2, 3));    // 5
17
console.log(double(4));    // 8
18
console.log(greet());      // "Hello!"

Execution

node arrow.js

Output

1
5
2
8
3
Hello!

Arrow functions do not have their own this - they inherit it from the enclosing scope.
Cannot be used as constructors (no new keyword).

Returning objects

To return an object literal from an arrow function, wrap it in parentheses to avoid ambiguity with block syntax.

Code

1
// Wrap object literal in parentheses
2
const makeUser = (name, age) => ({ name, age });
3

4
console.log(makeUser('Alice', 30));
5
// { name: 'Alice', age: 30 }
6

7
// Common in array methods
8
const names = ['Alice', 'Bob'];
9
const users = names.map((name, i) => ({ id: i, name }));
10
console.log(users);

Execution

node arrow-obj.js

Output

1
{ name: 'Alice', age: 30 }
2
[ { id: 0, name: 'Alice' }, { id: 1, name: 'Bob' } ]

Without parentheses, {} is treated as a function body, not an object.
This pattern is very common with .map(), .filter(), and .reduce().

Default Parameters

Setting default values for function parameters.

Default parameter values

Default parameters are used when arguments are undefined or not provided. They can reference earlier parameters.

Code

1
function greet(name = 'World', greeting = 'Hello') {
2
  return `${greeting}, ${name}!`;
3
}
4

5
console.log(greet());              // "Hello, World!"
6
console.log(greet('Alice'));        // "Hello, Alice!"
7
console.log(greet('Bob', 'Hi'));   // "Hi, Bob!"
8

9
// Defaults can use previous parameters
10
function createUser(name, role = 'user', id = Date.now()) {
11
  return { name, role, id };
12
}

Execution

node defaults.js

Output

1
Hello, World!
2
Hello, Alice!
3
Hi, Bob!

null does NOT trigger defaults, only undefined does.
Default values are evaluated at call time, not definition time.

Rest parameters

Rest parameters (...name) collect remaining arguments into a real array. Must be the last parameter.

Code

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

5
console.log(sum(1, 2, 3));     // 6
6
console.log(sum(10, 20));       // 30
7

8
function tag(name, ...attrs) {
9
  return `<${name} ${attrs.join(' ')}>`;
10
}
11

12
console.log(tag('div', 'class="box"', 'id="main"'));

Execution

node rest.js

Output

1
6
2
30
3
<div class="box" id="main">

Rest parameters replace the old arguments object.
Unlike arguments, rest parameters are a real Array.

Closures

Functions that capture variables from their enclosing scope.

Basic closure

The inner functions close over the count variable, maintaining access to it even after createCounter returns.

Code

1
function createCounter() {
2
  let count = 0;
3
  return {
4
    increment: () => ++count,
5
    decrement: () => --count,
6
    getCount: () => count
7
  };
8
}
9

10
const counter = createCounter();
11
console.log(counter.increment()); // 1
12
console.log(counter.increment()); // 2
13
console.log(counter.decrement()); // 1
14
console.log(counter.getCount());  // 1

Execution

node closure.js

Output

count is private and cannot be accessed directly from outside.
Each call to createCounter creates a new independent scope.

Factory function with closure

Each call to multiplier creates a new closure capturing its own factor value.

Code

1
function multiplier(factor) {
2
  return (number) => number * factor;
3
}
4

5
const double = multiplier(2);
6
const triple = multiplier(3);
7

8
console.log(double(5));  // 10
9
console.log(triple(5));  // 15
10
console.log(double(10)); // 20

Execution

node factory.js

Output

Closures are the basis for many functional programming patterns.
They enable partial application and currying.

Objects and Arrays

Object manipulation, destructuring, spread operator, and array methods.

Destructuring

Extract values from objects and arrays into variables.

Object destructuring

Object destructuring extracts properties into variables. Supports renaming, defaults, and nesting.

Code

1
const user = { name: 'Alice', age: 30, city: 'NYC' };
2

3
// Basic destructuring
4
const { name, age } = user;
5
console.log(name, age); // "Alice" 30
6

7
// Rename variables
8
const { name: userName, age: userAge } = user;
9
console.log(userName); // "Alice"
10

11
// Default values
12
const { name: n, role = 'user' } = user;
13
console.log(role); // "user"
14

15
// Nested destructuring
16
const data = { a: { b: { c: 42 } } };
17
const { a: { b: { c } } } = data;
18
console.log(c); // 42

Execution

node destruct.js

Output

1
Alice 30
2
Alice
3
user
4
42

Destructuring works in function parameters too.
Use rest pattern { a, ...rest } to collect remaining properties.

Array destructuring

Array destructuring uses position to extract values. Supports skipping, rest patterns, and variable swapping.

Code

1
const colors = ['red', 'green', 'blue', 'yellow'];
2

3
// Basic
4
const [first, second] = colors;
5
console.log(first, second); // "red" "green"
6

7
// Skip elements
8
const [, , third] = colors;
9
console.log(third); // "blue"
10

11
// Rest pattern
12
const [head, ...tail] = colors;
13
console.log(tail); // ["green", "blue", "yellow"]
14

15
// Swap variables
16
let a = 1, b = 2;
17
[a, b] = [b, a];
18
console.log(a, b); // 2 1

Execution

node array-destruct.js

Output

1
red green
2
blue
3
["green", "blue", "yellow"]
4
2 1

Array destructuring works with any iterable (strings, maps, sets).
The swap pattern avoids needing a temporary variable.

Spread and Rest

The spread (...) operator for expanding and collecting elements.

Spread with arrays and objects

Spread expands iterables into individual elements. For objects, later properties override earlier ones.

Code

1
// Array spread
2
const arr1 = [1, 2, 3];
3
const arr2 = [4, 5, 6];
4
const merged = [...arr1, ...arr2];
5
console.log(merged); // [1, 2, 3, 4, 5, 6]
6

7
// Array clone
8
const clone = [...arr1];
9

10
// Object spread
11
const defaults = { theme: 'dark', lang: 'en' };
12
const userPrefs = { lang: 'fr', fontSize: 14 };
13
const config = { ...defaults, ...userPrefs };
14
console.log(config);
15
// { theme: 'dark', lang: 'fr', fontSize: 14 }

Execution

node spread.js

Output

1
[1, 2, 3, 4, 5, 6]
2
{ theme: 'dark', lang: 'fr', fontSize: 14 }

Spread creates shallow copies, not deep clones.
Object spread is commonly used for immutable state updates.

Rest in function parameters and destructuring

Rest collects multiple elements into an array or object. Used in function parameters and destructuring.

Code

1
// Rest in functions
2
function log(first, ...rest) {
3
  console.log('First:', first);
4
  console.log('Rest:', rest);
5
}
6
log('a', 'b', 'c');
7

8
// Rest in destructuring
9
const { a, ...others } = { a: 1, b: 2, c: 3 };
10
console.log(others); // { b: 2, c: 3 }

Execution

node rest-spread.js

Output

1
First: a
2
Rest: ["b", "c"]
3
{ b: 2, c: 3 }

Rest must be the last element in destructuring or parameter lists.
Rest in objects omits the explicitly destructured keys.

Array Methods

Essential array methods for transformation, filtering, and reduction.

Transform and filter

map transforms, filter selects, find returns first match, some/every test conditions, includes checks membership.

Code

1
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
2

3
// map - transform each element
4
const doubled = numbers.map(n => n * 2);
5
console.log(doubled); // [2, 4, 6, ..., 20]
6

7
// filter - keep matching elements
8
const evens = numbers.filter(n => n % 2 === 0);
9
console.log(evens); // [2, 4, 6, 8, 10]
10

11
// find - first match
12
const found = numbers.find(n => n > 3);
13
console.log(found); // 4
14

15
// some / every
16
console.log(numbers.some(n => n > 5));  // true
17
console.log(numbers.every(n => n > 0)); // true
18

19
// includes
20
console.log(numbers.includes(5)); // true

Execution

node array-methods.js

Output

1
[2, 4, 6, 8, 10, 12, 14, 16, 18, 20]
2
[2, 4, 6, 8, 10]
3
4
4
true
5
true
6
true

These methods do not mutate the original array.
Chain methods for expressive data processing pipelines.

Reduce and flat

reduce accumulates array values. flat flattens nested arrays. flatMap maps and flattens in one step.

Code

1
const numbers = [1, 2, 3, 4, 5];
2

3
// reduce - accumulate to single value
4
const sum = numbers.reduce((acc, n) => acc + n, 0);
5
console.log(sum); // 15
6

7
// reduce - group by
8
const people = [
9
  { name: 'Alice', dept: 'eng' },
10
  { name: 'Bob', dept: 'eng' },
11
  { name: 'Carol', dept: 'hr' }
12
];
13
const byDept = people.reduce((groups, person) => {
14
  (groups[person.dept] ??= []).push(person);
15
  return groups;
16
}, {});
17
console.log(byDept);
18

19
// flat and flatMap
20
const nested = [[1, 2], [3, [4, 5]]];
21
console.log(nested.flat());    // [1, 2, 3, [4, 5]]
22
console.log(nested.flat(Infinity)); // [1, 2, 3, 4, 5]
23

24
const sentences = ['hello world', 'foo bar'];
25
const words = sentences.flatMap(s => s.split(' '));
26
console.log(words); // ["hello", "world", "foo", "bar"]

Execution

node reduce.js

Output

1
15
2
{ eng: [{...}, {...}], hr: [{...}] }
3
[1, 2, 3, [4, 5]]
4
[1, 2, 3, 4, 5]
5
["hello", "world", "foo", "bar"]

Always provide an initial value for reduce.
Use Object.groupBy() (ES2024) instead of reduce for grouping when available.

Object Methods

Key Object static methods for working with objects.

Object inspection methods

Object.keys/values/entries return arrays for iteration. Object.fromEntries converts entries back to an object.

Code

1
const user = { name: 'Alice', age: 30, city: 'NYC' };
2

3
console.log(Object.keys(user));
4
// ["name", "age", "city"]
5

6
console.log(Object.values(user));
7
// ["Alice", 30, "NYC"]
8

9
console.log(Object.entries(user));
10
// [["name","Alice"], ["age",30], ["city","NYC"]]
11

12
// Convert entries back to object
13
const filtered = Object.fromEntries(
14
  Object.entries(user).filter(([k, v]) => typeof v === 'string')
15
);
16
console.log(filtered); // { name: 'Alice', city: 'NYC' }

Execution

node object-methods.js

Output

1
["name", "age", "city"]
2
["Alice", 30, "NYC"]
3
[["name","Alice"], ["age",30], ["city","NYC"]]
4
{ name: 'Alice', city: 'NYC' }

These methods only return own enumerable properties.
Object.entries + fromEntries is great for object transformation.

Computed properties and shorthand

Property shorthand, computed names, and method shorthand make object creation more concise.

Code

1
// Property shorthand
2
const name = 'Alice';
3
const age = 30;
4
const user = { name, age };
5
console.log(user); // { name: 'Alice', age: 30 }
6

7
// Computed property names
8
const key = 'color';
9
const obj = { [key]: 'blue', [`${key}Code`]: '#00f' };
10
console.log(obj); // { color: 'blue', colorCode: '#00f' }
11

12
// Method shorthand
13
const calc = {
14
  value: 0,
15
  add(n) { this.value += n; return this; },
16
  subtract(n) { this.value -= n; return this; }
17
};
18
calc.add(5).subtract(2);
19
console.log(calc.value); // 3

Execution

node computed.js

Output

1
{ name: 'Alice', age: 30 }
2
{ color: 'blue', colorCode: '#00f' }
3
3

Computed properties can use any expression inside brackets.
Method shorthand has the same this behavior as regular functions.

Async JavaScript

Promises, async/await, and asynchronous patterns.

Promises

Creating and chaining promises for asynchronous operations.

Creating and using promises

Promises represent eventual completion or failure. Use .then() for success, .catch() for errors, .finally() for cleanup.

Code

1
// Creating a promise
2
const fetchData = new Promise((resolve, reject) => {
3
  setTimeout(() => {
4
    const success = true;
5
    if (success) {
6
      resolve({ id: 1, name: 'Alice' });
7
    } else {
8
      reject(new Error('Failed to fetch'));
9
    }
10
  }, 1000);
11
});
12

13
// Consuming with .then/.catch/.finally
14
fetchData
15
  .then(data => console.log('Data:', data))
16
  .catch(err => console.error('Error:', err))
17
  .finally(() => console.log('Done'));

Execution

node promise.js

Output

1
Data: { id: 1, name: 'Alice' }
2
Done

Promises are always asynchronous, even if resolved immediately.
.catch() catches any error in the preceding chain.

Promise combinators

Promise.all fails on any rejection. allSettled waits for all. race returns the fastest. any returns first fulfillment.

Code

1
const p1 = Promise.resolve(1);
2
const p2 = Promise.resolve(2);
3
const p3 = Promise.reject('error');
4

5
// all - waits for all (fails fast)
6
Promise.all([p1, p2])
7
  .then(console.log); // [1, 2]
8

9
// allSettled - waits for all regardless
10
Promise.allSettled([p1, p3])
11
  .then(console.log);
12
// [{status:'fulfilled',value:1}, {status:'rejected',reason:'error'}]
13

14
// race - first to settle
15
Promise.race([p1, p2])
16
  .then(console.log); // 1
17

18
// any - first to fulfill
19
Promise.any([p3, p1])
20
  .then(console.log); // 1

Execution

node combinators.js

Output

1
[1, 2]
2
[{status:'fulfilled',value:1},{status:'rejected',reason:'error'}]
3
1
4
1

Use Promise.all for parallel independent async operations.
Use Promise.allSettled when you need results regardless of individual failures.

Async/Await

Syntactic sugar over promises for cleaner asynchronous code.

Basic async/await

async functions always return promises. await pauses execution until the promise resolves. Use try/catch for error handling.

Code

1
async function fetchUser(id) {
2
  try {
3
    const response = await fetch(`/api/users/${id}`);
4
    if (!response.ok) throw new Error('Not found');
5
    const user = await response.json();
6
    return user;
7
  } catch (error) {
8
    console.error('Failed:', error.message);
9
    return null;
10
  }
11
}
12

13
// Arrow async function
14
const getUser = async (id) => {
15
  const res = await fetch(`/api/users/${id}`);
16
  return res.json();
17
};
18

19
// Top-level await (in modules)
20
const data = await fetchUser(1);

Top-level await works in ES modules only.
async/await is syntactic sugar over promises.

Sequential vs parallel execution

Use Promise.all with await for parallel execution of independent async operations. Sequential await is appropriate when operations depend on each other.

Code

1
// Sequential (slow - one after another)
2
async function sequential() {
3
  const user = await fetchUser(1);    // waits...
4
  const posts = await fetchPosts(1);  // then waits...
5
  return { user, posts };
6
}
7

8
// Parallel (fast - both at once)
9
async function parallel() {
10
  const [user, posts] = await Promise.all([
11
    fetchUser(1),
12
    fetchPosts(1)
13
  ]);
14
  return { user, posts };
15
}
16

17
// Parallel with error handling
18
async function parallelSafe() {
19
  const results = await Promise.allSettled([
20
    fetchUser(1),
21
    fetchPosts(1)
22
  ]);
23
  return results.map(r =>
24
    r.status === 'fulfilled' ? r.value : null
25
  );
26
}

Parallel execution can be significantly faster for independent operations.
Use for...of with await for sequential iteration over async operations.

Classes and Modules

ES6 classes, inheritance, and module import/export syntax.

Classes

ES6 class syntax for object-oriented programming.

Class declaration and inheritance

Classes support private fields (#), getters/setters, static methods, and inheritance via extends/super.

Code

1
class Animal {
2
  #name;  // private field
3

4
  constructor(name) {
5
    this.#name = name;
6
  }
7

8
  get name() { return this.#name; }
9
  set name(value) { this.#name = value; }
10

11
  speak() {
12
    return `${this.#name} makes a sound`;
13
  }
14

15
  static create(name) {
16
    return new Animal(name);
17
  }
18
}
19

20
class Dog extends Animal {
21
  #breed;
22

23
  constructor(name, breed) {
24
    super(name);
25
    this.#breed = breed;
26
  }
27

28
  speak() {
29
    return `${this.name} barks`;
30
  }
31

32
  info() {
33
    return `${this.name} is a ${this.#breed}`;
34
  }
35
}
36

37
const dog = new Dog('Rex', 'Labrador');
38
console.log(dog.speak());  // "Rex barks"
39
console.log(dog.info());   // "Rex is a Labrador"
40

41
const cat = Animal.create('Whiskers');
42
console.log(cat.speak());  // "Whiskers makes a sound"

Execution

node classes.js

Output

1
Rex barks
2
Rex is a Labrador
3
Whiskers makes a sound

Private fields (#) are truly private and not accessible outside the class.
Static methods are called on the class, not instances.

Class with static and instance methods

A practical class example implementing a simple event emitter with method chaining (returning this).

Code

1
class EventEmitter {
2
  #listeners = new Map();
3

4
  on(event, callback) {
5
    if (!this.#listeners.has(event)) {
6
      this.#listeners.set(event, []);
7
    }
8
    this.#listeners.get(event).push(callback);
9
    return this;
10
  }
11

12
  emit(event, ...args) {
13
    const handlers = this.#listeners.get(event) ?? [];
14
    handlers.forEach(fn => fn(...args));
15
    return this;
16
  }
17

18
  off(event, callback) {
19
    const handlers = this.#listeners.get(event) ?? [];
20
    this.#listeners.set(event,
21
      handlers.filter(fn => fn !== callback)
22
    );
23
    return this;
24
  }
25
}
26

27
const emitter = new EventEmitter();
28
emitter
29
  .on('data', (msg) => console.log('Received:', msg))
30
  .emit('data', 'hello');

Execution

node emitter.js

Output

1
Received: hello

Method chaining is enabled by returning this.
Private Map ensures listeners are encapsulated.

Modules

ES6 module import/export syntax.

Named and default exports

Named exports allow multiple exports per module. Default exports are imported without braces. Use as to rename imports.

Code

1
// math.js - Named exports
2
export const PI = 3.14159;
3
export function add(a, b) { return a + b; }
4
export function multiply(a, b) { return a * b; }
5

6
// utils.js - Default export
7
export default class Logger {
8
  log(msg) { console.log(`[LOG] ${msg}`); }
9
}
10

11
// app.js - Importing
12
import Logger from './utils.js';            // default
13
import { add, multiply, PI } from './math.js'; // named
14
import { add as sum } from './math.js';        // rename
15
import * as math from './math.js';             // namespace
16

17
console.log(math.add(2, 3));  // 5
18
console.log(sum(2, 3));        // 5
19
console.log(PI);               // 3.14159

A module can have one default export and many named exports.
Use namespace import (* as) to import all named exports.

Dynamic imports and re-exports

Dynamic imports return a promise and enable code splitting. Re-exports create barrel files for cleaner imports.

Code

1
// Dynamic import (code splitting)
2
async function loadModule() {
3
  const { add } = await import('./math.js');
4
  console.log(add(2, 3)); // 5
5
}
6

7
// Conditional import
8
const lang = 'en';
9
const messages = await import(`./i18n/${lang}.js`);
10

11
// Re-exports (index.js barrel file)
12
export { add, multiply } from './math.js';
13
export { default as Logger } from './utils.js';
14
export * from './helpers.js'; // re-export all

Dynamic imports are great for lazy loading in web apps.
Barrel files (index.js) simplify imports from complex modules.

Error Handling

Try/catch, custom errors, and error handling patterns.

Try/Catch

Exception handling with try, catch, and finally blocks.

Basic error handling

try/catch handles runtime errors. finally always executes. throw creates custom errors.

Code

1
try {
2
  const data = JSON.parse('invalid json');
3
} catch (error) {
4
  console.error('Parse error:', error.message);
5
} finally {
6
  console.log('Always runs');
7
}
8

9
// Throwing custom errors
10
function divide(a, b) {
11
  if (b === 0) throw new Error('Division by zero');
12
  return a / b;
13
}
14

15
try {
16
  console.log(divide(10, 0));
17
} catch (e) {
18
  console.error(e.message); // "Division by zero"
19
}

Execution

node errors.js

Output

1
Parse error: Unexpected token i in JSON at position 0
2
Always runs
3
Division by zero

finally runs whether or not an error occurred.
Use specific error types for different error categories.

Custom error classes

Custom error classes extend Error for domain-specific error types. Use instanceof to handle specific error types.

Code

1
class ValidationError extends Error {
2
  constructor(field, message) {
3
    super(message);
4
    this.name = 'ValidationError';
5
    this.field = field;
6
  }
7
}
8

9
class NotFoundError extends Error {
10
  constructor(resource) {
11
    super(`${resource} not found`);
12
    this.name = 'NotFoundError';
13
    this.statusCode = 404;
14
  }
15
}
16

17
function validate(user) {
18
  if (!user.name) throw new ValidationError('name', 'Name required');
19
  if (!user.email) throw new ValidationError('email', 'Email required');
20
}
21

22
try {
23
  validate({ name: '' });
24
} catch (e) {
25
  if (e instanceof ValidationError) {
26
    console.log(`${e.field}: ${e.message}`);
27
  } else {
28
    throw e; // re-throw unknown errors
29
  }
30
}

Execution

node custom-error.js

Output

1
name: Name required

Always set this.name in custom errors for better debugging.
Re-throw errors you cannot handle at the current level.

Iterators and Generators

Iteration protocols, generators, and advanced iteration patterns.

Iterators

The iteration protocol and creating custom iterables.

Custom iterable

Objects implementing [Symbol.iterator]() are iterable and work with for...of, spread, and destructuring.

Code

1
class Range {
2
  constructor(start, end) {
3
    this.start = start;
4
    this.end = end;
5
  }
6

7
  [Symbol.iterator]() {
8
    let current = this.start;
9
    const end = this.end;
10
    return {
11
      next() {
12
        if (current <= end) {
13
          return { value: current++, done: false };
14
        }
15
        return { done: true };
16
      }
17
    };
18
  }
19
}
20

21
const range = new Range(1, 5);
22
for (const n of range) {
23
  process.stdout.write(`${n} `);
24
}
25
// 1 2 3 4 5
26

27
console.log([...range]); // [1, 2, 3, 4, 5]

Execution

node iterator.js

Output

1
1 2 3 4 5
2
[1, 2, 3, 4, 5]

Built-in iterables include Array, String, Map, Set, and NodeList.
Spread operator and destructuring consume iterables.

Generators

Generator functions that can pause and resume execution.

Generator basics

Generator functions (function*) use yield to pause execution. Each next() call resumes until the next yield.

Code

1
function* count(start = 0) {
2
  let i = start;
3
  while (true) {
4
    yield i++;
5
  }
6
}
7

8
const counter = count(1);
9
console.log(counter.next().value); // 1
10
console.log(counter.next().value); // 2
11
console.log(counter.next().value); // 3
12

13
// Take first N from infinite generator
14
function* take(iterable, n) {
15
  let i = 0;
16
  for (const value of iterable) {
17
    if (i++ >= n) return;
18
    yield value;
19
  }
20
}
21

22
console.log([...take(count(10), 5)]);
23
// [10, 11, 12, 13, 14]

Execution

node generator.js

Output

1
1
2
2
3
3
4
[10, 11, 12, 13, 14]

Generators are lazy; they only compute values on demand.
Infinite generators are safe because they only produce values when consumed.

Async generators

Async generators combine async/await with generator syntax. Use for await...of to consume them.

Code

1
async function* fetchPages(url) {
2
  let page = 1;
3
  while (true) {
4
    const res = await fetch(`${url}?page=${page}`);
5
    const data = await res.json();
6
    if (data.length === 0) return;
7
    yield data;
8
    page++;
9
  }
10
}
11

12
// Consuming async generator
13
async function getAllPages() {
14
  const pages = [];
15
  for await (const page of fetchPages('/api/items')) {
16
    pages.push(...page);
17
    if (pages.length > 100) break;
18
  }
19
  return pages;
20
}

Async generators are great for paginated API calls.
for await...of works with any async iterable.

Modern Features

Recent JavaScript features including Map, Set, Proxy, and other ES2020+ additions.

Map and Set

Map and Set collections for unique values and key-value pairs.

Map usage

Map allows any type as keys, maintains insertion order, and provides efficient key-value storage.

Code

1
const map = new Map();
2

3
// Any value can be a key
4
map.set('name', 'Alice');
5
map.set(42, 'the answer');
6
map.set(true, 'yes');
7

8
console.log(map.get('name'));  // "Alice"
9
console.log(map.has(42));      // true
10
console.log(map.size);         // 3
11

12
// Initialize from entries
13
const config = new Map([
14
  ['theme', 'dark'],
15
  ['lang', 'en'],
16
  ['debug', false]
17
]);
18

19
// Iteration
20
for (const [key, value] of config) {
21
  console.log(`${key}: ${value}`);
22
}
23

24
// Convert to/from object
25
const obj = Object.fromEntries(config);
26
const map2 = new Map(Object.entries(obj));

Execution

node map.js

Output

1
Alice
2
true
3
3
4
theme: dark
5
lang: en
6
debug: false

Map is better than objects when keys are not strings.
Use map.size instead of Object.keys(obj).length.

Set usage

Set stores unique values of any type. Perfect for deduplication and membership testing.

Code

1
// Unique values
2
const set = new Set([1, 2, 3, 2, 1]);
3
console.log([...set]); // [1, 2, 3]
4

5
set.add(4);
6
set.delete(1);
7
console.log(set.has(2));  // true
8
console.log(set.size);    // 3
9

10
// Array deduplication
11
const arr = [1, 1, 2, 3, 3, 4];
12
const unique = [...new Set(arr)];
13
console.log(unique); // [1, 2, 3, 4]
14

15
// Set operations (ES2025+)
16
const a = new Set([1, 2, 3]);
17
const b = new Set([2, 3, 4]);
18
console.log([...a.intersection(b)]);  // [2, 3]
19
console.log([...a.union(b)]);          // [1, 2, 3, 4]
20
console.log([...a.difference(b)]);     // [1]

Execution

node set.js

Output

1
[1, 2, 3]
2
true
3
3
4
[1, 2, 3, 4]
5
[2, 3]
6
[1, 2, 3, 4]
7
[1]

Set uses SameValueZero comparison (similar to ===).
Set operations (union, intersection, difference) are available in modern engines.

Proxy and Reflect

Metaprogramming with Proxy and Reflect for intercepting operations.

Validation proxy

Proxy intercepts operations (get, set, delete, etc.) on objects. Handlers define traps for each operation.

Code

1
const validator = {
2
  set(target, prop, value) {
3
    if (prop === 'age') {
4
      if (typeof value !== 'number') {
5
        throw new TypeError('Age must be a number');
6
      }
7
      if (value < 0 || value > 150) {
8
        throw new RangeError('Age must be 0-150');
9
      }
10
    }
11
    target[prop] = value;
12
    return true;
13
  },
14
  get(target, prop) {
15
    if (prop in target) return target[prop];
16
    throw new ReferenceError(`Property ${prop} not found`);
17
  }
18
};
19

20
const user = new Proxy({}, validator);
21
user.name = 'Alice';
22
user.age = 30;
23
console.log(user.name); // "Alice"
24

25
try { user.age = -5; } catch (e) {
26
  console.log(e.message); // "Age must be 0-150"
27
}

Execution

node proxy.js

Output

1
Alice
2
Age must be 0-150

Proxies are used in Vue 3 reactivity and MobX state management.
Use Reflect methods inside traps for default behavior.

Reactive proxy with onChange

A reactive proxy that calls onChange whenever properties are modified. This is the foundation of modern reactivity systems.

Code

1
function reactive(target, onChange) {
2
  return new Proxy(target, {
3
    set(obj, prop, value) {
4
      const oldValue = obj[prop];
5
      obj[prop] = value;
6
      if (oldValue !== value) {
7
        onChange(prop, value, oldValue);
8
      }
9
      return true;
10
    },
11
    deleteProperty(obj, prop) {
12
      const value = obj[prop];
13
      delete obj[prop];
14
      onChange(prop, undefined, value);
15
      return true;
16
    }
17
  });
18
}
19

20
const state = reactive({ count: 0 }, (prop, newVal, oldVal) => {
21
  console.log(`${prop}: ${oldVal} -> ${newVal}`);
22
});
23

24
state.count = 1;  // "count: 0 -> 1"
25
state.count = 5;  // "count: 1 -> 5"

Execution

node reactive.js

Output

1
count: 0 -> 1
2
count: 1 -> 5

This pattern is the basis of Vue 3 and similar frameworks.
Add deep proxy wrapping for nested reactivity.

Miscellaneous Modern Features

Useful modern JavaScript features and syntax.

Useful modern additions

Modern JS includes structuredClone for deep copying, .at() for negative indexing, Object.groupBy for grouping, and more.

Code

1
// structuredClone - deep clone
2
const original = { a: { b: { c: 1 } }, d: [2, 3] };
3
const clone = structuredClone(original);
4
clone.a.b.c = 99;
5
console.log(original.a.b.c); // 1 (unchanged)
6

7
// Array.at() - negative indexing
8
const arr = [1, 2, 3, 4, 5];
9
console.log(arr.at(-1));  // 5
10
console.log(arr.at(-2));  // 4
11

12
// Object.groupBy (ES2024)
13
const people = [
14
  { name: 'Alice', age: 30 },
15
  { name: 'Bob', age: 25 },
16
  { name: 'Carol', age: 30 }
17
];
18
const byAge = Object.groupBy(people, p => p.age);
19
console.log(byAge[30]); // [Alice, Carol]
20

21
// String.replaceAll
22
const str = 'foo-bar-baz';
23
console.log(str.replaceAll('-', '_')); // "foo_bar_baz"

Execution

node modern.js

Output

1
1
2
5
3
4
4
[{name:'Alice',age:30},{name:'Carol',age:30}]
5
foo_bar_baz

structuredClone handles circular references but cannot clone functions.
Object.groupBy replaces manual reduce-based grouping.

Pattern matching with switch(true) and logical assignment

Logical assignment operators combine logical operations with assignment. switch(true) enables range-based matching.

Code

1
// Logical assignment operators
2
let a = null;
3
a ??= 'default';    // a = 'default' (null/undefined)
4
console.log(a);
5

6
let b = 0;
7
b ||= 42;           // b = 42 (falsy)
8
console.log(b);
9

10
let c = 1;
11
c &&= 2;            // c = 2 (truthy)
12
console.log(c);
13

14
// switch(true) pattern
15
const score = 85;
16
switch (true) {
17
  case score >= 90: console.log('A'); break;
18
  case score >= 80: console.log('B'); break;
19
  case score >= 70: console.log('C'); break;
20
  default: console.log('F');
21
}

Execution

node logical.js

Output

1
default
2
42
3
2
4
B

??= assigns only if null/undefined.
||= assigns if falsy (including 0, "", false).
&&= assigns only if truthy.

JavaScript

Getting Started

Variables

Accessibility

Best Practices

Common Errors

Keywords

Variable declarations

Block scoping

Data Types

Accessibility

Best Practices

Common Errors

Keywords

Primitive types

Type checking

Template Literals

Accessibility

Best Practices

Common Errors

Keywords

String interpolation

Multiline strings and tagged templates

Operators

Accessibility

Best Practices

Common Errors

Keywords

Comparison and logical operators

Optional chaining and nullish assignment

Functions

Arrow Functions

Accessibility

Best Practices

Common Errors

Keywords

Arrow function syntax

Returning objects

Default Parameters

Accessibility

Best Practices

Common Errors

Keywords

Default parameter values

Rest parameters

Closures

Accessibility

Best Practices

Common Errors

Keywords

Basic closure

Factory function with closure

Objects and Arrays

Destructuring

Accessibility

Best Practices

Common Errors

Keywords

Object destructuring

Array destructuring

Spread and Rest

Accessibility

Best Practices

Common Errors

Keywords

Spread with arrays and objects

Rest in function parameters and destructuring

Array Methods

Accessibility

Best Practices

Common Errors

Keywords

Transform and filter

Reduce and flat

Object Methods

Accessibility

Best Practices

Common Errors

Keywords

Object inspection methods