Start with the question your loop needs to answer
A loop repeats a block of code. In JavaScript, the most useful question to ask before writing one is: what controls when the repetition stops? If you are counting through a known range, use a for loop. If you need to keep going until a condition changes, consider a while loop. If you want to visit each value in an array or another iterable, use for...of.
You can try the examples in a browser developer console or a JavaScript runtime that supports ES2015 syntax, including for...of. No packages or web page are required. Each example uses console.log so you can see what happens. Although these loops can sometimes solve the same problem, choosing one that matches your intent makes the code easier to read and check.
Use for when a counter matters
A traditional for loop keeps its setup, condition, and update together. For example: for (let i = 0; i < 3; i++) { console.log(i); } This prints 0, 1, and 2. The loop starts with i equal to 0, runs while i < 3 is true, and increases i after each run. When i reaches 3, the condition is false and the loop stops.
Choose this form when you need the counter itself, such as repeating an action a fixed number of times or working with array positions. For example: const colors = ["red", "blue"]; for (let i = 0; i < colors.length; i++) { console.log(i, colors[i]); } This prints each position alongside its color. Array positions begin at 0, so the condition uses i < colors.length rather than i <= colors.length.
Check all three parts when a for loop behaves strangely. A counter that never changes may keep the loop running, while a boundary that is one step too large may access an array position that does not exist.
Use while when the stopping condition leads
A while loop checks its condition before every run. It is a good fit when you cannot express the work naturally as a fixed count. Here is a small example: let remaining = 3; while (remaining > 0) { console.log(remaining); remaining--; } It prints 3, 2, and 1. The change to remaining is inside the loop body, so it is easy to see why the condition eventually becomes false.
A while loop can also be useful when each step determines what happens next. Imagine processing items from a queue until it is empty: while (queue.length > 0) { const item = queue.shift(); console.log(item); } This example assumes queue is an array you created first. Unlike a counter-based for loop, its condition describes the state you care about: whether any items remain.
Before using while, identify what will change the condition and what should happen if it is false at the start. A while loop may run zero times. If the condition stays true because the relevant value is never updated, the loop will not stop on its own.
Use for...of when you want each value
A for...of loop visits values from an iterable without making you manage a numeric position. For an array: const fruits = ["pear", "plum"]; for (const fruit of fruits) { console.log(fruit); } This prints pear and then plum. Use it when the task is simply to do something with each value, such as displaying names or adding numbers to a total.
Strings are iterable too: for (const character of "cat") { console.log(character); } This prints each character in turn. Here, const names a new binding for each iteration; it does not prevent you from reading or using the value. An ordinary object, however, is not directly usable with for...of. If you want its values, you can first use Object.values(myObject) and loop over the resulting array.
Do not confuse for...of with for...in. With an array, for...of gives you its values; for...in gives you property names, such as the array’s numeric positions as strings. If you need both an array position and its value, a counter-based for loop is often the most straightforward beginner-friendly option.
Choose for clarity, then check how the loop ends
A quick decision guide is: use for for a counted range or array positions; use while for a condition that changes as the work proceeds; use for...of to handle each value in an iterable. For example, printing five numbered lines calls for for, draining a queue calls for while, and printing every name in an array calls for for...of.
Whichever form you choose, test it with a small input before relying on it for a larger task. Try an empty array, a single item, or a boundary count of zero where those cases make sense. If the result is surprising, write down the first value, the condition, and how the value changes after one pass. Tracing those steps often reveals an off-by-one error or a missing update faster than changing the loop at random.
