Iterate Through an Array with a For Loop - misconception?

Hi everyone

I have a problem with this challenge, I passed the test but I didn’t understand very well the concept it seems to me unlogical.

this is the code:

// Example

var ourArr = [ 9, 10, 11, 12];

var ourTotal = 0;

for (var i = 0; i < ourArr.length; i++) {

ourTotal += ourArr[i];

}

what I didn’t understand is that when I try ourArr[i] on the console it gives me 12 so in the expression above ourTotal = ourTotal + ourArr[i] will equal to 0 + 12 = 12 Not 42

what I misunderstood here?

If you log ourArray[i] after the loop has run, i is going to be 3 (the value of i increases up to 3). So ourArray[3] is 12.

EDIT: after the loop has run, i is 4, not 3, becaue of the i++

ourTotal = 0
# loop starts
i = 0
ourArr[0] is 9
ourTotal = 0 + 9

i = 1
ourTotal is 9
ourArr[1] is 10
ourTotal = 9 + 10

i = 2
ourTotal is 19
ourArr[2] is 11
ourTotal = 19 + 11

i = 3
ourTotal is 30
ourArr[3] is 12
ourTotal = 30 + 12
# loop ends with these values
1 Like

I understand all these things you put here but
again it seems unlogical because of i = 3 so ourArr[3] = 12

0 + 12 = 12 Not 42

what I want to understand now is how the I Loop act inside brackets is it act like you’ve been explained or as I explained in the above statement? ( 0 + 12 = 12 Not 42 )

The loop runs a piece of code for as many times as you tell it to.

The piece of code that runs here adds the current value of ourTotal to the current value in the array.

You are telling the loop to run four times, and the value of i increases by one each time: 0, 1, 2, 3.

The thing you are logging is the last value of i, you’ve ignored the other three.

1 Like

NOTE: please forgive me if I just add confusion.

@DanCouper I was about to give the same answer, but then it strike out to me that outside the loop i should have a value of 4.

Since the [final-exression] is executed after the condition is met, this means that i gets incremented.

for(var i = 0; i < 4; i++) {
  console.log(i)
}

console.log('after ', i)
// 0 1 2 3 after 4

May be that @ansdb has some other part in the code that are interfering? Where exactly have you wrote the console statement?

At this point I’m confused as well… :laughing:


Also to reply to your last question @ansdb the reason is 42 and not 12 is due to the += operation.

ourTotal += ourArr[i];

That operation means ourTotal is now whatever value ourTotal was before plus the value on the right side
So

0 += 9 // 9
9 += 10 // 19
19 += 11 // 30
30 += 12 // 42

Hope this helps :+1:

1 Like

Yes, you’re right w/r/t it being 4 after the loop has ended; it does depend on where the value is being logged. Using var instead of let means that i is not local to the loop though, which confuses things a little bit I think.

1 Like

so what i’ve understood is as:

var t = 0;
var rr = [2, 5, 3, 8, 2];
for( i = 0; i < rr.length; i++ ){
	t += rr[i];
}
20
t
20

this the way the Loop acting inside bracket notation
strong text
0 + rr[0] + rr[1] + rr[2] + rr[3] + rr[4];

so we can say that we’ve got 42 and 20 in this example as a result because of this += assignment operator & the Iteration Count ** I**

+=: adds each new value to the variable in the left
i: produces new value each time i is true

what again I haven’t understood is when we use return it gives a different value than when we use console.log().

look at this output here using return statement:


function multiplyAll(arr) {
  var product = 1;
  // Only change code below this line
  for( i = 0; i < arr.length - 1; i++ ){
	return	arr[i]
  }
  // Only change code above this line
  return product;
}

// Modify values below to test your code
multiplyAll([[1,2],[3,4],[5,6,7]]);

(2) [1, 2]

and look at this output here using console.log() statement:

function multiplyAll(arr) {
  var product = 1;
  // Only change code below this line
  for( i = 0; i < arr.length - 1; i++ ){
	console.log(arr[i])
  }
  // Only change code above this line
  return product;
}

// Modify values below to test your code
multiplyAll([[1,2],[3,4],[5,6,7]]);

VM2008:5 (2) [1, 2]
VM2008:5 (2) [3, 4]

can any one give his thought about this, which is the different here between return & console.log()?

Very interesting conversation, indeed.

The way I think about it ( totally personal way!)is that console.log is like a photographer at a wedding party that takes pictures every time you call them. They are not going to intervene and stop the wedding every time they want to take a picture, but they will just take the picture ( print it on the console)while you move on with your party. They don’t stop anything, they don’t influence the wedding.
Look at my beautiful array[0]- boom takes a picture
Hey look, now I have a array[1] - boom takes a picture
Etc …
In your second example, every time you called console.log, it took a picture of what you asked for while your loop moved on to its next step.

Return is like the waiter at the same party. If you ask for a martini, you won’t see if they do it themselves, or pass it on to another waiter … but they will stop your conversation or whatever you are doing and give you the martini. they won’t be any photo though, no proof on your console, you can enjoy your martini or pass it to another person, or …take a photo to have a proof that you are indeed drinking a martini …
In your first example, return stopped the for loop to give you the arr[i] you asked.

Ha…I’m having too much fun here, I don’t even know if it makes sense.
Please, if anybody has an explanation, feel free to deliver us from my metaphor !

2 Likes

thanks a lot to you, I love the way you explain things :slightly_smiling_face::blush:

so console.log() take in consideration if there is any waiter to give him the right to act as he should, so it deal with I inside bracket notation as an iteration count or in another meaning, it understands that i is a group of things

yes, I forgot that the code stops executing at return statement and you’re right.

Note that if you use var i = 0, then the value of i is not contained within the block of that loop (the {}), it leaks out. So if the code runs, outside the loop the value of i will be 4 for your 4-item array. If you use let i = 0 instead, i won’t be accessible outside the loop (which is generally preferable).

2 Likes

Thanks.
Nah, a photographer doesn’t need a waiter: it’s not the same profession(the same way that console.log and return don’t depend on each other, they have two different jobs) Photographers only need you if you call them. Everytime you want a souvenir of your party (print it to your console, you call your photographer). It doesn’t understand anything and doesn’t analyze anything.It just makes as many photos as you want and then leaves.

1 Like

I am a strong believer of reading the documentation, even if sometimes is hard and / or boring to read.

So head over to MDN, and read about the console.log, and return statement.

Not surprisingly, on the return page, there’s even an example on the interaction between return and loop, and that should be enough to light some shadows. :slight_smile:

Then, once you grasp the technical aspect, you can create your own metal model on how they work, as @carquet rightfully suggested in his explanation.

2 Likes

yes you’re right on the documentation there is how any functionality or statement work
its a little bit boring but it worth to spend time on. :slightly_smiling_face: