JavaScript Multidimensional Array

Summary: in this tutorial, you will learn how to work with a JavaScript multidimensional array and manipulate its elements effectively.

Introduction to JavaScript multidimensional array #

JavaScript doesn’t natively support multidimensional arrays. However, you can create one by defining an array where each element itself is an array.

So, a JavaScript multidimensional array is essentially an array of arrays. The simplest way to define one is by using an array literal notation.

To declare an empty multidimensional array, you use the same syntax as declaring one-dimensional array:

let activities = [];Copy

The following example defines a two-dimensional array named activities:

let activities = [
    ['Work', 9],
    ['Eat', 1],
    ['Commute', 2],
    ['Play Game', 1],
    ['Sleep', 7]
];Copy

In the activities array, the first dimension represents the activity and the second one shows the number of hours spent per day for each.

To show the activities array in the console, you use the console.table() method as follows:

console.table(activities);Copy

The following illustrates the output:

┌─────────┬─────────────┬───┐
│ (index) │      0      │ 1 │
├─────────┼─────────────┼───┤
│    0    │   'Work'    │ 9 │
│    1    │    'Eat'    │ 1 │
│    2    │  'Commute'  │ 2 │
│    3    │ 'Play Game' │ 1 │
│    4    │   'Sleep'   │ 7 │
└─────────┴─────────────┴───┘Copy

Note that the (index) column is for the illustration that indicates the indices of the inner array.

To access an element of the multidimensional array, you first use square brackets to access an element of the outer array which returns an inner array. Then, you use another set of square brackets to access the element of the inner array.

The following example returns the second element of the first inner array in the activities array above:

console.log(activities[0][1]); // 9Copy

Adding elements to the JavaScript multidimensional array #

You can use the array methods such as push() and splice() to manipulate elements of a multidimensional array.

For example, to add a new element at the end of the multidimensional array, you use the push() method as follows:

activities.push(['Study',2]);

console.table(activities);Copy

┌─────────┬─────────────┬───┐
│ (index) │      0      │ 1 │
├─────────┼─────────────┼───┤
│    0    │   'Work'    │ 9 │
│    1    │    'Eat'    │ 1 │
│    2    │  'Commute'  │ 2 │
│    3    │ 'Play Game' │ 1 │
│    4    │   'Sleep'   │ 7 │
│    5    │   'Study'   │ 2 │
└─────────┴─────────────┴───┘Copy

To insert an element in the middle of the array, you use the splice() method. The following inserts an element in the second position of the activities array:

activities.splice(1, 0, ['Programming', 2]);

console.table(activities);Copy

Here is the output:

┌─────────┬───────────────┬───┐
│ (index) │       0       │ 1 │
├─────────┼───────────────┼───┤
│    0    │    'Work'     │ 9 │
│    1    │ 'Programming' │ 2 │
│    2    │     'Eat'     │ 1 │
│    3    │   'Commute'   │ 2 │
│    4    │  'Play Game'  │ 1 │
│    5    │    'Sleep'    │ 7 │
│    6    │    'Study'    │ 2 │
└─────────┴───────────────┴───┘Copy

This example calculates the percentage of the hours spent on each activity and appends the percentage to the inner array.

activities.forEach(activity => {
    let percentage = ((activity[1] / 24) * 100).toFixed();
    activity[2] = percentage + '%';
});

console.table(activities);Copy

The following shows the output in the console:

┌─────────┬───────────────┬───┬───────┐
│ (index) │       0       │ 1 │   2   │
├─────────┼───────────────┼───┼───────┤
│    0    │    'Work'     │ 9 │ '38%' │
│    1    │ 'Programming' │ 2 │ '8%'  │
│    2    │     'Eat'     │ 1 │ '4%'  │
│    3    │   'Commute'   │ 2 │ '8%'  │
│    4    │  'Play Game'  │ 1 │ '4%'  │
│    5    │    'Sleep'    │ 7 │ '29%' │
│    6    │    'Study'    │ 2 │ '8%'  │
└─────────┴───────────────┴───┴───────┘Copy

Removing elements from the multidimensional array #

To remove an element from an array, you use the pop() or splice() method.

For example, the following statement removes the last element of the activities array.

activities.pop();

console.table(activities);Copy

Output:

┌─────────┬───────────────┬───┬───────┐
│ (index) │       0       │ 1 │   2   │
├─────────┼───────────────┼───┼───────┤
│    0    │    'Work'     │ 9 │ '38%' │
│    1    │ 'Programming' │ 2 │ '8%'  │
│    2    │     'Eat'     │ 1 │ '4%'  │
│    3    │   'Commute'   │ 2 │ '8%'  │
│    4    │  'Play Game'  │ 1 │ '4%'  │
│    5    │    'Sleep'    │ 7 │ '29%' │
└─────────┴───────────────┴───┴───────┘Copy

Similarly, you can remove the elements from the inner array of the multidimensional array by using the pop() method.

The following example removes the percentage element from the inner arrays of the activities array.

activities.forEach((activity) => {
    activity.pop(2);
});

console.table(activities);Copy

Output:

┌─────────┬───────────────┬───┐
│ (index) │       0       │ 1 │
├─────────┼───────────────┼───┤
│    0    │    'Work'     │ 9 │
│    1    │ 'Programming' │ 2 │
│    2    │     'Eat'     │ 1 │
│    3    │   'Commute'   │ 2 │
│    4    │  'Play Game'  │ 1 │
│    5    │    'Sleep'    │ 7 │
└─────────┴───────────────┴───┘Copy

Iterating over elements of the multidimensional array #

To iterate a multidimensional array, you use a nested for loop as in the following example:

// loop the outer array
for (let i = 0; i < activities.length; i++) {
    // get the size of the inner array
    var innerArrayLength = activities[i].length;
    // loop the inner array
    for (let j = 0; j < innerArrayLength; j++) {
        console.log('[' + i + ',' + j + '] = ' + activities[i][j]);
    }
}Copy

The first loop iterates over the elements of the outer array and the nested loop iterates over elements of the inner array.

The following shows the output of the script in the console:

[0,0] = Work
[0,1] = 9
[1,0] = Eat
[1,1] = 1
[2,0] = Commute
[2,1] = 2
[3,0] = Play Game
[3,1] = 1
[4,0] = Sleep
[4,1] = 7
[5,0] = Study
[5,1] = 2Copy

Or you can use the forEach() method twice:

activities.forEach((activity) => {
    activity.forEach((data) => {
        console.log(data);
    });
});Copy

Output:

Work
9
Eat
1
Commute
2
Play Game
1
Sleep
7
Study
2Copy

In this tutorial, you have learned how to use an array of arrays to create a JavaScript multidimensional array.