Looping Utilities API reference for looping and iteration utility functions repeat API Reference
Categories

Looping Utilities

The Looping utilities provide functions for iterating over arrays, objects, Sets, and Maps in JavaScript. These functions offer flexible ways to loop through data structures, often providing more concise alternatives to traditional for loops.

Functions

each

function each(obj, func, context)

Iterates over an array, object, Set, or Map, invoking the provided function for each element.

Parameters

NameTypeDescription
objobject/array/Set/MapThe collection to iterate over
funcfunctionThe function to invoke for each element. Receives (value, key/index, collection)
contextobjectOptional. The context to bind the function to

Returns

The original object or array.

Example

import { each } from '@semantic-ui/utils';


// Array iteration
each([1, 2, 3], (num, index) => {
  console.log(`Number at index ${index}: ${num}`);
});


// Object iteration
each({ a: 1, b: 2 }, (value, key) => {
  console.log(`${key}: ${value}`);
});


// Set iteration (index is 0-based counter)
each(new Set(['apple', 'banana']), (value, index) => {
  console.log(`Set item ${index}: ${value}`);
});


// Map iteration (preserves key types)
each(new Map([['key1', 'value1'], ['key2', 'value2']]), (value, key) => {
  console.log(`${key}: ${value}`);
});


// Breaking early
each([1, 2, 3, 4], (value) => {
  console.log(value);
  if (value === 2) return false; // stops iteration
});

Flexible Iteration This function can iterate over arrays, array-like objects (e.g., NodeList), plain objects, Sets, and Maps. It uses for...of for iterables (Set/Map), arrays for array-likes, and Object.keys() for plain objects. Return false from the callback to break iteration early.

asyncEach

function asyncEach(obj, func, context)

Asynchronously iterates over an array, object, Set, or Map, invoking the provided async function for each element.

Parameters

NameTypeDescription
objobject/array/Set/MapThe collection to iterate over
funcasync functionThe async function to invoke for each element. Receives (value, key/index, collection)
contextobjectOptional. The context to bind the function to

Returns

A Promise that resolves to the original object or array.

Example

import { asyncEach } from '@semantic-ui/utils';


// Array iteration
await asyncEach([1, 2, 3], async (num, index) => {
  await someAsyncOperation(num);
  console.log(`Processed number at index ${index}: ${num}`);
});


// Set iteration
await asyncEach(new Set(['a', 'b', 'c']), async (value, index) => {
  await processValue(value);
  console.log(`Processed Set item ${index}: ${value}`);
});


// Map iteration
await asyncEach(new Map([['id', 123], ['name', 'John']]), async (value, key) => {
  await updateField(key, value);
  console.log(`Updated ${key}: ${value}`);
});


// Breaking early
await asyncEach([1, 2, 3], async (value) => {
  const result = await checkValue(value);
  if (!result) return false; // stops iteration
});

asyncMap

function asyncMap(obj, func, context)

Asynchronously maps over an array, object, Set, or Map, invoking the provided function for each element and collecting the results.

Parameters

NameTypeDescription
objobject/array/Set/MapThe collection to map over
funcasync functionThe async function to invoke for each element. Receives (value, key/index, collection)
contextobjectOptional. The context to bind the function to

Returns

A Promise that resolves to a new collection with the mapped values. Arrays and objects return the same type, Sets return arrays, Maps return new Maps with the same keys.

Example

import { asyncMap } from '@semantic-ui/utils';


// Array mapping
const numbers = [1, 2, 3];
const doubled = await asyncMap(numbers, async (num) => {
  await someAsyncOperation();
  return num * 2;
});
console.log(doubled); // [2, 4, 6]


// Object mapping
const obj = { a: 1, b: 2, c: 3 };
const mappedObj = await asyncMap(obj, async (value, key) => {
  return await processValue(value);
});
console.log(mappedObj); // { a: processedValue1, b: processedValue2, c: processedValue3 }


// Set mapping (returns array)
const mySet = new Set(['apple', 'banana', 'cherry']);
const uppercased = await asyncMap(mySet, async (fruit, index) => {
  await delay(50);
  return fruit.toUpperCase();
});
console.log(uppercased); // ['APPLE', 'BANANA', 'CHERRY']


// Map mapping (returns new Map with same keys)
const userMap = new Map([
  ['user1', { name: 'John', age: 25 }],
  ['user2', { name: 'Jane', age: 30 }]
]);
const enrichedUsers = await asyncMap(userMap, async (user, userId) => {
  const permissions = await fetchUserPermissions(userId);
  return { ...user, permissions };
});
// Returns Map with same keys but enriched user objects

These looping utilities provide powerful tools for iterating over and manipulating data structures in JavaScript, supporting both synchronous and asynchronous operations. They offer more flexibility and often more concise syntax compared to traditional looping methods.
Previous
Functions
Next
Numbers