JavaScript Array Iteration
Iteration methods let you loop over every element in an array to run logic, transform data, or produce a summary without managing index variables yourself.
Iterating over arrays
Looping over the elements of an array is one of the most common tasks in JavaScript. While a classic for loop still works, arrays provide dedicated iteration methods that are shorter, clearer, and less error-prone. Each of these methods calls a function you supply once for every element, passing that element, its index, and the whole array as arguments.
The forEach method simply runs your function for each element and returns nothing; it is ideal when you want side effects such as logging or updating the page. When you need to build a new array or compute a value, reach for map, filter, or reduce instead, because they return results you can chain and reuse.
forEach and the for...of loop
<!DOCTYPE html>
<html>
<body>
<h2>forEach and the for...of loop</h2>
<script>
const cart = ["pen", "notebook", "eraser"];
// forEach gives you each element and its index
cart.forEach((item, index) => {
console.log(`${index + 1}. ${item}`);
});
// 1. pen
// 2. notebook
// 3. eraser
// for...of is a clean way to loop when you only need the values
for (const item of cart) {
console.log(item.toUpperCase());
}
</script>
</body>
</html>Testing and chaining
The some method returns true if at least one element passes a test, and every returns true only if all elements pass. Both stop as soon as the answer is known, which makes them efficient. Because map and filter return arrays, you can chain them together to express a multi-step transformation as a readable pipeline.
some, every, and chaining methods
<!DOCTYPE html>
<html>
<body>
<h2>some, every, and chaining methods</h2>
<script>
const ages = [18, 25, 32, 15, 40];
console.log(ages.some((age) => age < 18)); // true (15 is a minor)
console.log(ages.every((age) => age >= 18)); // false
// Chain filter and map into one pipeline
const adultLabels = ages
.filter((age) => age >= 18)
.map((age) => `${age} years`);
console.log(adultLabels); // ["18 years", "25 years", "32 years", "40 years"]
</script>
</body>
</html>- forEach runs a function for each element but returns undefined.
- map, filter, and reduce return new values you can store or chain.
- some returns true if any element passes; every requires all to pass.
- for...of is a simple loop when you only need element values.
- Chaining filter then map keeps multi-step transformations readable.
