claude-mods/skills/javascript-ops/references/modern-features.md

Modern JavaScript Features Reference

ES2022 through ES2025, stage 3 proposals, and advanced runtime features.

---

ES2022 Features

Top-Level Await

// ESM only — works at the top level of a module, no async wrapper
import { createPool } from 'pg';

// Module-level async initialization
const pool = await createPool({ connectionString: process.env.DATABASE_URL });

export async function query(sql, params) {
  return pool.query(sql, params);
}

// Use case: lazy initialization that must complete before module is usable
const config = await fetch('/api/config').then(r => r.json());

export const API_URL = config.apiUrl;
export const TIMEOUT = config.timeout;

Private Class Fields and Methods

class BankAccount {
  // Private field — truly inaccessible from outside
  #balance = 0;
  #transactionLog = [];

  // Private method
  #recordTransaction(amount, type) {
    this.#transactionLog.push({ amount, type, at: new Date() });
  }

  // Private static field
  static #instanceCount = 0;

  constructor(initialBalance) {
    this.#balance = initialBalance;
    BankAccount.#instanceCount++;
  }

  deposit(amount) {
    if (amount <= 0) throw new Error('Amount must be positive');
    this.#balance += amount;
    this.#recordTransaction(amount, 'deposit');
  }

  withdraw(amount) {
    if (amount > this.#balance) throw new Error('Insufficient funds');
    this.#balance -= amount;
    this.#recordTransaction(amount, 'withdrawal');
  }

  get balance() { return this.#balance; }

  // Check private field existence — 'in' operator works with private fields
  static isAccount(obj) {
    return #balance in obj; // true if obj has this private field
  }

  static get count() { return BankAccount.#instanceCount; }
}

const account = new BankAccount(1000);
account.deposit(500);
// account.#balance  // SyntaxError — genuinely inaccessible
BankAccount.isAccount(account); // true

Static Class Blocks

class Config {
  static DEBUG;
  static API_URL;
  static #initialized = false;

  // Static initialization block — runs once when class is defined
  static {
    // Can contain arbitrary initialization logic
    Config.DEBUG = process.env.NODE_ENV !== 'production';
    Config.API_URL = process.env.API_URL ?? 'https://api.example.com';
    Config.#initialized = true;
    console.log('Config initialized');
  }

  static isReady() { return Config.#initialized; }
}

// Use case: initialize from multiple sources, run try/catch
class Database {
  static connection;
  static error;

  static {
    try {
      Database.connection = createConnection(process.env.DB_URL);
    } catch (err) {
      Database.error = err;
    }
  }
}

Array.at() — Negative Indexing

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

// Before at()
arr[arr.length - 1]; // 5 — verbose
arr.slice(-1)[0];    // 5 — creates a new array

// With at()
arr.at(-1);   // 5 — last element
arr.at(-2);   // 4 — second to last
arr.at(0);    // 1 — first element (same as arr[0])
arr.at(1);    // 2

// Also works on strings and TypedArrays
'hello'.at(-1); // 'o'
new Uint8Array([10, 20, 30]).at(-1); // 30

Object.hasOwn() — Safe hasOwnProperty

// obj.hasOwnProperty is unsafe — can be overridden or null prototype
const obj = Object.create(null); // no prototype
// obj.hasOwnProperty('key'); // TypeError: not a function

// Object.hasOwn is always safe
Object.hasOwn(obj, 'key');     // false
Object.hasOwn({ a: 1 }, 'a'); // true
Object.hasOwn({ a: 1 }, 'b'); // false

// Replaces the classic idiom:
Object.prototype.hasOwnProperty.call(obj, 'key');

Error cause — Error Chaining

// Attach the original error to provide context
async function fetchUser(id) {
  try {
    const res = await fetch(`/api/users/${id}`);
    return await res.json();
  } catch (err) {
    // Wrap with context, preserve original
    throw new Error(`Failed to fetch user ${id}`, { cause: err });
  }
}

// Access the chain
try {
  await fetchUser(42);
} catch (err) {
  console.error(err.message);       // "Failed to fetch user 42"
  console.error(err.cause.message); // original network error
}

// Works with custom error classes
class DatabaseError extends Error {
  constructor(message, { cause, query } = {}) {
    super(message, { cause });
    this.name = 'DatabaseError';
    this.query = query;
  }
}

structuredClone() — Deep Clone Built-In

// No more lodash.cloneDeep or JSON.parse(JSON.stringify(...))
const original = {
  name: 'Alice',
  scores: [1, 2, 3],
  metadata: { created: new Date(), tags: new Set(['js', 'node']) },
};

const clone = structuredClone(original);
clone.scores.push(4);
clone.metadata.tags.add('es2022');

original.scores;           // [1, 2, 3] — unchanged
original.metadata.tags;   // Set {'js', 'node'} — unchanged

// Supports: Date, RegExp, Map, Set, ArrayBuffer, TypedArray, Blob, File, etc.
// Does NOT support: functions, class instances (becomes plain object), Symbol values

// Transfer ownership of ArrayBuffer while cloning the rest
const { buffer } = structuredClone(
  { name: 'test', data: new ArrayBuffer(1024) },
  { transfer: [original.data] } // transfer the buffer
);

---

ES2023 Features

Array.findLast() and Array.findLastIndex()

const events = [
  { type: 'login', at: '08:00' },
  { type: 'purchase', at: '09:30' },
  { type: 'login', at: '14:00' },
  { type: 'logout', at: '17:00' },
];

// Find last login event
const lastLogin = events.findLast(e => e.type === 'login');
// { type: 'login', at: '14:00' }

// Before findLast — verbose
const lastLogin2 = [...events].reverse().find(e => e.type === 'login');

// findLastIndex — returns index, -1 if not found
const lastLoginIdx = events.findLastIndex(e => e.type === 'login'); // 2

WeakMap with Symbol Keys

// Previously only objects could be WeakMap keys
// Now Symbols (non-registered, non-global) can be WeakMap keys

const key = Symbol('private-data');
const weakMap = new WeakMap();

function attachPrivateData(obj, data) {
  weakMap.set(key, { obj, data }); // Symbol as key
}

// Use case: library code that attaches private metadata to symbols

---

ES2024 Features

Object.groupBy() and Map.groupBy()

const products = [
  { name: 'Apple', category: 'fruit', price: 1.2 },
  { name: 'Banana', category: 'fruit', price: 0.5 },
  { name: 'Carrot', category: 'vegetable', price: 0.8 },
  { name: 'Broccoli', category: 'vegetable', price: 1.5 },
];

// Object.groupBy — groups into plain object
const byCategory = Object.groupBy(products, ({ category }) => category);
// {
//   fruit: [{ name: 'Apple', ... }, { name: 'Banana', ... }],
//   vegetable: [{ name: 'Carrot', ... }, { name: 'Broccoli', ... }]
// }

// Map.groupBy — groups into Map (preserves key type, any key type works)
const byPriceRange = Map.groupBy(products, ({ price }) => {
  if (price < 1) return 'budget';
  if (price < 2) return 'mid';
  return 'premium';
});
byPriceRange.get('budget'); // [{ name: 'Banana', ... }, { name: 'Carrot', ... }]

Promise.withResolvers()

// See async-patterns.md for full coverage
const { promise, resolve, reject } = Promise.withResolvers();

// Enables clean deferred patterns
class Semaphore {
  #count;
  #queue = [];

  constructor(count) { this.#count = count; }

  async acquire() {
    if (this.#count > 0) {
      this.#count--;
      return;
    }
    const { promise, resolve } = Promise.withResolvers();
    this.#queue.push(resolve);
    await promise;
  }

  release() {
    const resolve = this.#queue.shift();
    if (resolve) {
      resolve();
    } else {
      this.#count++;
    }
  }
}

ArrayBuffer.prototype.resize() and transferToFixedLength()

// Create a resizable ArrayBuffer
const buffer = new ArrayBuffer(1024, { maxByteLength: 1024 * 1024 }); // max 1MB

const view = new Uint8Array(buffer);
console.log(buffer.byteLength); // 1024

// Grow in-place — no new allocation, views stay valid
buffer.resize(2048);
console.log(buffer.byteLength); // 2048
console.log(view.byteLength);   // 2048 — view updated!

// Shrink
buffer.resize(512);

// Transfer to fixed-length (detaches original)
const fixed = buffer.transferToFixedLength();
// buffer is now detached (byteLength === 0)
// fixed is a regular ArrayBuffer that cannot be resized

String.isWellFormed() and String.toWellFormed()

// Detect and fix lone surrogates (invalid UTF-16)
const valid = 'Hello, world!';
const invalid = 'Hello\uD800World'; // lone surrogate

valid.isWellFormed();   // true
invalid.isWellFormed(); // false

// Replace lone surrogates with replacement character (U+FFFD)
invalid.toWellFormed(); // 'Hello\uFFFDWorld'

// Use case: before passing strings to APIs that require valid Unicode
function safeEncode(str) {
  return encodeURIComponent(str.isWellFormed() ? str : str.toWellFormed());
}

---

ES2025 Features

Set Methods — Set Algebra

const js = new Set(['react', 'vue', 'angular', 'svelte']);
const ts = new Set(['react', 'angular', 'solid', 'qwik']);

// union — all elements from both
js.union(ts);
// Set { 'react', 'vue', 'angular', 'svelte', 'solid', 'qwik' }

// intersection — elements in both
js.intersection(ts);
// Set { 'react', 'angular' }

// difference — in js but not ts
js.difference(ts);
// Set { 'vue', 'svelte' }

// symmetricDifference — in either but not both
js.symmetricDifference(ts);
// Set { 'vue', 'svelte', 'solid', 'qwik' }

// Membership predicates
const react = new Set(['react']);
react.isSubsetOf(js);             // true
js.isSupersetOf(react);           // true
react.isDisjointFrom(new Set(['vue', 'svelte'])); // true

// These methods are non-mutating — return new Sets

Iterator Helpers — Lazy Iteration Protocol

// Iterator helpers are lazy — they don't evaluate until consumed
// Works on any iterable via Iterator.from()

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

// map — transform each element
const doubled = numbers.values().map(x => x * 2).toArray();
// [2, 4, 6, 8, 10, 12, 14, 16, 18, 20]

// filter — keep matching elements
const evens = numbers.values().filter(x => x % 2 === 0).toArray();
// [2, 4, 6, 8, 10]

// take — limit to first N
const first3 = numbers.values().take(3).toArray();
// [1, 2, 3]

// drop — skip first N
const after3 = numbers.values().drop(3).toArray();
// [4, 5, 6, 7, 8, 9, 10]

// flatMap — transform and flatten
const sentences = ['hello world', 'foo bar'];
const words = sentences.values()
  .flatMap(s => s.split(' '))
  .toArray();
// ['hello', 'world', 'foo', 'bar']

// reduce — fold
const sum = numbers.values().reduce((acc, n) => acc + n, 0);
// 55

// Chaining — lazy, memory-efficient pipeline
const result = Iterator.from(hugeDataset)
  .filter(item => item.active)
  .map(item => transform(item))
  .take(100)
  .toArray(); // only evaluates 100 items + filter overhead

// forEach, some, every, find — terminal operations
numbers.values().some(x => x > 5);  // true
numbers.values().every(x => x > 0); // true
numbers.values().find(x => x > 7);  // 8

Explicit Resource Management — using / Symbol.dispose

// 'using' is like const but automatically calls [Symbol.dispose] on block exit
// Similar to C# 'using' or Python 'with'

class DatabaseConnection {
  constructor(url) {
    this.#conn = openConnection(url);
    console.log('Connection opened');
  }

  query(sql) { return this.#conn.query(sql); }

  [Symbol.dispose]() {
    this.#conn.close();
    console.log('Connection closed');
  }
}

// Automatic cleanup — connection closed even if function throws
function doWork() {
  using conn = new DatabaseConnection(DB_URL);
  const result = conn.query('SELECT * FROM users');
  return result; // conn[Symbol.dispose]() called here automatically
}

// await using — for async cleanup
class FileHandle {
  static async open(path) {
    const handle = new FileHandle();
    handle.#fd = await fs.open(path, 'r');
    return handle;
  }

  async read() { return this.#fd.readFile(); }

  async [Symbol.asyncDispose]() {
    await this.#fd.close();
  }
}

async function readFile(path) {
  await using handle = await FileHandle.open(path);
  return handle.read(); // handle[Symbol.asyncDispose]() called automatically
}

// DisposableStack — manage multiple resources
function processFiles(paths) {
  using stack = new DisposableStack();
  const handles = paths.map(p => stack.use(openFile(p)));
  // All handles disposed when stack goes out of scope
  return handles.map(h => h.read());
}

---

Proxy and Reflect

Validation Proxy

function createValidated(schema) {
  return new Proxy({}, {
    set(target, prop, value) {
      const validator = schema[prop];
      if (validator && !validator(value)) {
        throw new TypeError(`Invalid value for ${String(prop)}: ${value}`);
      }
      return Reflect.set(target, prop, value);
    },
    get(target, prop) {
      return Reflect.get(target, prop);
    },
  });
}

const user = createValidated({
  age: (v) => typeof v === 'number' && v >= 0 && v <= 150,
  email: (v) => typeof v === 'string' && v.includes('@'),
});

user.email = 'alice@example.com'; // OK
user.age = 25;                     // OK
user.age = -1;                     // TypeError: Invalid value for age: -1

Observable Proxy — Reactive Data

function observable(target, onChange) {
  return new Proxy(target, {
    set(obj, prop, value) {
      const old = obj[prop];
      const result = Reflect.set(obj, prop, value);
      if (old !== value) {
        onChange(prop, value, old);
      }
      return result;
    },
    deleteProperty(obj, prop) {
      const had = prop in obj;
      const result = Reflect.deleteProperty(obj, prop);
      if (had) {
        onChange(prop, undefined, obj[prop]);
      }
      return result;
    },
  });
}

const state = observable({ count: 0 }, (key, newVal, oldVal) => {
  console.log(`${key}: ${oldVal} → ${newVal}`);
  render();
});

state.count++;  // count: 0 → 1

Deep Proxy — Recursive Observable

function deepObservable(target, onChange, path = '') {
  return new Proxy(target, {
    get(obj, prop) {
      const value = Reflect.get(obj, prop);
      if (value && typeof value === 'object') {
        // Wrap nested objects
        return deepObservable(value, onChange, `${path}.${String(prop)}`);
      }
      return value;
    },
    set(obj, prop, value) {
      const fullPath = `${path}.${String(prop)}`;
      const result = Reflect.set(obj, prop, value);
      onChange(fullPath, value);
      return result;
    },
  });
}

Revocable Proxy — Temporary Access

const { proxy, revoke } = Proxy.revocable(sensitiveData, {
  get(target, prop) {
    console.log(`Access: ${String(prop)}`);
    return Reflect.get(target, prop);
  },
});

grantAccess(proxy);     // give someone temporary access

setTimeout(() => {
  revoke();             // all future access throws TypeError
}, 60_000);

---

Decorators (Stage 3)

// Method decorator — timing/logging
function measure(target, context) {
  return async function(...args) {
    const start = performance.now();
    try {
      return await target.apply(this, args);
    } finally {
      console.log(`${context.name} took ${performance.now() - start}ms`);
    }
  };
}

// Field/accessor decorator — validation
function range(min, max) {
  return function(target, context) {
    return {
      get() { return context.access.get(this); },
      set(value) {
        if (value < min || value > max) {
          throw new RangeError(`${context.name} must be ${min}–${max}`);
        }
        context.access.set(this, value);
      },
    };
  };
}

class UserService {
  @range(1, 150)
  accessor age = 0;

  @measure
  async fetchUser(id) {
    return this.db.query('SELECT * FROM users WHERE id = ?', [id]);
  }
}

// Class decorator — dependency injection / registration
function injectable(target, context) {
  target[Symbol.for('injectable')] = true;
  return target;
}

@injectable
class EmailService {
  send(to, subject, body) { /* ... */ }
}

---

Temporal API (Stage 3)

// Modern date/time — replaces the broken Date object
// Available via polyfill: npm install @js-temporal/polyfill

import { Temporal } from '@js-temporal/polyfill';

// Plain date — no timezone
const today = Temporal.PlainDate.from('2024-03-15');
const tomorrow = today.add({ days: 1 });
const nextMonth = today.add({ months: 1 });

today.toString();  // '2024-03-15'

// Zoned date/time — with timezone
const nyNow = Temporal.Now.zonedDateTimeISO('America/New_York');
const tokyoNow = nyNow.withTimeZone('Asia/Tokyo');

// Duration arithmetic
const meeting = Temporal.ZonedDateTime.from({
  year: 2024, month: 3, day: 20,
  hour: 14, minute: 30,
  timeZone: 'America/Chicago',
});

const now = Temporal.Now.zonedDateTimeISO('America/Chicago');
const until = now.until(meeting);
console.log(`Meeting in ${until.hours}h ${until.minutes}m`);

// Comparison
const d1 = Temporal.PlainDate.from('2024-01-01');
const d2 = Temporal.PlainDate.from('2024-06-01');
Temporal.PlainDate.compare(d1, d2); // -1 (d1 < d2)

// Instant — machine time (like Date.now())
const start = Temporal.Now.instant();
await doWork();
const elapsed = Temporal.Now.instant().since(start);
console.log(`Took ${elapsed.milliseconds}ms`);

---

Signals Proposal (Stage 1)

// Reactive primitives — the foundation that Vue, Solid, and Preact Signals built on
// This is a native proposal; for now use framework-specific implementations

// Framework-specific examples (same concept, different API):

// Preact Signals
import { signal, computed, effect } from '@preact/signals-core';

const count = signal(0);
const doubled = computed(() => count.value * 2);

effect(() => {
  console.log(`count: ${count.value}, doubled: ${doubled.value}`);
});

count.value = 5; // triggers effect: "count: 5, doubled: 10"

// SolidJS createSignal
import { createSignal, createMemo, createEffect } from 'solid-js';

const [count, setCount] = createSignal(0);
const doubled = createMemo(() => count() * 2);
createEffect(() => console.log(count(), doubled()));
setCount(5);

---

Records and Tuples (Stage 2)

// Immutable, value-typed data structures
// Syntax uses # prefix

// Record — immutable plain object
const point = #{ x: 1, y: 2 };
const point2 = #{ x: 1, y: 2 };
point === point2; // true — compared by VALUE, not reference!

// Tuple — immutable array
const coords = #[1, 2, 3];
const coords2 = #[1, 2, 3];
coords === coords2; // true

// Spread works
const point3D = #{ ...point, z: 3 };

// Cannot contain mutable objects
#{ fn: () => {} }; // TypeError — no functions in Records
#{ obj: {} };      // TypeError — no objects in Records
// Can contain: primitives, other Records, other Tuples, Symbols

// Use case: React state comparison, Map keys by value
const map = new Map();
map.set(#{ x: 1, y: 2 }, 'first quadrant');
map.get(#{ x: 1, y: 2 }); // 'first quadrant' — value equality!