Control Flow: Iteration (for..of vs for..in) & Array Higher-Order Methods

1Concept

for..of iterates over iterable values (Arrays, Maps, Sets). for..in iterates over object keys. Array methods (map, filter, reduce) provide declarative transformations.

2Architecture Diagram

for..of ──► Iterates VALUES of arrays
for..in ──► Iterates KEYS / property names of objects

3Code Example

const frameworks = ["React", "Angular", "Vue"];

// for..of (Values)
for (const f of frameworks) {
    console.log(`Framework: ${f}`);
}

// Functional pipeline
const scores = [65, 88, 92, 45, 95];
const topScoresTotal = scores
    .filter(s => s >= 80)
    .reduce((acc, s) => acc + s, 0);

console.log(`Sum of top scores: ${topScoresTotal}`);

4Expected Output

Framework: React
Framework: Angular
Framework: Vue
Sum of top scores: 275

5Key Takeaways

• ✓Use for..of for arrays and for..in for object keys.
• ✓Array.prototype.map creates a new array without mutating original.
• ✓reduce accumulates array items into single values.