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