Array Loops in JavaScript

Array and Loops are already covered. If you haven't read that then go read them first. It hardly take 10 minutes....

for

for loop is the traditional loop to iterate over any object. It is supported in mostly all languages. For iterating over the array we can use for loop according to the indexes and continue to iterate until we reach to the end of the array element

let array = [1, 2, 3, 4, 5]
let array2 = []
for( let index = 0; index < array.length; index++ ){
    array2.push( array[index] * 2 )
// multiply each array element with 2 and add that in array2
}
console.log(array2) // [2, 4, 6, 8, 10]

forEach

forEach is a special method that calls a function on each element in an array and perform operations according to the statements passed. It accepts a maximum of 3 arguments (value , index , array). It needs either a function reference or arrow function which will execute on each element

value

Refers to the current element being processed in the iteration.

index

Refers to the current index being processed in the iteration

array

Refers to the whole array on which the method is appied.

const array = [1,2,3]
array.forEach( (value, index, array) => {
    console.log("value " + value + " index " + index + " array " + array)
})
/* Output -->
value 1 index 0 array 1,2,3
VM423:3 value 2 index 1 array 1,2,3
VM423:3 value 3 index 2 array 1,2,3
*/

// Function Reference
const arr = [1,2,3]
let sum = 0
arr.forEach(CalSum)
function CalSum(item){
    sum += item
}
console.log(sum) // 6

Array.from()

This method is used to create an array from any other objects. It is mostly used to create array of HTML Collections

HTML Collections

An HTMLCollection is an object in JavaScript that represents a collection of HTML elements. These collections are typically returned by various DOM methods and properties, allowing you to interact with groups of elements in a web document. HTMLCollections are dynamic, meaning that they automatically update when the underlying document changes.

let name = "Rakesh"
let arr = Array.from(name)
console.log(arr) // ['R', 'a', 'k', 'e', 's', 'h']

for...of

• The for..of loop is specially designed for iterating over the iterable data structure like arrays and strings etc.

• It provides a more readable and concise way to loop through the elements of an iterable without the need for explicit indexing or managing loop variables.

// example of array
let arr = [1,2]
for(let i of arr){
    console.log(i)
}
/* output -> 
    1
    2
*/

// example of string
let string = "hehe"
for(let i of string){
    console.log(i)
}
/* output -> 
    h
    e
    h
    e
*/

This article covers JavaScript array loops, including for, forEach, Array.from(), and for...of. It explains how each loop works and provides examples for better understanding. It also mentions upcoming topics like map, reduce, and filter.

map reduce and filter are also a part of array loops but I will cover all of them one by one.

Congratulations !!!!! You have learned something new today...

Instagram ----> React Mastery Series is going on

LinkedIn

I hope you have learned something new today. If yes, then follow me for more such valuable content.

Written By MOHIT SONI

Mastering Array Loops in JavaScript

Table of contents

for

forEach

Array.from()

for...of