Write idiomatic TypeScript and JavaScript with efficiency patterns

This TypeScript and JavaScript reference guides idiomatic code changes across collections, destructuring, asynchronous operations, functions, types, and React. It presents compact alternatives to common patterns while requiring preservation of behavior, ownership, error handling, accessibility, and security. The examples are independent fragments, so they require contextual review before being treated as equivalent rewrites.

For arrays and objects, the reference demonstrates filtering and mapping active items, reducing values into a total, using object spread for updates, and optional chaining for nested property access. Destructuring covers named properties, array elements, array merging, and omitting a property without deleting it from the original object. Optional nested access can use:

const city = user.address?.city

Asynchronous examples use async/await with error handling, combine independent requests through Promise.all, and remove unnecessary Promise wrappers. An async map returns promises without waiting for completion. The guide calls for collecting bounded independent work with Promise.all or using a sequential loop when ordering or rate limits require it.

Use the skill for language-specific implementation and cleanup within a requested scope. Existing project conventions remain authoritative. Verify language and library versions and run relevant checks rather than assuming every example fits the installed environment.

These guidelines do not cover overall architecture. Brevity must not override required tests or user-facing progress and results, and excessive compression can reduce readability. Do not install dependencies or delete files merely to follow the examples. A shorter expression is useful only when it retains the behavior and boundaries required by the task.

Inputs are existing code fragments and their project context. Outputs are scoped code revisions applying suitable collection, function, asynchronous, typing, or component patterns. Function guidance includes concise arrow expressions and avoiding unnecessary module-scope wrappers. Its fallback example deliberately preserves empty-string behavior instead of changing semantics while shortening the code.

Typing guidance allows inference for obvious return values, replaces unsafe any usage with an appropriate type, generic, or guarded unknown, and uses inline shapes for single-use parameters. Reusable shapes can move into an interface. Types suit unions, intersections, and aliases, while interfaces suit extensible object shapes. Runtime checks should validate a DOM element before use rather than asserting a type to suppress a real error.

The anti-pattern reference also covers variable declarations, array iteration, unnecessary template literals, boolean coercion, object entry iteration, deeply nested ternaries, production logging, and swallowed exceptions. Null and undefined checks need to reflect the intended condition, including cases where both values are acceptable.

The React section applies when the project uses React. It recommends computing derived values during render rather than maintaining them through an effect. Callback memoization is reserved for relevant dependency or memoized-child cases. Object props can use memoization or a static definition to control references, and reorderable or filtered lists should use stable item identifiers as keys. These component examples remain subject to the same behavior, accessibility, and project-convention checks as the language examples.