Advantages of Javascript's Built-in Array Iterator Methods

An array is a data structure that allows us to store and manipulate a set of values. In Javascript, there are several built-in array iterator methods that conveniently apply a function to each element of the array. These methods can serve several purposes, including the following:

• Altering each element of an array
• Returning a new array that is comprised of those altered elements
• Shrinking an array to include only the elements that satisfy a certain condition
• Accumulating an array's elements as inputs and returning a result as a single value.

Let’s walk through some examples of these methods to see how we can use them to simplify our code:

.forEach()

The .forEach() method can be used to execute a function on each element of an array. For example, in an array of integers, we can use this method to add 50 to each element and print each sum. If we want to achieve this result using a traditional for loop, it may look like the following:

let numberSet = [1, 2, 3, 4, 5, 6]
for (let i=0; i<numberSet.length; i++){
numberSet[i]=numberSet[i]+50
console.log(numberSet[i])
}
//prints: 51 52 53 54 55 56

Now, let's print the same result using the .forEach() method:

let numberSet = [1, 2, 3, 4, 5, 6]
numberSet.forEach(i => console.log(i+50))
//prints: 51 52 53 54 55 56

From this comparison, we can see how the .forEach() method applies modifiers to each element of an array in fewer lines of code than a traditional for loop.

.map()

The .map() method can be used to execute a function on each element of an array, and then return a new array with the modified result. For example, in an array of integers, we can use this method to print a new array comprised of each element multiplied by 5. If we want to achieve this result using a traditional for loop, it may look like the following:

let numberSet = [1, 2, 3, 4, 5, 6]
let timesFive=[]
for (let i=0; i<numberSet.length; i++){
timesFive[i]=numberSet[i]*5
}
console.log(timesFive)
// prints: [ 5, 10, 15, 20, 25, 30 ]

Now, let's print the same result using the .map() method:

let numberSet = [1, 2, 3, 4, 5, 6]
let timesFive = numberSet.map(i => (i * 5))
console.log(timesFive)
// prints: [ 5, 10, 15, 20, 25, 30 ]

From this comparison, we can see how the .map() method applies modifiers to each element of an array and returns the modified elements in a new array in fewer lines of code than a traditional for loop.

The .filter() method can be used to create a new array that includes only the elements which satisfy a specified condition. For example, in an array of strings, we can use this method to print a new array that includes only the elements which contain the "r" character. If we want to achieve this result using a traditional for loop, it may look like the following:

let fruits = ["banana","fig","durian","papaya","raspberry","starfruit"]
let fruitsWithR=[]
for(let i=0; i<fruits.length; i++){
  if (fruits[i].includes("r")==true){
  fruitsWithR.push(fruits[i])
  }
}
console.log(fruitsWithR)
//prints [ 'durian', 'raspberry', 'starfruit' ]

Now, let's print the same result using the .filter() method:

let fruits = ["banana","fig","durian","papaya","raspberry","starfruit"]
let fruitsWithR = fruits.filter(i=>i.includes("r")==true)
console.log(fruitsWithR)
//prints [ 'durian', 'raspberry', 'starfruit' ]

From this comparison, we can see how the .filter() method returns a new array containing the elements that satisfy a specified condition in fewer lines of code than a traditional for loop.

.reduce()

The .reduce() method can be used to return a single value that is the cumulative result of each element in an array. For example, in an array of integers, we can use this method to print the total product of each element. If we want to achieve this result using a traditional for loop, it may look like the following:

let numberSet = [1, 2, 3, 4, 5, 6]
let product=1
for (let i=0; i<numberSet.length; i++){
product=product*numberSet[i]
}
console.log(product)
//prints 720

Now, let's print the same result using the .reduce() method:

let numberSet = [1, 2, 3, 4, 5, 6]
let product= numberSet.reduce((i,j) => i*j,1)
console.log(product)
//prints 720

From this comparison, we can see how the .reduce() method returns a cumulative result using the elements of the initial array as inputs, and requires fewer lines of code than a traditional for loop.

These examples show how Javascript's built-in array iterator methods allow us to execute a function on each element of an array, and to do so more concisely than traditional for loops.