For Loops - myArr[i] - what is it?

I just finished Iterate “Through an Array with a For Loop” challenge on freeCodeCamp.
Here is my code:

// Only change code below this line

var myArr = [ 2, 3, 4, 5, 6];
var total = 0;

for ( i = 0; i < myArr.length; i++) {
  total += myArr[i];
}

Yes, it works good… But I absolutely don’t understand one thing - what is it myArr[i]. I need deeply understand of it. How it works inside. total += … it’s just (2 * i) + (2 * myArr.length) ? I was to get know of this from console, but when I write to the console myArr[i], it return undefined… So I don’t know how to get know how it works and what is it. Thank you

I think you are misunderstanding how arrays work. myArr (in this instance) is an array of 5 numbers. The first one, myArr[0], is 2. The second one, myArr[1], is 3.

If you run this and watch the console, perhaps this will make it clearer:

var myArr = [ 2, 3, 4, 5, 6];

// Only change code below this line
var total = 0;

for ( i = 0; i < myArr.length; i++) {
  total += myArr[i];
  console.log("i = " + i + " and myArr[" + i + "] = " + myArr[i] + " and new total is " + total);
}

That addition time is run 5 times, once for each array element.

Output:

i = 0 and myArr[0] = 2 and new total is 2
i = 1 and myArr[1] = 3 and new total is 5
i = 2 and myArr[2] = 4 and new total is 9
i = 3 and myArr[3] = 5 and new total is 14
i = 4 and myArr[4] = 6 and new total is 20

3 Likes

Let’s examine the loop in more detail:
for ( i = 0; i < myArr.length; i++)

  • i=0 initializes the value of i;
  • i<myArr.length checks the value of i against the length of myArr before each iteration, stopping if the condition is no longer true;
  • i++ adds one to the value of i after the loop has finished each iteration.

So, the first iteration does something like this:

  1. Sets i to 0
  2. Checks that i is less than myArr.length
  3. Executes the code in the loop
  4. Adds 1 to the value of i

The second iteration:

  1. Checks that i is less than myArr.length (it’s now 1, so the condition is still true)
  2. Executes the code in the loop
  3. Adds 1 to the value of i

…and so on. On the last iteration:

  1. Checks that i is less than myArr.length (it’s now 4, so the condition is still true)
  2. Executes the code in the loop
  3. Adds 1 to the value of i

Next, the condition is checked once more:

  1. Is i less than myArr.length? - No, it’s now 5, which is equal to myArr.length.
  2. Do nothing.

But that value i doesn’t just disappear (you initialized it without using let or var, so it now exists in the global scope). When you try console.log(myArr[i]), the value of i is still 5 (and myArr only has 5 elements, counted from index [0] to index [4]. Hence, the element doesn’t exist in the array, so it’s undefined.

1 Like

Ooh, I missed something :D… that in myArr[] don’t have to be just some number, like a 7, but there can be this, for example

ohArr = [ 5, 5, 5, 5, 5 ]; // it just have 5 + 5 + 5 what is 15
var x = 3;
var nothingBigLater = 0;

and now… ohArr [2] is (zero-based indexing) 5 + 5 + 5… right ?
nothingBigLater += ohArr; // it means notningBigLater, what has 0, will get ohArr value, what is 15 (5 + 5 + 5) so now

So the mistake was, that I though I have to use some number inside myArr [ ], and can’t use some var ( which has a number) and I though, that if we use ohArr [ 3 ], so it just return value 5, not 5 + 5 + 5 + 5.

Thank you, now I understand it well

Not quite. someArray[index] refers to just that element of the array.

For example:

var myArr = [1, 2, 3, 4];

console.log(myArr[0]); // outputs `1`

console.log(myArr[2]); // outputs `3`

var aFew = 3;
console.log(myArr[aFew]); // outputs `4`

var myAccumulator = 0;

for (var i=0;i<2;i++) {
  myAccumulator += myArr[i];
}

console.log(myAccumulator); // outputs 3, because that's the result of 0 + myArr[0] + myArr[1]
1 Like

Lionel says it well, but to elaborate…

Each cell in the array is just a pocket holding data. There is no mathematical operation happening to it unless you add some. I think you misunderstood what an array is. That’s fine, we all have little difficulties on this path. But you really need to take a step back and understand what an array is. And perhaps what the for loop is doing and what the += operator is doing. Do some work on each of these individually and make sure that you understand them.

Cut and paste the code samples that I and Lionel wrote into Codepen and step through them. Watch the console and make sure you understand how they are working. Make small changes to test your understanding.

To use your example:

ohArr = [ 1, 2, 3, "apple", 2.3, false ];  // just a collection of 6 pockets with data in them

console.log(ohArr[0]);
// output -> 1
console.log(ohArr[1]);
// output -> 2
console.log(ohArr[2]);
// output -> 3
console.log(ohArr[3]);
// output -> apple
console.log(ohArr[4]);
// output -> 2.3
console.log(ohArr[5]);
// output -> false

console.log("\n"); // to make the output more readable

console.log(ohArr[1]+ohArr[2]);
// output -> 5

console.log("\n"); // to make the output more readable

console.log(ohArr[1+2]);
// output -> apple

console.log("\n"); // to make the output more readable

for (var i = 0; i < ohArr.length; i++) {
  console.log(ohArr[i]);
}

// output -> 1
// output -> 2
// output -> 3
// output -> "apple"
// output -> 2.3
// output -> false

console.log("\n"); // to make the output more readable

var sum = 0;

for (var i = 0; i < 3; i++) {
  sum += ohArr[i]; // the same as saying sum = sum + ohArr[i]
}

console.log(sum);
// output -> 6

Make sure you understand all of these really, really, really well. This is very important stuff. Don’t “kind of” understand it. Make sure you really understand it before moving on.

1 Like

Thank you. I understand it really well now. The best way to learn something in coding for me is just playing with the code in the console… From freeCodeCamp learning challenges (not reguired for the certification) I learn it really bad… Do you have some tips how to learn by this way -> with the console.log ?