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