Back to JavaScript Performance

Combine Multiple Array Iterations

javascriptarraysloopsperformance
28.0k🕒 2026-06-10Source ↗

Install this skill

npx skills add vercel-labs/agent-skills

Works across Claude Code, Cursor, Codex, Copilot & Antigravity

Chaining high-order array methods like map, filter, or reduce creates redundant traversals over the same dataset. Every time a functional method is called on an array, the engine iterates through all elements to produce a new result. When processing large arrays, these repeated passes increase CPU usage and memory pressure unnecessarily. This skill refactors multiple iterative passes into a single imperative loop structure. By capturing multiple outcomes within one traversal of the data, the code executes faster and reduces the garbage collection overhead. This pattern is particularly useful when handling large collections where performance bottlenecks occur during data transformation or segmentation tasks. It simplifies complex logic into a single point of entry, making the data processing flow transparent and efficient for resource-constrained environments.

When to Use This Skill

  • Categorizing user records based on multiple distinct role flags
  • Splitting a master list into separate arrays based on status types
  • Processing large API responses that require multiple validation checks
  • Extracting metadata while simultaneously filtering invalid entries

How to Invoke This Skill

Example prompts that trigger this skill in Claude Code, Cursor, or Antigravity:

  • Optimize my array iteration code
  • Combine these multiple filter calls into one
  • Refactor this map and filter chain for better performance
  • Make my data processing logic more efficient
  • How do I reduce multiple loops over an array?

What this skill does

  • Consolidates disparate filter operations into a single loop
  • Reduces total CPU cycles spent on array traversal
  • Minimizes intermediate array creation and memory allocation
  • Groups logical data segmentation tasks into one pass
  • Improves cache locality for large dataset processing

When not to use it

  • When arrays are small enough that the micro-optimization is negligible
  • When functional programming paradigms mandate keeping code immutable for readability
  • When logic for each task is complex enough to merit separate, testable functions

Example workflow

  1. Identify multiple array methods running on the same source
  2. Define empty storage containers for each desired output
  3. Replace the chain with a single for...of or traditional for loop
  4. Implement conditional logic inside the loop body to distribute items
  5. Verify the output arrays match the original functional implementation

Pitfalls & limitations

  • !Increased code verbosity compared to declarative chains
  • !Risk of mutating the loop incorrectly if not handled carefully
  • !Loss of function chaining expressiveness

FAQ

Does this approach break the functional programming style?
Yes, it favors imperative iteration over functional composition. While it sacrifices the declarative nature of chainable methods, it significantly improves execution speed for large datasets.
Is this optimization necessary for small arrays?
It is rarely necessary for small arrays. The performance gains are only meaningful when processing thousands or millions of entries where the cost of multiple iterations becomes measurable.
Can I use .reduce() instead of a for-loop?
Yes, a single .reduce() call can perform multiple tasks in one pass, though it can sometimes result in less readable code than an explicit loop.

How it compares

While generic prompts might suggest basic syntax fixes, this skill focuses on architectural performance by replacing chained declarations with single-pass imperative logic.

Source & trust

28k stars🕒 Updated 2026-06-10
📄 Full skill instructions — original source: vercel-labs/agent-skills
## Combine Multiple Array Iterations

Multiple .filter() or .map() calls iterate the array multiple times. Combine into one loop.

**Incorrect (3 iterations):**

const admins = users.filter(u => u.isAdmin)
const testers = users.filter(u => u.isTester)
const inactive = users.filter(u => !u.isActive)


**Correct (1 iteration):**

const admins: User[] = []
const testers: User[] = []
const inactive: User[] = []

for (const user of users) {
if (user.isAdmin) admins.push(user)
if (user.isTester) testers.push(user)
if (!user.isActive) inactive.push(user)
}

How to Use This Skill Unit

Option A: Project-Specific (Recommended)

  1. Click "Download" above
  2. In your project, create the directory: .agent/skills/js-combine-iterations/
  3. Save the file as SKILL.md
  4. The agent will automatically discover the skill based on its description.

Option B: Global Installation (All Agents)

Save the file to these locations to make it available across all projects:

  • Claude Code: ~/.claude/skills/vercel-labs/agent-skills/js-combine-iterations/SKILL.md
  • Cursor: ~/.cursor/skills/vercel-labs/agent-skills/js-combine-iterations/SKILL.md
  • Antigravity: ~/.gemini/antigravity/skills/vercel-labs/agent-skills/js-combine-iterations/SKILL.md

🚀 Install with CLI:
npx skills add vercel-labs/agent-skills

Read the Master Guide: Mastering Agent Skills

Recommended Rules

View more rules

Recommended Workflows

View more workflows

Recommended MCP Servers

View more MCP servers

Take It Further

Maximize your productivity with these powerful resources

📋

Define Your Standards

Set up coding standards to ensure this workflow produces consistent, high-quality results.

Browse Rules Library
📖

Master Workflows

Learn how to create custom workflows, use Turbo Mode, and build your automation library.

Complete Guide

How to use this Skill in Claude Code & Cursor

For Claude Code (CLI)

To use this skill in Claude Code, copy the rule content into your project's custom instructions or follow our Add-Skill CLI guide. This ensures Claude follows your standards during every code generation.

For Cursor & Windsurf

For Cursor or Windsurf, individual skills are best used in the "Rules for AI" section. This specific unit helps the agent avoid javascript performance issues, leading to cleaner, more efficient code.

Why the skill format matters: the standardized Agent Skills format lets your AI agent load detailed instructions only when they are relevant, keeping your prompt clean while improving results.

Source & attribution

This skill is categorized under JavaScript Performance and is published by Vercel Engineering, maintained in vercel-labs/agent-skills.

← Browse All Agent Skills
Sponsored AI assistant. Recommendations may be paid.