Iterating through a multidimensional array in JavaScript.

Have you ever heard about frameworks in software development? Many developers tend to make use of frameworks because they have a basic underlying infrastructure already in place. All developers need to do is build on it to make their work easier and faster. Such frameworks are React, Angular, and Vue.js for front-end development. These frameworks use JavaScript as their underlying infrastructure.

Developing on top of frameworks can be easy, but understanding the technology in the underlying infrastructure is better. It makes it easier to understand and work with these frameworks.

In this article, you will learn how to iterate through a multidimensional array using JavaScript. It will help you understand the concept of iteration if you ever come across it in any framework you choose to work with in the future.

What is Iteration?

According to the Oxford Dictionary, "Iteration is the process of repeating a mathematical or computing process or set of instructions, each time applying it to the result of the previous stage."

In JavaScript, iterating through the values in an array means applying a specified function or set of instructions to every value in that array. Iteration uses several methods, but for this article, you will use the forEach method to iterate over values in an array.

An array is a variable that can hold multiple values at once. It's a collection of values in a container, denoted by square brackets ([]). These values are stored in the bracket container with a number assigned to them in ascending order. The number attached to each value is known as the index, and it starts counting from 0.

In this example, you have an array of items called Cars.

let Cars =  ['Honda', 'Toyota','Benz','Lexus','Sienna','Jeep']

Code explanation:

The name of the array above is called Cars, with some values in it. Each value is associated with an index starting from 0. Each value is assigned to a number as follows:

• Honda has an index of 0.

• Toyota has an index of 1.

• Benz has n index of 2.

• Lexus has an index of 3.

• Sienna has an index of 4.

• Jeep has an index of 5.

Now that you understand what arrays are and how their indexes are assigned, you will learn how to iterate through arrays using the forEach method.

let Cars =  ['Honda', 'Toyota','Benz','Lexus','Sienna','Jeep']
cars.forEach(function(car){
console.log(car)
})

Code explanation:

• The forEach method performs the same function on each value in the array.

• The forEach method has a callback function that gets executed for each item of the array.

• The callback function is then passed as an argument to forEach method, and it gets executed whenever it is called.

The result of this iteration will be the value of each car in your Cars array. See the output below.

Honda
Benz
Lexus
Sienna
Jeep

Multidimensional Array.

Now that you understand arrays and how to iterate through them, let's talk about multidimensional arrays. A multidimensional array is more than one array within another array.

In this example, you have a multidimensional array called Groups.

let Groups = [['Stacey', 'Karen', 'Julia'],['Kate','Baron','James','Brown'],['Aaron','Dariella']]

Code explanation:

The name of the above multidimensional array is called Groups. You have three different arrays within the super array called Groups. Each array value is assigned to a number as follows:

• Array 1 has an index of 0.

• Array 2 has an index of 1.

• Array 3 has an index of 2.

Breaking it down further:

• Array 1 has 3 values within it, array 2 has 4 values within it, and array 3 has 2 values within it.

• Each value in these arrays is attached to an index starting from 0.

• For Array 1: Stacey has an index of 0, Karen has an index of 1, and Julia has an index of 2.

• For Array 2: Kate has an index of 0, Baron has an index of 1, James has an index of 2, and Brown has an index of 3.

• For Array 3: Aaron has an index of 0, and Dariella has an index of 1.

Multidimensional Array Iteration.

Iterating through multidimensional arrays means repeating the same functions for every value present within the array present in a super-array.

It's like going one step deeper to execute a function call on values within an array of another array. The iteration of a multidimensional array uses several methods, but for this article, you will use the forEach method to iterate over values in a multidimensional array.

let groups = [['Stacey', 'Karen', 'Julia'],['Kate','Baron','James','Brown'],['Aaron','Dariella']]
groups.forEach(function (group) {
  group.forEach(function(groupie){
  console.log(groupie);
  })

});

• The first forEach method performs the same function (console.log) on each value in the superarray.

• The function gets executed on the superarray, which simply means the function executes for each value in the superarray (3 array values)

• The second forEach method performs another deep iteration and executes the same function (console.log) on the resulting array from the first forEach method, one after the other.

See the output below from the first forEach method execution.

P.s: This is not the final output of the code

['Stacey', 'Karen', 'Julia']
['Kate', 'Baron', 'James', 'Brown']
['Aaron', 'Dariella']

See the final output of the code below after the second forEach method execution.

Stacey
Karen
Julia
Kate
Baron
James
Brown
Aaron
Dariella

Wrapping up

Arrays and iteration of arrays in JavaScript are one of the core concepts that you will always come across in your development journey. As a front-end or back-end developer, you would work with these two concepts at some point. In this article, you have learned about arrays, multidimensional arrays, and using the forEach method to iterate over both of them.

I hope this helps you understand the concept of array and iteration better.

If you have read this far, I would love to know how you feel about this article. You can reach me on Twitter, LinkedIn, or Email, or connect with me on Github.