Javascript

JavaScript Skill

Overview

JavaScript's flexibility is both its strength and weakness. This skill guides writing predictable, maintainable JavaScript that avoids common pitfalls.

Core principle: Explicit is better than implicit. JavaScript's type coercion and dynamic nature require discipline to write reliably.

The JavaScript Development Process

Phase 1: Choose Patterns

Before writing implementation:

1. Module System

   • Use ES modules (import/export) for new code
   • CommonJS only for Node.js legacy compatibility
   • Don't mix in the same file

2. Async Strategy

   • Use async/await over .then() chains
   • Handle all promise rejections
   • Consider Promise.all for parallel operations

3. Error Handling

   • Define custom error types
   • Always catch specific errors
   • Re-throw unexpected errors

Phase 2: Write Defensively

Avoid JavaScript's pitfalls:

1. Use Strict Comparisons

   // ✅ Always use ===
   if (value === null) { }
   
   // ❌ Type coercion surprises
   if (value == null) { }  // Only OK for null/undefined check
   

2. Prefer const/let

   // ✅ Immutable by default
   const config = { api: 'https://...' };
   
   // ✅ let for reassignment
   let count = 0;
   
   // ❌ Never use var
   var x = 1;  // Hoisting bugs
   

3. Handle Nullish Values

   // ✅ Nullish coalescing for defaults
   const name = user.name ?? 'Anonymous';
   
   // ❌ || has falsy trap (0, '', false)
   const count = data.count || 10;  // 0 becomes 10!
   

Phase 3: Review for Quality

Before approving:

1. Check Async Handling

   • All promises awaited or caught?
   • No floating promises?
   • Error boundaries in place?

2. Check Immutability

   • Arguments not mutated?
   • Objects cloned before modification?
   • const used where possible?

3. Check Iteration

   • for...of for arrays (not for...in)?
   • Appropriate array method used?
   • No mutation in map/filter?

Red Flags - STOP and Fix

Type Coercion Red Flags

// Loose equality (surprises)
if (x == y) { }

// Falsy trap with ||
const value = input || default;  // 0, '', false become default

// typeof null bug
typeof null === 'object'  // true! Check explicitly

// Array type check
typeof [] === 'object'  // true! Use Array.isArray()

Async Red Flags

// Floating promise (unhandled rejection)
doAsyncThing();

// forEach with async (doesn't wait)
items.forEach(async (item) => {
  await process(item);  // Doesn't wait!
});

// Missing error handling
const data = await fetch(url);  // What if it fails?

Mutation Red Flags

// Mutating function arguments
function process(options) {
  options.processed = true;  // Mutates caller's object!
}

// Mutating in map
items.map(item => {
  item.processed = true;  // Mutates original!
  return item;
});

// Shallow copy trap
const copy = { ...original };
copy.nested.value = 1;  // Also mutates original.nested!

Common Rationalizations - Don't Accept These

JavaScript Checklist

Before approving JavaScript code:

• Strict equality: Using === not ==
• const/let: No var usage
• Async handled: All promises awaited or caught
• No mutation: Arguments and arrays not mutated
• Nullish: Using ?? not || for defaults
• Error handling: Errors caught and handled
• Linting: ESLint configured and passing

Quick Patterns

Safe Defaults

// ✅ Nullish coalescing
const count = data.count ?? 0;
const name = user?.name ?? 'Anonymous';

// ✅ Default parameters
function greet(name = 'World') {
  return `Hello, ${name}!`;
}

// ✅ Destructuring with defaults
const { timeout = 5000, retries = 3 } = options;

Async/Await

// ✅ Proper error handling
async function fetchUser(id) {
  try {
    const response = await fetch(`/api/users/${id}`);
    if (!response.ok) {
      throw new Error(`HTTP ${response.status}`);
    }
    return await response.json();
  } catch (error) {
    console.error('Failed to fetch user:', error);
    throw error;
  }
}

// ✅ Parallel execution
const [users, posts] = await Promise.all([
  fetchUsers(),
  fetchPosts(),
]);

Immutable Updates

// ✅ Shallow clone
const updated = { ...original, status: 'active' };

// ✅ Array without mutation
const added = [...items, newItem];
const removed = items.filter(i => i.id !== id);
const modified = items.map(i =>
  i.id === id ? { ...i, status: 'done' } : i
);

Quick Commands

# Linting
npx eslint . --fix

# Formatting
npx prettier --write .

# Testing
npm test

# Security
npm audit

References

Detailed patterns and examples in references/:

• es6-patterns.md - Modern JavaScript features
• async-patterns.md - Promise and async/await patterns
• common-mistakes.md - JavaScript gotchas and fixes

Converted and distributed by TomeVault — claim your Tome and manage your conversions.