Data storage is only half the battle. To build useful apps, you must iterate through that data to display, filter, and transform it. JavaScript offers three main approaches — each with distinct strengths.
1The Classic for Loop — Total Control
The classic for loop is the most verbose but most flexible iteration tool. It has three parts separated by semicolons: the initializer (let i = 0), the condition (i < arr.length), and the increment (i++). You control exactly where to start, when to stop, and how to advance.
2for...of — Modern Value Extraction
The for...of loop is the recommended way to iterate arrays in modern JavaScript. It extracts the value of each element directly — no counter variable, no .length check, no bracket notation. This eliminates off-by-one errors and makes your intent clear.
3for...in — Why You Should NEVER Use It on Arrays
for...in is designed for enumerating the properties of objects, not arrays. When used on an array, it returns the indices as strings ('0', '1', '2'), not numbers. This means key + 1 produces '01' instead of 1 — a subtle but dangerous bug.
4.forEach() — Functional Iteration with Callbacks
.forEach() is an array method that embraces the functional paradigm. Instead of managing a counter, you pass a callback function that receives the current value, index, and the full array. It executes that callback once for each element.
5Decision Framework: Which Loop to Use
for...of: default choice for 90% of iterations — clean, safe, works on all iterables. Classic for: when you need backwards iteration, index skipping, or early exit with break. .forEach(): when you prefer a functional style for side effects (logging, DOM updates) and don't need break. for...in: only for objects — never arrays.
