Array Iteration in JavaScript

Array Iteration in JavaScript

Have you ever heard about frameworks in software development? Developers tend to make use of frameworks because they have a basic underlying infrastructure in place; all you need to do is build on it to make development easier and faster. Such frameworks are React, Angular, and Vue.js.

Frameworks can be easy, but understanding 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 native 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 collection of values in a container; it can hold multiple values at once and is 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 holding multiple values of different cars.

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

Code explanation:

The name of the array above is 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 an 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, this function is the console.log function.

  • 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 (car) 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 a single array, 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. There are three arrays within the groups array. Each array value is assigned an index.

  • 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 groups 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 groups array, which simply means the function executes for each value in the groups array (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 developer, you would work with them 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.