const rapperArray = ['Tupac', 'Jay-Z', 'Notorious B.I.G', 'Kendrick Lamar']
for (let i = 0; i < rapperArray.length; i++) {
console.log(rapperArray[i]);
if (i === 2) {
break;
}
}
console.log("And if you don't know, now you know.");So how does i work in that console.log( rapperArray[ i ] );? I know that it accesses the elements in the array but I can't seem to get my head around how it actually functions.
The i is a variable. In a for loop, you have the following syntax:
for(initialization; condition; update) {
// for loop body
}
The for loop will begin by running the initialization portion first, which in this case declares the variable i with an initial value of 0. Before each iteration of the loop, condition is checked and the loop body will run as long as condition is true. Then, after the loop body runs, update will run. In this case, the variable i will have its value incremented by 1, i.e. i++ is basically the same thing as i += 1.
In other words, the for loop will use every value of i from 0 up until rapperArray.length - 1. So console.log(rapperArray[i]); will be the same as console.log(rapperArray[0]); in the first iteration, console.log(rapperArray[1]); in the second iteration, and so on.
You can see this more clearly by running the following:
const rapperArray = ['Tupac', 'Jay-Z', 'Notorious B.I.G', 'Kendrick Lamar'];
for (let i = 0; i < rapperArray.length; i++) {
console.log('When i is ' + i + ', rapperArray[i] is ' + rapperArray[i] + '.');
}
i is being used as an index for the array in the loop. So that it prints the names... I see it nowA for loop header consists of three parts:
let i = 0i < lengthi++We start with 0, in the beginning i is lower than length, then we up it by 1 (i++ increases i by 1), if it's still lower than length - we continue until i has the same value as length and then we stop.
It indicates the current iteration of the loop. For each iteration, i is incremented. When used to get an array item, it represents the index of the item to retrieve from the array. You can read more about indexed collections here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Indexed_collections
Arrays in JavaScript are zero-index based, which means the first index is always zero. And they increment from there. Arrays are ordered collections, so the item at the first index (zero) is always the same, and so on.
If you have a list on paper in front of you, you may number the lines starting with 1 and going up from there. Each item in an array is somewhat like each line on that piece of paper, only the line numbers start at zero instead of one. If you want to get line n from the paper, you find the line numbered n and there you go.
rapperArray[0]functions?i, which you established as having a starting value of0is incremented by one (that's what thei++means). Since Arrays start indexing at 0, the first time throughiwill be0and thereforerapperArray[i]will referencerapperArray[0]or the first item in the array (Tupac). The second time through,iwill be1andrapperArray[i]will meanrapperArray[1]orJay-Z. This will continue as long asiis less than the length of the array (which is 1-based) or 4.igenerally denotes the current iterative row identifier in an array.var a =['a','b']witha[0] == 'a', a[1] == 'b'and so forth, withibeing0then1in that example,var i = 0; a[i] == 'a'; i = 1; a[i] == 'b'.