CODEWITHSUNDEEP
javascript
user10225373
user10225373

Reputation:

Why is this code used in many different ways?

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>";
}

Upvotes: 1

Views: 67

Answers (4)

Ben Blank
Ben Blank

Reputation: 56572

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.

Upvotes: 0

Joseph Cho
Joseph Cho

Reputation: 4214

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

  1. Start with 0
  2. If i < 3 run the code inside of the braces {}
  3. 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.

Upvotes: 1

Ken Bigler
Ken Bigler

Reputation: 604

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

Upvotes: 0

JohnPete22
JohnPete22

Reputation: 523

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.

Upvotes: 1

Related Questions