This is a beginner tutorial on working with Javascript multi-dimensional arrays and looping through them.
Javascript Array is a list-like object. It is used to store multiple values in a single variable.
This article deals with creating a multi-dimensional Javascript array and using different functions on the array. We also see how we can loop through the arrays and get the values.
Create a multi-dimensional Javascript Array
// define array
var myArray = [
['apple', 'orange', 'mango'],
['rose', 'lotus', 'lily'],
['cabbage', 'carrot', 'beans']
];
Access elements of the array
console.log(myArray[0][1]); // orange
console.log(myArray[1][0]); // rose
console.log(myArray[2][2]); // beans
Get key by value
var position = myArray[0].indexOf('mango');
console.log(position); // 2
Get position of element in the array
// i.e. get index of the item in the array
console.log(myArray[0].indexOf('mango')); // 2
Get size of the array
console.log(myArray.length); // 3
Change value of any particular key
// change value of 'mango' to 'banana'
myArray[0][2] = 'banana';
console.log(myArray[0]); // ["apple", "orange", "banana"]
// change the value back to mango
myArray[0][2] = 'mango';
console.log(myArray[0]); // ["apple", "orange", "mango"]
Check if the variable is an array
// for multi-dimensional array, we check for individual array element
var isArray = Array.isArray(myArray[0]);
console.log(isArray); // true
Using foreach loop
myArray.forEach(function(item, index, array) {
console.log(index, item);
});
//0 ["apple", "orange", "mango"]
//1 ["rose", "lotus", "lily"]
//2 ["cabbage", "carrot", "beans"]
myArray.forEach(function(item, index, array) {
item.forEach(function(itm, idx, arr) {
console.log(index, idx, itm);
});
});
// 0 0 "apple"
// 0 1 "orange"
// 0 2 "mango"
// 1 0 "rose"
// 1 1 "lotus"
// 1 2 "lily"
// 2 0 "cabbage"
// 2 1 "carrot"
// 2 2 "beans"
Using for loop
for (i = 0; i < myArray.length; i++) {
console.log(i, myArray[i]);
}
//0 ["apple", "orange", "mango"]
//1 ["rose", "lotus", "lily"]
//2 ["cabbage", "carrot", "beans"]
for (i = 0; i < myArray.length; i++) {
for (j = 0; j < myArray[i].length; j++) {
console.log(i, j, myArray[i][j]);
}
}
// 0 0 "apple"
// 0 1 "orange"
// 0 2 "mango"
// 1 0 "rose"
// 1 1 "lotus"
// 1 2 "lily"
// 2 0 "cabbage"
// 2 1 "carrot"
// 2 2 "beans"
Add item at the end of the array
myArray[2].push('potato');
console.log(myArray[2]); // ["cabbage", "carrot", "beans", "potato"]
Add item at the beginning of the array
myArray[2].unshift('tomato');
console.log(myArray[2]); // ["tomato", "cabbage", "carrot", "beans", "potato"]
Remove item from end of the array
myArray[2].pop();
console.log(myArray[2]); // ["tomato", "cabbage", "carrot", "beans"]
Remove item from the beginning/front of the array
myArray[2].shift();
console.log(myArray[2]); // ["cabbage", "carrot", "beans"]
Remove items/elements of the array by their position/index
// below, we delete 1st element of the array
// position = 0 (1st position), number of items to remove = 1
var removedItem = myArray[1].splice(0, 1);
console.log(removedItem); // ["rose"]
console.log(myArray[1]); // ["lotus", "lily"]
Add items to array
// position = 1 (2nd item)
// remove = 0 element (don't remove any element/item)
// add two items = lemon and papayal
myArray[0].splice(1, 0, 'lemon', 'papaya');
console.log(myArray[0]); // ["apple", "lemon", "papaya", "orange", "mango"]
Sort array
console.log(myArray[0].sort()); // ["apple", "lemon", "mango", "orange", "papaya"]
Reverse sort
console.log(myArray[0].reverse()); // ["papaya", "orange", "mango", "lemon", "apple"]
Convert array into string
// using toString() function which converts array into commad separated string
myArrayStr = myArray[0].toString();
console.log(myArrayStr); // papaya,orange,mango,lemon,apple
// using join function where we can specify custom separator
myArrayStr = myArray[0].join(' | ');
console.log(myArrayStr); // papaya | orange | mango | lemon | apple
Merge two arrays
myArrayNew = ['apple', 'banana'];
myArrayAll = myArray[0].concat(myArrayNew);
console.log(myArray[0]); // ["papaya", "orange", "mango", "lemon", "apple"]
console.log(myArrayAll); // ["papaya", "orange", "mango", "lemon", "apple", "apple", "banana"]
Hope this helps. Thanks.