multidimensional arrays in javascript| Array of Array example

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

• examples
• Adding an element start, middle, ending of multi dimensional array
• Remove an element start, middle, ending of multi dimensional array
• Iterate multi dimensional array
• Print and display array of arrays
• Multi dimensional array examples
• one and two dimensional arrays

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

Multi dimensional 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 multi dimensional arrays 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 an multi dimensional array?

let’s declare an array of arrays

Elements can be accessed using an index with square brackets

first index point to first inner array second index point 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(multi dimensional 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 multi dimensional array

Javascript arrays provides push and splice to add an element to array. push adds an element to 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 multi dimensional arrays with for loop

There are multiple ways we can iterate arrays in javascript.

• **for loop **

Like a normal arrays, We can use for loop to iterate an 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 an 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 multi dimensional array

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

elements can be removed Multi dimensional arrays from main array or inner array

if you want to remove last element, use 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]]