htlin222/javascript

JavaScript Development

Write modern, clean JavaScript and TypeScript.

When to Use

• Writing JavaScript/TypeScript code
• Async debugging and optimization
• Node.js development
• Browser compatibility issues
• Module system questions

Modern JavaScript Patterns

Async/Await

// Prefer async/await over promise chains
async function fetchData() {
  try {
    const response = await fetch(url);
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    return await response.json();
  } catch (error) {
    console.error("Fetch failed:", error);
    throw error;
  }
}

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

// Error handling for multiple promises
const results = await Promise.allSettled([task1(), task2(), task3()]);
const succeeded = results.filter((r) => r.status === "fulfilled");

Destructuring and Spread

// Object destructuring with defaults
const { name, age = 0, ...rest } = user;

// Array methods
const active = users.filter((u) => u.active).map((u) => u.name);

// Object spread for immutable updates
const updated = { ...user, name: "New Name" };

Classes and Modules

// ES modules
export class UserService {
  #privateField; // Private field

  constructor(config) {
    this.#privateField = config.secret;
  }

  async getUser(id) {
    return await this.#fetch(`/users/${id}`);
  }
}

// Named and default exports
export { UserService };
export default UserService;

TypeScript Patterns

// Interfaces over types for objects
interface User {
  id: string;
  name: string;
  email?: string;
}

// Generics
function first<T>(arr: T[]): T | undefined {
  return arr[0];
}

// Utility types
type CreateUser = Omit<User, "id">;
type ReadonlyUser = Readonly<User>;

Node.js Patterns

// ESM in Node.js
import { readFile } from "fs/promises";
import { fileURLToPath } from "url";

const __dirname = fileURLToPath(new URL(".", import.meta.url));

// Streams for large files
import { createReadStream, createWriteStream } from "fs";
import { pipeline } from "stream/promises";

await pipeline(
  createReadStream("input"),
  transform,
  createWriteStream("output"),
);

Common Gotchas

• this binding (use arrow functions or .bind())
• Floating promises (always await or handle)
• == vs === (always use ===)
• Array mutation (map/filter return new arrays, sort mutates)

Examples

Input: "Fix async issue" Action: Check for unhandled promises, race conditions, proper error handling

Input: "Convert to TypeScript" Action: Add types, interfaces, fix type errors, configure tsconfig