The Standard for Loop

The traditional statement provides explicit control over iteration state. It initializes a counter, evaluates a termination condition, and increments on each pass. This pattern remains ideal when you need direct access to indices or require early termination via break.

const digits = [8, 9, 10, 11];
for (let i = 0, total = digits.length; i < total; i++) {
  console.log(`Position ${i} contains ${digits[i]}`);
}

Collection Traversal with forEach()

This method executes a provided callback once for each available element. It passes three arguments to the function: the current element, its index, and the array reference. Note that it explicitly returns undefined and cannot be interrupted with break or continue.

digits.forEach((currentValue, currentIndex, sourceCollection) => {
  console.log(`Index ${currentIndex}: ${currentValue}`);
});

Data Transformation via map()

Structurally identical to forEach, map constructs and returns a brand new array populated with the values yeilded by the callback. This functional approach keeps original data immutable.

const transformed = digits.map((val, idx) => {
  console.log(`Processing item at index ${idx}: ${val}`);
  return val * 2;
});
console.log(transformed); // [16, 18, 20, 22]

Other higher-order functions like filter(), reduce(), every(), and some() follow comparable signatures and should be selected based on whether you need boolean checks, accumulation, or subset extraction.

Property Enumeration using for...in

This construct iterates over all enumerable string-keyed properties. While syntactically compatible with arrays, it is primari intended for plain objects. It yields property keys rather than values.

const config = { mode: 'debug', limit: 5 };
for (const key in config) {
  if (Object.hasOwn(config, key)) {
    console.log(`Key: ${key} | Value: ${config[key]}`);
  }
}

When applied to arrays, for...in enumerates numeric indices and will also capture non-index properties manually attached to the array instance:

const labels = ['x', 'y'];
labels.customAttr = 'metadata';
for (const idx in labels) {
  console.log(idx, labels[idx]); 
  // Outputs: 0 'x', 1 'y', 'customAttr' 'metadata'
}

Value Extraction with for...of

Designed specifically for iterable protocols, this loop yields the actual data values directly. It works seamless with arrays, strings, Maps, and Sets. Unlike for...in, it skips prototype chain properties and does not expose indices.

for (const num of digits) {
  console.log(`Direct value: ${num}`);
}

Objects lack an inherent iteration protocol, so attempting to use for...of directly throws a TypeError. You must explicitly extract keys or entries first:

for (const propName of Object.keys(config)) {
  console.log(`Property identifier: ${propName}`);
}

Implementation Reference

• Array traversal with index access: for, forEach
• Array mapping and immutability: map, filter, reduce
• Direct value consumption: for...of
• Object property enumeration: for...in