multidimensional arrays in javascript| Array of Array example

convert camelCase string to/from hyphens This is a short tutorial with javascript multidimensional arrays with examples In these tutorials, You will learn the following things

• How to create multidimensional array with 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 array 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 You can also check other posts on Javascript Add, Delete from Array

How to create a one-dimensional array in javascript

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

We can create one-dimensional array with an 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 array, is created directly with an array literal syntax defining each element as 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 provide push and splice to add an element to an 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]]

The 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

Delete 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]]