multidimensional arrays in javascript| Array of Array example

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

• examples
• Adding an element start, middle, ending of a multidimensional array
• Remove an element start, middle, ending of a multidimensional array
• Iterate multidimensional array
• Print and display 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 a one dimensional arrays 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 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

first index point to the first inner array 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 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 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 given index. In below example, elements are added at 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 element is an array, continue and iterate using foreach
• if 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 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 middle of an array, use splice method In the below example, remove an 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]]