multidimensional arrays in javascript| Array of Array example

This is a short tutorial with javascript multidimensional arrays with examples In these tutorials, You will learn the following things

• examples
• Adding an element start, middle, and ending of a multidimensional array
• Remove an element start, middle, and ending of a multidimensional array
• Iterate multidimensional array
• Print and display an array of arrays
• Multidimensional array examples
• one and two-dimensional arrays

Javascript has no multi-dimensional arrays syntax inbuilt. But you can create an array of arrays. where each array element is an array of values.

Multidimensional arrays can be 2 by 2 called matrix or 2 by 3

How to create a one-dimensional array in javascript

In this array, Each element is a single element and elements are of strings or numbers, or objects.

We can create one dimensional array with array literal syntax

let numbers=[1,2,3,4]
let names=["one","two","three"]

How to create a multidimensional array in Javascript?

Multidimensional arrays can be created in two ways

One way, In this arrays, are created directly with array literal syntax with defining each element is an array of 2 elements.

let matrix=[
    ["one",1],
    ["two",2],
    ["three",3],
]

Second way, Define individual arrays add arrays to the main array object which is multidimensional arrays

let ones = [1, 2, 3];
let tens = [10, 20, 30];
let hundreds = [100, 200, 300];

let numbers=[ones,tens,hundreds]

How to access elements of a multi-dimensional array?

let’s declare an array of arrays

Elements can be accessed using an index with square brackets

The first index points to the first inner array The second index points to individual elements of an inner array

let ones = [1, 2, 3];
let tens = [10, 20, 30];
let hundreds = [100, 200, 300];

let numbers=[ones,tens,hundreds]
console.log(numbers) // prints entire object
let ones = [1, 2, 3];
let tens = [10, 20, 30];
let hundreds = [100, 200, 300];

let numbers=[ones,tens,hundreds]
console.log(numbers[0]) //[1,2,3]
console.log(numbers[0][0]) //1
console.log(numbers[1]) //[10,20,30]
console.log(numbers[1][0]) //10
console.log(numbers[2]) // [100,200,300]
console.log(numbers[2][0])  //100

print multi-dimensional array

In javascript, console.log used to print any object

if you use console.log(multidimensional array) you will get the output as follows

(3) [(3) [1,2,3],
(3) [10,20,30],
(3) [100,200,300]]

It is very difficult to debug and read the values in the console

You can use the console table method object to display the nice table format

 -----------------------
|(index)|   0   |   1   | 1   |
|   0   |   1   |   2   | 3   |
|   1   |   10  |   20  | 30  |
|   2   |   100 |   200 | 300 |
 -----------------------

You can also use JSON stringify to print an array of arrays

console.log(JSON.stringify(numbers))  //[[1,2,3],[10,20,30],[100,200,300]]

Add an element to multidimensional-array

Javascript arrays provides push and splice to add an element to array. push adds an element to the end of an array Here is an example of a push

console.log(JSON.stringify(numbers))  //[[1,2,3],[10,20,30],[100,200,300]]
numbers.push([121,123])
console.log(JSON.stringify(numbers))  //[[1,2,3],[10,20,30],[100,200,300],[121,123]]

splice method adds elements in any position with a given index. In the below example, elements are added at the third element with index=0

console.log(JSON.stringify(numbers)) 
numbers.splice(2,0,[121,123])
console.log(JSON.stringify(numbers)) 

Iterate multidimensional arrays with for loop

There are multiple ways we can iterate arrays in javascript.

• for loop

Like a normal array, We can use for loop to iterate each element of an array

For multi-dimensional arrays, We can use nested for loop in javascript

for(var i = 0; i < numbers.length; i++) {
    var number = numbers[i];
    for(var j = 0; j < number.length; j++) {
        console.log("[" + i + "][" + j + "] = " + number[j]);
    }
}

Output:

[0][0] = 1
[0][1] = 2
[0][2] = 3
[1][0] = 10
[1][1] = 20
[1][2] = 30
[2][0] = 100
[2][1] = 200
[2][2] = 300

• forEach loop

forEach introduced in ES6 to iterate enumerable properties

Here are steps

• iterate multi-dimensional arrays using forEach
• check each element
• if the element is an array, continue and iterate using foreach
• if the element is not an array print the element

numbers.forEach(function each(element) {
  if (Array.isArray(element)) {
    element.forEach(each);
  } else {
    console.log(element);
  }
});

Output

1
2
3
10
20
30
100
200
300

delete an element from the multidimensional array

Elements from an array can be removed using the pop or splice method

elements can be removed Multidimensional arrays from the main array or inner array

if you want to remove the last element, use the pop method as seen below

console.log(JSON.stringify(numbers))  //[[1,2,3],[10,20,30],[100,200,300]]
numbers.pop();
console.log(JSON.stringify(numbers))  //[[1,2,3],[10,20,30]]

to remove an element from starting of an array, use the shift method

console.log(JSON.stringify(numbers))  //[[1,2,3],[10,20,30],[100,200,300]]
numbers.shift()
console.log(JSON.stringify(numbers))  //[[1,2,3],[10,20,30],[100,200,300]]

To remove an element from the middle of an array, use the splice method In the below example, remove a second inner arrays

console.log(JSON.stringify(numbers))  //[[1,2,3],[10,20,30],[100,200,300]]
numbers.splice(2,1);
console.log(JSON.stringify(numbers)) //[[1,2,3],[10,20,30]]