Understanding Nested For Loops in JavaScript Arrays

Product Support
, ,
#1

I’m currently learning JavaScript on FreeCodeCamp, and I encountered an example involving nested for loops in JavaScript in one of their exercises:

var arr = [[1, 2], [3, 4], [5, 6]]; for (var i = 0; i < arr.length; i++) { for (var j = 0; j < arr[i].length; j++) { console.log(arr[i][j]); } }

When I run this code, the output is 1 2 3 4 5 6 undefined. I have a basic understanding of for loops and know that [i] and [j] are used to access elements in the array. However, I’m confused about why it only prints those numbers at the end. I found a question from a few years ago about writing for loops, but it didn’t explain how they work.

To better understand, I broke down the code into smaller parts: var arr = [[1, 2], [3, 4], [5, 6]]; for (var i = 0; i < arr.length; i++) { console.log(arr[i]); }

This prints: [1, 2] [3, 4] [5, 6] undefined var arr = [[1, 2], [3, 4], [5, 6]]; for (var i = 0; i < arr.length; i++) { for (var j = 0; j < arr[i].length; j++) { console.log(arr[i]); } } This prints:

[1, 2] [1, 2] [3, 4] [3, 4] [5, 6] [5, 6] undefined

var arr = [[1, 2], [3, 4], [5, 6]]; for (var i = 0; i < arr.length; i++) { for (var j = 0; j < arr[i].length; j++) { console.log(arr[j]); } }

[1, 2] [3, 4] [1, 2] [3, 4] [1, 2] [3, 4] undefined

I understand the first two instances with arr[i], where the loop iterates through the array and prints out each individual element (which in this case is an array). In the second instance, it prints them twice due to the two loops.

However, I have a few questions:

  1. Why is the last array in arr[j] not printed out (where did the [5, 6] go)?
  2. Why does arr[i][j] print only the numbers and eliminate the arrays?
  3. Where does the ‘undefined’ in the output come from?

Could someone help clarify these points and explain the steps the code takes before printing the output in the console? I want to fully understand the concept of nested for loops in JavaScript but am unsure how to search for the right information.

#2

Hey! I’ve been working with JavaScript for a while, and nested loops can be tricky when accessing elements in multi-dimensional arrays. Let’s go over why the last array isn’t printed in this example:

var arr = [[1, 2], [3, 4], [5, 6]];
for (var i = 0; i < arr.length; i++) {
  for (var j = 0; j < arr[i].length; j++) {
    console.log(arr[j]);
  }
}

The issue here is with using arr[j] inside the inner loop. In a nested for loop in JavaScript, j only iterates based on the length of arr[i], which is 2 for each sub-array in this example (like [1, 2]). So, j only goes up to 1, accessing arr[0] and arr[1] but skipping arr[2] (the last array, [5, 6]). To fix this, we should use arr[i] to access each sub-array, then arr[i][j] to get the actual numbers.

This way, the loop structure remains consistent with the array structure and correctly iterates over all elements. Hope that clears things up!

#3

Hi there! I’ve tackled a lot of nested loops in JavaScript, and they can be confusing at first. Here’s why arr[i][j] prints only the numbers:

In the code snippet below, notice how arr[i] refers to each sub-array, and arr[i][j] drills down to the numbers themselves:

var arr = [[1, 2], [3, 4], [5, 6]];
for (var i = 0; i < arr.length; i++) {
  for (var j = 0; j < arr[i].length; j++) {
    console.log(arr[i][j]);
  }
}

When i is 0, arr[i] gives [1, 2]. Then, arr[i][j] accesses arr[0][0] (1) and arr[0][1] (2). By accessing elements like this, the loop traverses each inner array and outputs only the numbers, skipping the structure of arrays.

So, arr[i][j] prints each individual number sequentially, which is why you see just the numbers, no arrays around them. This is exactly how a nested for loop in JavaScript is designed to break down a multi-dimensional array element-by-element.

#4

Hey! The mystery of the “undefined” output is a common question when dealing with nested for loops in JavaScript. Here’s what’s happening:

The undefined output appears because console.log does not return a value. In this example:

var arr = [[1, 2], [3, 4], [5, 6]];
for (var i = 0; i < arr.length; i++) {
  for (var j = 0; j < arr[i].length; j++) {
    console.log(arr[i][j]);
  }
}

After all iterations complete, if you try to print or return the result of this loop, JavaScript has nothing to display, as console.log itself doesn’t return anything. So, the final result of a for loop is undefined.

To avoid seeing undefined, make sure that any console logs are inside the loop, or adjust the loop so it only logs specific values you’re interested in.