var arr = [[1,2], [3,4], [5,6]];
This is an array of arrays. It is a little bit easier to read like this:
var arr = [
[1,2],
[3,4],
[5,6]
];
That makes it a little bit easier to see that you have an array of 3 arrays. The outer 'for' will loop through each of 1st level arrays. So the very first outer for loop when i=0 you are going to grab the first inner array [1,2]:
for (var i=0; i < arr.length; i++) {
//First time through i=0 so arr[i]=[1,2];
}
In the inner loop you are going to loop through each of the 3 inner arrays one at a time.
for (var j=0; j < arr[i].length; j++) {
//Handle inner array.
}
This argument grabs the length of the inner array:
arr[i].length
So on your first time through the outer loop i=0 and arr[i] is going to equal [1,2] because you are grabbing the 0th element. Remember, arrays elements are always counted starting at 0, not 1.
Finally you are printing out the results with:
console.log(arr[i][j]);
The first time through you can break it down a little. i=0 and j=0. arr[0][0] which translates as grab the first element from the outer array and then the first element from the first inner array. In this case it is '1':
[
[1,2], <-- 0
[3,4], <-- 1
[5,6] <-- 2
];
The code will loop through the first first set [1,2], then the second [3,4], and so on.
Answer from Gremash on Stack OverflowUnderstanding nested for loops in javascript - Stack Overflow
Nested For Loops
Javascript - Avoiding variable redundancy in nested for loops - Software Engineering Stack Exchange
Finding it difficult to Understand Nested Loops
Videos
var arr = [[1,2], [3,4], [5,6]];
This is an array of arrays. It is a little bit easier to read like this:
var arr = [
[1,2],
[3,4],
[5,6]
];
That makes it a little bit easier to see that you have an array of 3 arrays. The outer 'for' will loop through each of 1st level arrays. So the very first outer for loop when i=0 you are going to grab the first inner array [1,2]:
for (var i=0; i < arr.length; i++) {
//First time through i=0 so arr[i]=[1,2];
}
In the inner loop you are going to loop through each of the 3 inner arrays one at a time.
for (var j=0; j < arr[i].length; j++) {
//Handle inner array.
}
This argument grabs the length of the inner array:
arr[i].length
So on your first time through the outer loop i=0 and arr[i] is going to equal [1,2] because you are grabbing the 0th element. Remember, arrays elements are always counted starting at 0, not 1.
Finally you are printing out the results with:
console.log(arr[i][j]);
The first time through you can break it down a little. i=0 and j=0. arr[0][0] which translates as grab the first element from the outer array and then the first element from the first inner array. In this case it is '1':
[
[1,2], <-- 0
[3,4], <-- 1
[5,6] <-- 2
];
The code will loop through the first first set [1,2], then the second [3,4], and so on.
The double for loop you have above works like so:
var arr = [[1,2], [3,4], [5,6]];
for (var i=0; i < arr.length; i++) {
// i = 0, then we loop below:
for (var j=0; j < arr[i].length; j++) {
//here we loop through the array which is in the main array
//in the first case, i = 0, j = 1, then we loop again, i = 0, j = 1
console.log(arr[i][j]);
//after we finish the stuff in the 'j' loop we go back to the 'i' loop
//and here i = 1, then we go down again, i, remains at 1, and j = 0, then j = 1
//....rinse and repeat,
}
}
In plain english:
We grab the first element in the main array, which is an array itself, we loop through that, and log at each index, this is terminated by our length condition in the second loop. We then move to to the next index of the main array, which is an array itself.... and so on, until we reach the end of the main array
To access and index in the main array, we need to use array[i] - that index holds an array - so to go INTO that array, we need to use array[i][j]
Hope that makes sense!
One common approach, which is also used in the code you posted is to simply to use the next letter in the alphabet, so:
for(var i = 0; i < length; i++) {
for(var j = 0; j < length; j++) {
for(var k = 0; k < length; k++) {
// More loops?
}
}
}
This approach is lazy, but it works. However, I find that it can get confusing when you're not looping the same array or accessing a multi-dimensional array. In that case, a better approach might be to simply provide more meaningful names:
for(var nameIndex = 0; nameIndex < names.length; nameIndex++) {
for(var classroomIndex = 0; classroomIndex < classrooms.length; classroomIndex++) {
// And so forth
}
}
Of course this may be a little wordy for you, but I figure better a little wordy than completely uncomprehensible code. You were probably hoping for a neat hack here to be able to keep the i variable in its own scope. There may even exist a way to do so, however I don't believe in that kind of solution to a problem like this for two reasons:
- Nested loops should generally be discouraged anyway. You cannot apply a best practice in a situation in which you're not following a best practice. Call a method instead.
- It would leave the next programmer scratching his head wondering why you did it that way, and it is difficult to justify such a decrease in readability just to account for name clashing.
I hope that helps!
Simple:
// This block with a
// VERY
// COMPLEX
// operation
// here
// is far too large.
When blocks become so large that you cannot see all of your local variable definitions any more, they are definitely too large. Refactor such a parts to a function, this will help a lot to avoid accidentally double declarations.
I've been learning Js for 2 weeks now and at this point I'm stuck at Nested loops - I really can't grab the whole concept around nested loops, let alone the exercises ( like building a pyramid ).
Should I move on with other subjects in js hoping I won't meet nested loops on my path or I'll get familiar as time goes by?