JavaScript Multidimensional Array

Arrays provide a great way to organize related data together. In programming languages, like JavaScript, the simplest form of an array is known as a one-dimensional array or single-dimensional array. But, most of the time, we require to store multiple types of data for each element of an array. Here, JavaScript introduces the concept of a multidimensional array. Basically, it allows us to create a nested array or in simple words, arrays inside an array.

Today, I’ll explain the usage of JavaScript multidimensional array with the help of step by step examples. For the purpose of this tutorial, I’ll create a multidimensional array of college students. In parent array, each item contains a child array that is used to store the details of a specific student.

Usage of JavaScript Multidimensional Array

Unlike regular variables, arrays are useful when you want to display a lot of related data with the help of a loop. Let’s quickly have a look at the possible use cases where JavaScript multidimensional array might be suitable.

Use case 1: Google Search Engine Results Page

Did you notice that Google Search Engine Result displays only 10 records per page? This is a great place to make use of a multidimensional array. Here, they might store data of each record in a separate array and at last group them in a parent array after applying some sorting. This way, it is very easy to loop through the main array in order to display the records on the screen.

Use case 2: Facebook’s News Feed

Similarly, Facebook’s News Feed is a place which frequently updates with the latest post from your friends, groups or pages you like and some sponsored stuff. It is quite possible that they use a multidimensional array to store the data of posts that should be displayed on the user’s screen.

Now you might be wondering that the above-mentioned websites process data on the server while JavaScript is used on a client. So, how these use cases apply to us. Let me tell you that with the advent of Node.js it is possible to use JavaScript programming language on the server-side for developing dynamic web applications.

Create a Multidimensional Array in JavaScript

There are two different ways to define an array in JavaScript. One method is to make use of Array() constructor while the other is known as “array literal notation” where you simply use square brackets to mark the start and end of your array.

I’ll use the second method because it is the preferred way to create arrays in JavaScript by many professional web developers.

let students = [
    ['furqan', 1001, 24],
    ['ali', 1002, 35],
    ['john', 1003, 20]
];

In the above code, I’ve defined an array of arrays to store the data of three students. The first element of each child array contains the student name, second element stores the roll number and at last, I’ve provided the age of each student. Always remember to put a comma after each array item, no matter whether it is the main array or a nested one.

A point to be noted is that just like variables you need to place string type data inside single or double quotes while numbers can be used as it is inside an array.

Access Specific Element

Now that we’ve initialized an array, its time to retrieve an existing value from it. To do so, we have to provide the array index where the value exists. In JavaScript arrays, each item is stored in a specific index. An index is a number that starts from zero and keeps infringement by 1 until the end of an array.

To access and display the age of the second student we have to use the below code snippet.

document.write(students[1][2]);

Here, you might be wondering why I’ve provided two separate indexes in square brackets. The reason is that the first index refers to the parent array while the second index is used to specify the item inside the child array.

Update Value of Specific Array Index

To update a value inside an array, we first need to access that specific array element using its index and then simply initialize it with a new value. Just like any other JavaScript variable.

In our case, I’ll update the age of the first student using the below code.

students[0][2] = 30;

Now to check whether our change is applied to the array element or not, simply display it just like we did in the previous section.

document.write(students[0][2]);

Add New Items in JavaScript Multidimensional Array

Once again we’ve two options to add an item inside our array. One is by using the push() method and the other one uses the “square bracket notation”.

Using push() method

students.push(['ibrar', 1004, 21]);

Using Square Brackets

students[4] = ['Mark', 1005, 50];

Delete Element From Multidimensional Array JavaScript

JavaScript comes with two functions shift() and pop() that allow us to remove first and the last item from an array respectively.

If you want to remove the first student from the JavaScript multidimensional array then use this code:

students.shift();

Similarly, you can also delete the last array element using the below code.

students.pop();

Please note that both of these functions will in turn also update the length of an array.

Display JavaScript Multidimensional Array

In this section, I’ll guide you about how you can use a JavaScript for loop to iterate through each element of an array. In our case, I will use the existing “students” array and display each student on a separate line.

You might already be familiar with how to create a “for” loop. But, as we need to automate the retrieval process of each and every item inside an array. So, we can check how many items there are in a specific array by using its length property.

for(let i = 0; i < students.length; i++) {
    document.write(students[i]);
    document.write('<br />');
}

Conclusion

As you have just seen that JavaScript multidimensional arrays provide a way better organization of data than a bunch of random variables. It is all possible because arrays take consecutive storage space inside our memory.