Using multidimensional array in JavaScript

Using multidimensional array in JavaScript

One of the most common JavaScript objects we will always work with are arrays, and to be specific, multidimensional array in JavaScript.

JavaScript is one of the most common programming languages, and just like other languages, it presents us with the ability to work with multidimensional arrays. So, multidimensional array in JavaScript is no different from arrays in other programming languages, and in this simple tutorial, we will learn how to create and work with these.

So, before we begin, it is important to understand that multidimensional array in JavaScript is just arrays, but with N dimensions. So, what really is an array dimension? Let us begin here.

What is array dimension?

Well, think of array dimension as simply how nested an array element is in the array from the parent array. We can wrap it up here, but let us use a more declarative example, so that we can proceed to the next section of working with this data structure variant. For this multidimensional array in JavaScript tutorial, we will use a simple shoes example.

const shoes = ["red", "green", "blue", "pink"];

So, at the top level, we have four types of shoes by color. This is what we see at a glance, when we visit the store. So, we only see one level of shoes categories, by perception. And this gives us only one view of the shoes, by property. It gives us one dimension. So, as far as we now, this array dimension is one.

Okay, now, let us now add another variable, the shoe size.

const shoesWithSizes = ?

How will this multidimensional array in JavaScript look like? Well, you guessed it right.

const  shoesWithSizes = [['red', 40], ['red', 41], ['red', 42], ['green', 40], ['green', 41]]

So, what has changed so far in this multidimensional array in JavaScript tutorial? We have added another variable into the picture, and with that, we are now able to classify our shes by two properties which are color and size. Now, similarly, for our array, it has now grown to have an array dimension of 2.

We have just created a multidimensional array in JavaScript!

So, what stands out now is that, for us to get a given shoe, for example red 40, we will need to do this:

shoesWithSizes[0][1] → will first get us red and then get us 40. In most cases, you will not be indexing the multidimensional array in JavaScript this way, you will be doing it dynamically. And this is the same for when creating.

How to create a multidimensional array in JavaScript.

Well, so, let’s say that we have a list of shoes and we can see them by just colors. But we are told, that in that list, each color has sizes 40 to 42. Now, we need to convert this to a multidimensional array.

Well, let us create the features.

const colors = ["red", "green", "blue", "pink"];

const sizes = [40, 41, 42];

Now, how do we create a multidimensional array from these? Well, through looping! We will be using javascript for loop for this multidimensional array in JavaScript tutorial. You may of course use for each, but it is entirely up to you. Just remember, the option you choose must allow you to break out of the loop in the loop nesting.

if (colors.length > sizes.length) {
  for (let i = 0; i < sizes.length; i++) {
    for (let j = 0; j < colors.length; j++) {
      const sizeColorUnit = [sizes[i], colors[j]];
      shoeSizes.push(sizeColorUnit);
    }
  }
} else {
  for (let i = 0; i < colors.length; i++) {
    for (let j = 0; j < sizes.length; j++) {
      const sizeColorUnit = [sizes[j], colors[i]];
      shoeSizes.push(sizeColorUnit);
    }
  }
}

console.log("shoeSizes", shoeSizes);

So, to explain:

Notice that we are making checks to see the size of the arrays before looping. It is always a good idea to loop inside the small array first so that you have a lower algorithm complexity. I know this may be a new term, but it is out of this scope, but maybe we will cover it later on.

So if colors has more items, we loop through it inside sizes and vice versa.

Okay, now the next part is how to loop multidimensional array in JavaScript. We want to create multidimensional array, so we need to think of one main thing: Nesting Levels. The nesting levels are what translate to the N dimensions of the array. In this case, we have a nesting level under the ith element and another under the jth element, so we have a multidimensional array of 2 levels.

Now that we have created a multidimensional array in JavaScript, so, how do we access it’s contents?

How to access items in multidimensional array.

Well, array access should always be thought of in terms of dimensions. The same is no different for our array. We need to know the levels. Period. Let us see how we can do that.

So, suppose we want to get a red size 41 then that would mean that we loop through the array, comparing the ith and jth elements, to see whether they give us the match of red and 41 respectively, depending on the property.

const color = "red";
const size = 41;
let itemInList = 0;
let matchFound = false;

for (let i = 0; i < shoes.length; i++) {
  const shoe = shoes[i];
  for (let j = 0; j < shoe.length; j++) {
    if (shoe[0] === size && shoe[1] === color) {
      matchFound = true;
      itemInList = i + 1;
      break;
    }
  }
  if (matchFound) {
    break;
  }
}

So, here we are setting the show type we want, by specifying color and size. Then we are setting the variable itemInList which will tell us what item in our shoes list (maybe at the store on a shelf) matches our search. Then finally, we have another variable we define which is matchFound that will help us to break out of multidimensional array.

Now, at this line:

if (shoe[0] === size && shoe[1] === color)

we simply compare our properties with the properties in the list.

Now, notice these three lines

matchFound = true;
itemInList = i + 1;
break;

First, we will check whether the exact match has been found, then we set this to true. After that, we specify what position they appear in, and that is why we add i + 1, because in real life items start at index 1, not index 0. Finally, we break to exit from the inner loop.

Then on the outer loop

if (matchFound) {
    break;
}

We check whether a match was found on the inner loop, and if it was found, then we break out of it.

So, that is how you access items in a multidimensional array.

Conclusion

Well, as you can see, it is quite easy to work with multidimensional array in JavaScript.

• Dimension of an array.
• Creating multidimensional array in JavaScript.
• Accessing multidimensional arrays.

With that said, happy coding!

Are you interested in learning JavaScript? Checkout similar awesome articles here: Related Articles