Why is this code used in many different ways?

Question

I have been going through a tutorial on The Odin Project and I keep coming across this line of code or a variation of the code:

(i = 0; i < fLen; i++)

What exactly is happening here? I don't understand why it is used for multiple programs. If I do not understand what it is doing, then I have a hard time using it.

Example:

var fruits, text, fLen, i;

fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;
text = "<ul>";
for (i = 0; i < fLen; i++) {
 text += "<li>" + fruits[i] + "</li>";
}

This is pretty good explanation: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for — Mark, Sep 18 '18 at 20:48
Try looking at the answers [on this stack post](https://stackoverflow.com/questions/52080/how-do-i-build-a-loop-in-javascript) for an explanation. In short, it's called a "for loop". it is a structure for repeating a block of code a certain number of times. — mhodges, Sep 18 '18 at 20:49
the part you are asking about only makes sense if you include `for` — Pac0, Sep 18 '18 at 21:27

score 1 · Answer 1 · edited Sep 18 '18 at 20:57

1

In short, it's a For loop that's meant to iterate a set number of times. In that example, it's iterating based up on the length of the array for fruits. So it's going to run 4 times. The i++ at the end just increases the increment after everytime it's run an iteration.

The whole point of that code is that it's creating a unordered list <ul> and then adding the four list items <li> for each index of the fruit array.

edited Sep 18 '18 at 20:57

connexo

53,704
14
91
128

answered Sep 18 '18 at 20:53

JohnPete22

523
3
15

Please make yourself familiar with the SO editor. Showing code inline works by enclosing it in backticks. You can also achieve that by pressing CTRL-K when the part is marked. (Mac: CMD-K). – connexo Sep 18 '18 at 20:56

score 1 · Answer 2 · answered Sep 18 '18 at 21:00

It's pretty simple once you get it, there's three pieces to: (i = 0; i < 3; i++)

Start with 0
If i < 3 run the code inside of the braces {}
Add +1 to i

The trick is to realize the code doesn't run when i = 3 since it's no longer < 3.

You can do variations like (i = 3; i > 0; i--) which is the same concept backwards.

score 0 · Answer 3 · answered Sep 18 '18 at 20:59

Agreed with JohnPete22, it is a for loop, here are some examples: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for

If you are used to some other programming languages, you could consider some alternatives here that might make a little more sense to you:

for in - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in

for each - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

while - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/while

While it is interesting to enumerate and link things that are quite relevant to answer the question, answers pointing (only) to external source are usually considered "not an answer" . Consider copying at least the most relevant (even if very summarized / short) part that answers the question. — Pac0, Sep 18 '18 at 21:26

score 0 · Answer 4 · answered Sep 18 '18 at 21:00

That's a for loop. It runs the code inside it's block (the { }) multiple times, based on what's inside the parentheses.

The parentheses have three "clauses", separated by semicolons. The first clause is the "initializer", which is only run once at the beginning. The second clause is the "condition", which is checked at the beginning of each time the block is run. If it evaluates to true (or anything "truthy"), the block is run again; otherwise, the loop exits. Finally, the third clause is the "final expression", which is run after the block each time.

Put together, you can make a loop run, say, ten times like so:

for (let i = 0; i < 10; i++) { /* … */ }

This initially sets i to zero, increments i each time, and exits when i hits 10. In your example above, the loop is being used to iterate over each element in the fruits list and collect them into an unordered list.

Why is this code used in many different ways?

4 Answers4