{"id":"l-js-2-2","courseId":"javascript-fundamentals","lang":"en","kind":"lesson","summary":"Repeat work with for…of, the counting for loop and while, stop early with break and continue, and use the accumulator pattern to total a list of expenses.","html":"

So far every Pocket example added up a fixed number of expenses: coffee + lunch + bus. Real spending is a list that grows every day. You cannot write + for items you do not have yet. You need a way to say “do this for each one”, and that is a loop.

\n

A list to loop over

\n

Lists get a full lesson in section 3, but you need the basics now. A list of values in square brackets is an array:

\n
JavaScript
const amounts = [450, 1220, 270, 899];\nconsole.log(amounts.length);  // how many items\nconsole.log(amounts[0]);      // the first item: positions start at 0
\n

for…of: do this for each item

\n

for...of runs its block once per item, with a name of your choosing pointing at the current item:

\n
JavaScript
const amounts = [450, 1220, 270, 899];\n\nlet total = 0;\nfor (const amount of amounts) {\n  total += amount;\n}\nconsole.log(total);
\n

Walk through it the way the engine does. total starts at 0. First pass: amount is 450, so total becomes 450. Second pass: amount is 1220, total becomes 1670. Then 1940, then 2839. There are no items left, so the loop ends and the next line logs the total.

\n

This shape is called the accumulator pattern: declare a result before the loop, update it inside, use it after. It is behind totals, counts, maximums and almost every summary you will write. The const amount is fine even though it changes every pass: each pass creates a fresh amount, it is never reassigned.

\n

for...of also works on strings, one character at a time: for (const ch of "Pocket").

\n

The counting for loop

\n

Sometimes you need the position as well as the item, for example to print “1. Coffee”. The classic for loop has three parts in its parentheses:

\n
JavaScript
const labels = [\"Coffee\", \"Lunch\", \"Bus\"];\n\nfor (let i = 0; i < labels.length; i++) {\n  console.log(`${i + 1}. ${labels[i]}`);\n}
\n
\n A for loop runs the start part once, then repeatedly checks the condition, runs the body, and runs the update, until the condition is false and the loop exits.\n \n let i = 0\n \n i < labels.length?\n \n run the body\n \n i++\n \n exit\n \n \n true\n \n \n \n false\n runs once\n
The three parts of a for loop and the order they run in
\n

The start, let i = 0, runs once. Then, before every pass, the condition i < labels.length is checked; if it is true the body runs, then the update i++ adds one to i. When the condition becomes false the loop ends. With three labels, i takes the values 0, 1 and 2, exactly the valid indexes.

\n\n

while: repeat until something changes

\n

A while loop has only a condition. It is for situations where you know when to stop but not how many passes it will take. How many days can you keep buying a $4.50 coffee on a $20 budget?

\n
JavaScript
let balance = 2000;\nconst coffee = 450;\nlet days = 0;\n\nwhile (balance >= coffee) {\n  balance -= coffee;\n  days++;\n}\nconsole.log(`${days} coffees, ${balance} cents left`);
\n

Each pass reduces balance, so the condition eventually becomes false. If nothing in the body moved toward the exit, for example if you forgot balance -= coffee, the condition would stay true forever. That is an infinite loop: the page freezes and the browser eventually offers to stop the script. When a tab hangs while you are practising, look for a loop whose condition never changes.

\n

break and continue

\n

Two keywords change a loop’s flow from inside:

\n\n
JavaScript
const amounts = [450, -300, 1220, 270, 899];\nconst budget = 2000;\nlet running = 0;\n\nfor (const amount of amounts) {\n  if (amount < 0) {\n    continue; // a refund: not spending, skip it\n  }\n  running += amount;\n  if (running > budget) {\n    console.log(`Budget passed at an expense of ${amount}`);\n    break; // no need to look further\n  }\n}\nconsole.log(running);
\n

Trace it: 450 is added, then -300 is skipped, 1220 brings the total to 1670, 270 brings it to 1940, and 899 pushes it to 2839, which passes the budget, so the message is logged and the loop stops.

\n

Seeing what a loop does

\n

Loops are where beginners most often lose track of what the program is doing, because the same lines run many times with different values. The cure is to make the loop show you. Put a console.log at the top of the body that prints every variable involved:

\n
JavaScript
const amounts = [450, 1220, 270];\nlet total = 0;\nfor (let i = 0; i < amounts.length; i++) {\n  console.log({ i, amount: amounts[i], totalBefore: total });\n  total += amounts[i];\n}\nconsole.log(\"final\", total);
\n

Each pass prints one line, so you can compare what actually happened with what you expected and find the first pass where they differ. That pass is where your bug is. Wrapping the values in { } prints them with their names, which saves you guessing which number is which. Professional developers do exactly this every day; in section 5 you will learn to do it with the DevTools debugger as well.

\n\n

Loops and conditions together already let you write real logic. To reuse that logic instead of copying it, you need your own functions, which is the next lesson.

\n","toc":[{"id":"sec-1","text":"A list to loop over","level":2},{"id":"sec-2","text":"for…of: do this for each item","level":2},{"id":"sec-3","text":"The counting for loop","level":2},{"id":"sec-4","text":"while: repeat until something changes","level":2},{"id":"sec-5","text":"break and continue","level":2},{"id":"sec-6","text":"Seeing what a loop does","level":2}],"takeaways":["for...of visits every item of a list in order and is the default loop for “do this for each expense”.","The counting for loop gives you an index, which you need when position matters; valid indexes run from 0 to length - 1.","while repeats as long as a condition is true, so something inside the loop must eventually make it false.","The accumulator pattern (start at 0, add inside the loop, use after the loop) turns a list into a single total."],"further":[{"title":"Loops and iteration (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration"},{"title":"for...of (MDN)","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of"}],"quiz":[{"q":"

What does this log?

\n
JavaScript
const amounts = [400, 900, 250];\nlet total = 0;\nfor (const a of amounts) {\n  total = a;\n}\nconsole.log(total);
\n","options":[{"text":"1550","why":"That would need total += a. Plain = replaces the total with each amount instead of adding to it."},{"text":"250","why":"Correct. Each pass overwrites total, so it ends holding the last amount."},{"text":"400","why":"The loop keeps going after the first item, and every pass reassigns total."},{"text":"0","why":"total is reassigned inside the loop, so it no longer holds its starting value."}],"answer":1},{"q":"

const days = ["Mon", "Tue", "Wed"]; Which loop throws no error but logs undefined once at the end?

","options":[{"text":"for (let i = 0; i < days.length; i++) console.log(days[i]);","why":"This is the correct counting loop. It stops after index 2, the last valid index."},{"text":"for (const d of days) console.log(d);","why":"for...of visits exactly the items that exist, so it cannot run past the end."},{"text":"for (let i = 0; i <= days.length; i++) console.log(days[i]);","why":"Correct. <= lets i reach 3, and days[3] does not exist, so it logs undefined. This off-by-one mistake is extremely common."}],"answer":2},{"q":"

When is while a better fit than for...of?

","options":[{"text":"When you do not know in advance how many repetitions you need, only when to stop.","why":"Correct. For example, “keep subtracting the daily spend until the balance runs out” has no list to walk through."},{"text":"When you want to visit every item in a list.","why":"That is exactly the job of for...of, which cannot go past the end or forget to advance."},{"text":"When the loop body has more than one line.","why":"Every loop can have a body of any length. The choice depends on what controls the repetition."}],"answer":0},{"q":"

Inside a loop over expenses, what does continue do?

","options":[{"text":"Ends the whole loop immediately.","why":"That is break. continue only skips the rest of the current pass."},{"text":"Skips the rest of the current pass and moves on to the next item.","why":"Correct. It is handy for ignoring items that do not apply, such as refunds, without nesting the rest of the body in an if."},{"text":"Restarts the loop from the first item.","why":"Loops never rewind on their own. continue moves forward to the next item."}],"answer":1}],"exercise":{"kind":"web","mode":"js","starter":{"js":"const amounts = [450, -300, 1220, 270, 899];\n\n// Total of all spending; negative amounts are refunds, skip them\nfunction totalSpent(amounts) {\n let total = 0;\n // loop here\n return total;\n}\n\n// How many amounts are at least `minimum`\nfunction countAtLeast(amounts, minimum) {\n return 0;\n}\n\n// The index of the expense at which the running total of spending\n// first goes over `budget`, or -1 if it never does (skip refunds here too)\nfunction firstOverBudget(amounts, budget) {\n return -1;\n}\n\nconsole.log(totalSpent(amounts), countAtLeast(amounts, 500), firstOverBudget(amounts, 2000));\n"},"solution":{"js":"const amounts = [450, -300, 1220, 270, 899];\n\nfunction totalSpent(amounts) {\n let total = 0;\n for (const amount of amounts) {\n if (amount < 0) {\n continue;\n }\n total += amount;\n }\n return total;\n}\n\nfunction countAtLeast(amounts, minimum) {\n let count = 0;\n for (const amount of amounts) {\n if (amount >= minimum) {\n count++;\n }\n }\n return count;\n}\n\nfunction firstOverBudget(amounts, budget) {\n let running = 0;\n for (let i = 0; i < amounts.length; i++) {\n if (amounts[i] < 0) {\n continue;\n }\n running += amounts[i];\n if (running > budget) {\n return i;\n }\n }\n return -1;\n}\n\nconsole.log(totalSpent(amounts), countAtLeast(amounts, 500), firstOverBudget(amounts, 2000));\n"},"checks":[{"id":"total","test":"return totalSpent([450, -300, 1220, 270, 899]) === 2839 && totalSpent([]) === 0 && totalSpent([100, 200]) === 300;\n"},{"id":"count","test":"return countAtLeast([450, -300, 1220, 270, 899], 500) === 2 && countAtLeast([500, 499, 501], 500) === 2 && countAtLeast([], 1) === 0;\n"},{"id":"first-over","test":"return firstOverBudget([450, -300, 1220, 270, 899], 2000) === 4 && firstOverBudget([3000], 2000) === 0;\n"},{"id":"never-over","test":"return firstOverBudget([100, 200], 2000) === -1 && firstOverBudget([1000, 1000], 2000) === -1 && firstOverBudget([], 10) === -1;\n"}],"title":"Loop through Pocket's expenses","prompt":"

Each function receives amounts, an array of cents where negative numbers are refunds. Fill in:

\n\n","hints":["Each one is the accumulator pattern. Declare a result before the loop, update it inside, return it after.","if (amount < 0) { continue; } skips a refund. For firstOverBudget you need the position, so use the counting loop: for (let i = 0; i < amounts.length; i++).","In firstOverBudget, as soon as running > budget, return i; ends the function (and the loop). After the loop, return -1;."],"explanation":"

All three functions share one shape: a variable set up before the loop, changed inside it, and returned after it. continue lets you skip refunds without wrapping the rest of the body in another if. firstOverBudget needs the position, so it uses the counting loop with i < amounts.length, the exact range of valid indexes. Returning from inside the loop stops it at the first match, and the return -1 after the loop runs only when no match was ever found. Spending exactly the budget is not over it, so [1000, 1000] with a budget of 2000 returns -1.

\n","checkLabels":{"total":"totalSpent adds spending and skips refunds","count":"countAtLeast counts amounts at or above the minimum","first-over":"firstOverBudget returns the index where the budget is first passed","never-over":"firstOverBudget returns -1 when the budget is never passed"}},"words":766,"readMinutes":4}