Multidimensional arrays in JavaScript are the type of arrays where each element of the array is also an array.
The example below shows a multidimensional array of 2 Dimensions.
// A multidimensional array where each element is an array.
const friends = [['Alex', 16], ['Haley', 22], ['Jon', 18]];
If you are new to Arrays, make sure to check out our 👉 JavaScript Arrays lesson.
Creating multidimensional arrays
We can create a multidimensional array in JavaScript directly, as given in the example above or also by creating individual arrays and using them to create a multidimensional array.
Example creating multidimensional array directly 😇
const friends = [['Alex', 16], ['Haley', 22], ['Jon', 18]];
console.log(friends);
Output
[ [ 'Alex', 16 ], [ 'Haley', 22 ], [ 'Jon', 18 ] ]
Example creating multidimensional array using individual arrays 😎
const firstFriend = ['Alex', 16];
const secondFriend = ['Haley', 22];
const thirdFriend = ['Jon', 18];
// Using the individual arrays that we declared above.
const friends = [firstFriend, secondFriend, thirdFriend];
console.log(friends);
Output
[ [ 'Alex', 16 ], [ 'Haley', 22 ], [ 'Jon', 18 ] ]
Accessing a multidimensional array
We can access elements of a multidimensional array in JavaScript the same way as we did in simple arrays i.e. with the help of indices (index) like 0, 1, 2, etc.
Example
// An array explaining about your friends and their ages respectively.
const friends = [['Alex', 16], ['Haley', 22], ['Jon', 18]];
console.log(friends[0]);
console.log(friends[1]);
// In index [0][1] : 0 means the first element i.e. ['Alex', 16]. And 1 means the item at index 1 in ['Alex', 16] i.e. 16
console.log("Alex's age is: " + friends[0][1]);
// In index [0][0] : 0 means the first element i.e. ['Alex', 16]. And another 0 means the item at index 0 in ['Alex', 16] i.e. Alex
console.log("My first friend is: " + friends[0][0]);
console.log("My second friend is: " + friends[1][0]);
console.log("Haley's age is: " + friends[1][1]);
console.log("Jon's age is: " + friends[2][1]);
Output
[ 'Alex', 16 ]
[ 'Haley', 22 ]
Alex's age is: 16
My first friend is: Alex
My second friend is: Haley
Haley's age is: 22
Jon's age is: 18
Adding elements in a multidimensional array
There are two ways of adding elements in a multidimensional array in JavaScript.
- Using the push( ) method.
- Directly using the index where we want to add element in.
Adding elements to the outer array
Example using push( ) 👇
const friends = [['Alex', 16], ['Haley', 22], ['Jon', 18]];
console.log(friends);
// Using the push() method
friends.push(['Emily', 20]);
console.log(friends);
Output
[ [ 'Alex', 16 ], [ 'Haley', 22 ], [ 'Jon', 18 ] ]
[ [ 'Alex', 16 ], [ 'Haley', 22 ], [ 'Jon', 18 ], [ 'Emily', 20 ] ]
Example using index directly 🤫
const friends = [['Alex', 16], ['Haley', 22], ['Jon', 18]];
console.log(friends);
// Directly using the index where we want to add a new element
friends[3] = ['Emily', 20];
console.log(friends);
Output
[ [ 'Alex', 16 ], [ 'Haley', 22 ], [ 'Jon', 18 ] ]
[ [ 'Alex', 16 ], [ 'Haley', 22 ], [ 'Jon', 18 ], [ 'Emily', 20 ] ]
Adding elements to the inner array
Example using push( ) 👇
const friends = [['Alex', 16], ['Haley', 22], ['Jon', 18]];
console.log(friends);
// Using the push() method.
// Here, we are pushing a new string '5ft 6in' in the element at index 1 i.e. ['Haley', 22].
friends[1].push('5ft 6in');
console.log(friends);
Output
[ [ 'Alex', 16 ], [ 'Haley', 22 ], [ 'Jon', 18 ] ]
[ [ 'Alex', 16 ], [ 'Haley', 22, '5ft 6in' ], [ 'Jon', 18 ] ]
Example using index directly 🤫
const friends = [['Alex', 16], ['Haley', 22], ['Jon', 18]];
console.log(friends);
// Directly using the index where we want to add a new element
// In index [1][2]: 1 means the outer element at index 1 i.e. ['Haley', 22]. And [2] means the index 2 of element ['Haley', 22] where we want to add '5ft 6in' in.
friends[1][2] = '5ft 6in';
console.log(friends);
Output
[ [ 'Alex', 16 ], [ 'Haley', 22 ], [ 'Jon', 18 ] ]
[ [ 'Alex', 16 ], [ 'Haley', 22, '5ft 6in' ], [ 'Jon', 18 ] ]
Updating elements in a multidimensional array
We can update or change the elements of a multidimensional array in JavaScript the same way as we did in simple arrays i.e. with the help of indices (index) like 0, 1, 2, etc.
Updating elements of outer array 😲
Example
const friends = [['Alex', 16], ['Haley', 22], ['Jon', 18]];
console.log(friends);
// Changing the elements of outer array.
friends[0] = ['Lewis', 24];
friends[2] = ['Daniel', 14];
console.log(friends);
Output
[ [ 'Alex', 16 ], [ 'Haley', 22 ], [ 'Jon', 18 ] ]
[ [ 'Lewis', 24 ], [ 'Haley', 22 ], [ 'Daniel', 14 ] ]
Updating elements of inner array 🤯
const friends = [['Alex', 16], ['Haley', 22], ['Jon', 18]];
console.log(friends);
// Changing the elements of inner array.
friends[0][0] = 'Lewis';
friends[1][0] = 'Emily';
// Changing Jon's age to 26
friends[2][1] = 26;
console.log(friends);
Output
[ [ 'Alex', 16 ], [ 'Haley', 22 ], [ 'Jon', 18 ] ]
[ [ 'Lewis', 16 ], [ 'Emily', 22 ], [ 'Jon', 26 ] ]
Removing elements in a multidimensional array
We can remove elements in a multidimensional array in JavaScript by using the pop( ) method.
Removing elements of outer array 😲
Example
const friends = [['Alex', 16], ['Haley', 22], ['Jon', 18]];
console.log(friends);
// Removing the last element from outer array.
friends.pop();
console.log(friends);
Output
[ [ 'Alex', 16 ], [ 'Haley', 22 ], [ 'Jon', 18 ] ]
[ [ 'Alex', 16 ], [ 'Haley', 22 ] ]
Removing elements of inner array 🤯
Example
const friends = [['Alex', 16], ['Haley', 22], ['Jon', 18]];
console.log(friends);
// Removing the last element from outer array.
// Removing the last element from element at index 0 i.e. In ['Alex', 16], 16 will be removed
friends[0].pop();
// Removing the last element from element at index 2 i.e. In ['Jon', 18], 18 will be removed
friends[2].pop();
console.log(friends);
Output
[ [ 'Alex', 16 ], [ 'Haley', 22 ], [ 'Jon', 18 ] ]
[ [ 'Alex' ], [ 'Haley', 22 ], [ 'Jon' ] ]
In this way, multidimensional arrays are used to store even more complex data. Although, we don’t use multidimensional arrays as much as simple arrays, we still need to learn in as it is an integral part of JavaScript.