/frontend-js-best-practices

Combine Multiple Array Iterations

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

Incorrect (3 iterations):

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

Correct (1 iteration):

let admins: User[] = [];
let testers: User[] = [];
let inactive: User[] = [];

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

Alternative using Array#reduce:

type UserGroup = "admins" | "testers" | "inactive";

let { admins, testers, inactive } = users.reduce(
  (acc, user) => {
    if (user.isAdmin) acc.admins.push(user);
    if (user.isTester) acc.testers.push(user);
    if (!user.isActive) acc.inactive.push(user);
    return acc;
  },
  { admins: [], testers: [], inactive: [] } as Record<UserGroup, User[]>,
);