JavaScript Loops Practice

Performance note: Native loops (for, while) are marginally faster than array methods (map, forEach) in micro-benchmarks, but the difference rarely matters in practice. Choose based on readability and intent. Optimize only if profiling shows a bottleneck. If you're coming from Python, the Python vs JavaScript loops comparison covers the key differences in iteration style.

const arr = ['a', 'b', 'c'];

// for...of iterates VALUES
for (const item of arr) {
  console.log(item);  // 'a', 'b', 'c'
}

// for...in iterates KEYS (as strings!)
for (const key in arr) {
  console.log(key);   // '0', '1', '2' (strings, not numbers!)
}

Why for...in is dangerous on arrays

// Add something to Array prototype (libraries sometimes do this)
Array.prototype.customMethod = function() {};

const arr = ['a', 'b', 'c'];

for (const key in arr) {
  console.log(key);
}
// Output: '0', '1', '2', 'customMethod' (includes inherited!)

Rule: Use for...of for arrays. Use for...in only for objects when you understand the implications.

for...in for objects (the valid use case)

const config = { host: 'localhost', port: 8080 };

// Works, but includes inherited enumerable properties
for (const key in config) {
  console.log(key, config[key]);
}

// Better: Object.entries gives you key-value pairs without inheritance issues
for (const [key, value] of Object.entries(config)) {
  console.log(key, value);
}

1. for...in includes inherited enumerable properties

const parent = { inherited: true };
const child = Object.create(parent);
child.own = 'value';

for (const key in child) {
  console.log(key);  // 'own', 'inherited' (both appear!)
}

// Filter to own properties only:
for (const key in child) {
  if (Object.hasOwn(child, key)) {
    console.log(key);  // 'own' only
  }
}

2. forEach can't break and doesn't await

// CAN'T BREAK
items.forEach(item => {
  if (item.done) return;  // This only skips current iteration!
  // break; // SyntaxError: break doesn't work here
});

// DOESN'T AWAIT
items.forEach(async item => {
  await processItem(item);  // These all fire at once!
});
console.log('Done');  // Runs immediately, doesn't wait

Fix: Use for...of for break/continue and sequential async:

for (const item of items) {
  if (item.done) break;  // Works!
  await processItem(item);  // Sequential!
}

3. reduce without initial value throws on empty arrays

// THROWS on empty array
[].reduce((sum, n) => sum + n);  // TypeError!

// SAFE with initial value
[].reduce((sum, n) => sum + n, 0);  // Returns 0

The classic for loop gives you index access, break/continue, and full control:

// Index-based iteration
for (let i = 0; i < items.length; i++) {
  console.log(i, items[i]);
}

// Iterate backwards
for (let i = items.length - 1; i >= 0; i--) {
  console.log(items[i]);
}

// Skip every other item
for (let i = 0; i < items.length; i += 2) {
  console.log(items[i]);
}

// Early exit with break
for (let i = 0; i < items.length; i++) {
  if (found(items[i])) break;
}

When to use classic for vs for...of

Labeled statements: breaking out of nested loops

When you need to break out of an outer loop from inside an inner loop, use a label:

outer: for (let i = 0; i < matrix.length; i++) {
  for (let j = 0; j < matrix[i].length; j++) {
    if (matrix[i][j] === target) {
      console.log(`Found at [${i}][${j}]`);
      break outer;  // Breaks out of BOTH loops
    }
  }
}

Labels are rare in modern code (extracting to a function with return is often cleaner), but they're the only way to break outer loops without flags.

Use while when iteration count is unknown:

// Retry with backoff
let attempts = 0;
while (attempts < maxRetries) {
  const result = await tryOperation();
  if (result.success) break;
  attempts++;
  await sleep(2 ** attempts * 100);
}

// Process queue until empty
while (queue.length > 0) {
  const item = queue.shift();
  process(item);
}

// Read until sentinel
let line;
while ((line = readline()) !== null) {
  process(line);
}

do...while: always runs at least once

let input;
do {
  input = prompt('Enter a number > 0:');
} while (isNaN(input) || input <= 0);

Transformation: map

Returns a new array with each element transformed:

const doubled = nums.map(n => n * 2);
const names = users.map(u => u.name);

Filtering: filter

Returns elements that pass the test:

const adults = users.filter(u => u.age >= 18);
const nonEmpty = strings.filter(s => s.length > 0);

Pipeline pattern: filter + map

const activeUserNames = users
  .filter(u => u.active)
  .map(u => u.name);

Short-circuit methods: find, some, every

These stop as soon as the answer is known:

// find: first match or undefined
const admin = users.find(u => u.role === 'admin');

// findIndex: index of first match or -1
const idx = users.findIndex(u => u.role === 'admin');

// some: does ANY element pass?
const hasAdmin = users.some(u => u.role === 'admin');

// every: do ALL elements pass?
const allActive = users.every(u => u.active);

Aggregation: reduce

// Sum (always include initial value!)
const total = nums.reduce((sum, n) => sum + n, 0);

// Build object from array
const byId = users.reduce((acc, user) => {
  acc[user.id] = user;
  return acc;
}, {});

Object.entries: key-value pairs

const config = { host: 'localhost', port: 8080 };

for (const [key, value] of Object.entries(config)) {
  console.log(`${key}: ${value}`);
}

Object.keys: just keys

for (const key of Object.keys(config)) {
  console.log(key);
}

Object.values: just values

for (const value of Object.values(config)) {
  console.log(value);
}

All three methods return arrays, so you can use array methods. For a printable reference of all array methods, see the JavaScript array methods cheat sheet.

const hasPort = Object.keys(config).includes('port');
const values = Object.values(config).filter(v => v != null);

• MDN: Loops and iteration
• MDN: for...of
• MDN: for...in
• MDN: Array methods
• MDN: Object.entries()