Learn different ways through which we can loop an array in javascript.
Arrays are one of the most common data structure that we use often in day to day programming and the basic operation performed on it is iterating.
There are many different options available to us after ES6 to iterate through an array in javascript.
First we will see how we can use different for loops to iterate arrays.
Using for loop
The basic of all the for loops available in javascript.
let arr = ['a', 'b', 'c', 'd'];
for(let i = 0; i < arr.length; i++){
console.log(arr[i]);
}
//"a"
//"b"
//"c"
//"d"
Using forEach loop
Alternatively Array.forEach() method can be used to iterate through each array elements.
This method calls a callback function for each item of the array.
let arr = ['a', 'b', 'c', 'd'];
arr.forEach((e, i) => {
console.log(e);
});
//"a"
//"b"
//"c"
//"d"
Using for...of loop
for...of iterates over the value of distinct properties of iterable objects.
let arr = ['a', 'b', 'c', 'd'];
for(let element of arr){
console.log(element);
}
//"a"
//"b"
//"c"
//"d"
Using for...in loop
for in statement iterates over the enumerable properties of an object. It iterates over the keys. As indexes are the numeric keys assigned to the arrays we can use them to get the value.
let arr = ['a', 'b', 'c', 'd'];
for(let index in arr){
console.log(arr[index]);
}
//"a"
//"b"
//"c"
//"d"
The order of iteration is implementation-dependent in for in loop which means properties of objects will not be in particular order, so it is better avoid this using on array.
After the introduction of ES6, now there are different methods available which can be used to loop through an object in javascript.
1. Object.keys().
2. Object.entries().
3. Object.values().
As arrays are objects in javascript we can use these methods on array as well to iterate it.
Using Object.keys() to loop through an array in javascript
This method returns an array of keys of own properties names, we can then loop through these keys and access the values of the object.
let arr = ['a', 'b', 'c', 'd'];
let keys = Object.keys(arr);
console.log(keys);
//["0", "1", "2", "3"]
keys.forEach(e => {
console.log(arr[e]);
});
//"a"
//"b"
//"c"
//"d"
Using Object.values()
This method will return an array of values of own enumerable properties of the object. The values are returned in the same order as by the for...in method.
let arr = ['a', 'b', 'c', 'd'];
let values = Object.values(arr);
console.log(values);
//["a", "b", "c", "d"]
values.forEach(e => {
console.log(e);
});
//"a"
//"b"
//"c"
//"d"
Using Object.entries()
This method returns an array of key value pair of own enumerable properties of the given object in the same order as it is returned by for...in loop.
let arr = ['a', 'b', 'c', 'd']
let entries = Object.entries(arr);
console.log(entries);
//[["0", "a"], ["1", "b"], ["2", "c"], ["3", "d"]]
for(let [key, value] of entries){
console.log(`key: ${key}, value: ${value}`);
}
//"key: 0, value: a"
//"key: 1, value: b"
//"key: 2, value: c"
//"key: 3, value: d"
Loop through multi dimensional array in javascript
The best way to iterate through two dimensional array in javascript with single loop is using for...of loop.
let arr = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
for(let [value1, value2, value3] of arr){
console.log(`value1: ${value1}, value2: ${value2}, value3: ${value3}`);
}
//"value1: 1, value2: 2, value3: 3"
//"value1: 4, value2: 5, value3: 6"
//"value1: 7, value2: 8, value3: 9"
Alternatively you can use your classic nested for loops as well. We can use all the above methods to iterate through array of objects too.