skills.rest
lxsmnsyc
lxsmnsycCOMMUNITY
Explore all skills by this author →
Website𝕏@lxsmnsycGitHub

prefer-for-of

Rewrites callback-based Array methods as for-of loops in TypeScript source code.

2|1|Updated Jun 28, 2026
Search Tags:#typescript#performance#refactoring#solid#loops#array methods#for-of
One-click install
npx skills add https://github.com/lxsmnsyc/overwander --skill prefer-for-of-lxsmnsyc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: prefer-for-of
Source: https://github.com/lxsmnsyc/overwander/tree/main/.agents/skills/prefer-for-of
Command: npx skills add https://github.com/lxsmnsyc/overwander --skill prefer-for-of-lxsmnsyc

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Callback-taking Array methods like map, filter, and forEach allocate closures and run slower than plain loops, which matters in performance-sensitive code such as per-frame rendering, procedural world generation, and real-time battle engines. ## Core Features & Use Cases - Method-to-loop conversion: Rewrites map, filter, forEach, reduce, some, every, find, flatMap, and chained calls as single-pass for-of loops with early exit via break or return. - Framework-aware exceptions: Preserves Solid JSX rendering with <For each={...}>, keeps sort comparators and non-callback methods like join and slice, and avoids false positives such as Supabase query .filter(...) calls. - Use Case: While editing a Solid component, you write party.filter(u => u.alive).map(u => u.name); the Skill rewrites it as one typed for-of loop that stays inside the tracked scope so Solid reactivity keeps working. ## Quick Start Ask the assistant to rewrite the Array method chains in this file as for-of loops following the prefer-for-of rules.

Frequently Asked Questions about prefer-for-of

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I replace map and filter with a for loop in JavaScript?▼

Combine chained map and filter calls into a single for-of loop that pushes matching, transformed items into a typed accumulator array. Declare the accumulator with an explicit type such as const names: string[] = [] so callers see the same inferred result.

Why use for-of instead of forEach or map for performance?▼

Array methods that take callbacks allocate a closure per call and capture state, making them generally slower than a plain loop. In hot paths like per-frame drawing, procedural generation, or real-time engines, for-of avoids that overhead.

Does replacing map with a loop break Solid reactivity?▼

It can if the loop is hoisted out of a JSX expression, memo, or effect, because the loop then stops being tracked. Keep the loop inside the same tracked scope as the accessor or memo it came from, and render lists with <For each={...}> rather than an inline map.

When should I keep Array methods instead of converting to loops?▼

Keep methods that take no per-item callback such as sort, join, slice, includes, indexOf, concat, push, and at, plus sort comparators no loop replaces. Also leave lookalikes alone, like a Supabase query's .filter(...) or a promise's .then(...).

How do I convert Promise.all with map into a for-of loop?▼

Replace Promise.all(items.map(async ...)) with a for-of loop that pushes each promise into an array, then call Promise.all over that collected array. This preserves concurrent execution while removing the mapping callback.

Related Skills

Explore More Software Engineering Skills→
deckgl-fiber-rendererdeckgl-fiber-renderer
17

accelint-ts-performance

Identify performance anti-patterns in JavaScript and TypeScript projects using a four-phase workflow.

Official
Advanced
rohitg00rohitg00
2.8k

deslop

Removes AI-generated code slop and over-engineering from branch diffs.

Community
Intermediate
OpenAEC-FoundationOpenAEC-Foundation
4

solid-impl-solidstart

Enforce correct SolidStart server and data-loading patterns to prevent hydration errors.

Official
Advanced
oxc-projectoxc-project
22.3k

migrate-oxlint

Migrate ESLint configurations to Oxlint and generate a compatible Oxlint setup.

Official
Intermediate