JavaScript Array Iteration
songs holds rain, tide, and dusk, and the count is frozen for this whole page. forEach is the visit, not a resize.
Length does not move
Unlike a bare for...of, this walk is a method call that can also hand you the index. No title is appended. No title is removed.
The function you hand over
You pass a function, and that function runs once for each song. The card below is the contract.
📊 What forEach hands you
| Piece | When you get it | It is not |
|---|---|---|
| first argument | on every visit | the length |
| second argument | only if you name it | required |
| result of the call | when forEach finishes |
a new array |
length afterward |
when you read songs.length |
changed by the visit |
The song is the first argument. The index is the second argument, and you may leave it out.
Order on the console
Print every title and expect rain, then tide, then dusk.
let songs = ["rain", "tide", "dusk"];
songs.forEach(function (title) {
console.log(title);
});
Three lines appear. They follow the array from front to back. The three strings are still in the same slots.
let songs = ["rain", "tide", "dusk"];
songs.forEach(function (title, i) {
console.log(i);
console.log(title);
});
Zero belongs to rain. Two belongs to dusk, with tide at one.
let songs = ["rain", "tide", "dusk"];
let result = songs.forEach(function (title) {
console.log(title);
});
console.log(result);
console.log(songs.length);
Store the call and print that variable. The print is undefined. undefined is not a title. The length print is 3.
let songs = ["rain", "tide", "dusk"];
songs.forEach(function (title) {
if (title === "tide") {
return;
}
console.log(title);
});
tide is skipped in the log, and dusk still appears.
let songs = ["rain", "tide", "dusk"];
let seen = 0;
songs.forEach(function (title) {
seen = seen + 1;
});
console.log(seen);
console.log(songs.length);
The counter lands on 3. The playlist length is also 3, and those two numbers happen to match.
Titles in the paragraph
Build one string with a space between titles. Put that string in the paragraph. Leave the length out of the line.
<!DOCTYPE html>
<html>
<head>
<title>array-iteration — page</title>
</head>
<body>
<p id="line">…</p>
<script>
let songs = ["rain", "tide", "dusk"];
let line = "";
songs.forEach(function (title) {
if (line !== "") {
line = line + " ";
}
line = line + title;
});
let box = document.getElementById("line");
box.textContent = line;
</script>
</body>
</html>
The line reads rain tide dusk. Change tide to fog and refresh. The middle word changes. The visit still covers three titles.
Do the walk
- Print the three titles and check that rain comes first
- Print each index and check that rain is 0
- Save the call result and check for undefined while length stays 3
- Return at once on tide and check that dusk still prints
- Add 1 to seen on every visit and check that seen is 3
- Read the page line, switch tide to fog, and refresh
Easy to misread
- Expecting the call to hand back the last title
- Expecting the call to hand back the length
- Writing break inside the callback, which is a syntax error
- Assuming return cancels dusk after tide
- Reading the second parameter as the title
- Reaching for a value search on this page
Leave with this
- forEach visits every item from front to back
- The first parameter is the item
- The second parameter is the index
- The call result is undefined
- return inside the callback skips only that visit
- The next page searches by value
🧠 Test Your Knowledge
Test Your Knowledge
Challenge yourself with this interactive quiz and see how well you understand the topic
📝 Instructions
- Read each question carefully
- Select the best answer for each question
- You can retake the quiz as many times as you want
- Your progress will be shown at the top