Array Iterators

Iteration is the repetition of a process to generate the desired outcome. The outcome of each iteration is the starting point of the following iteration. In JavaScript, there are iteration methods, which operate on the array and interacts with each individual element inside the array.

let array = ["Apple", "Orange", "Pineapple", "Banana"]
function namePrinter(array) {
   for(const e of array) {
   console.log(e)
     }
}
namePrinter(array);
=> Apple
=> Orange
=> Pineapple
=> Banana

The example above is a simple iteration that prints the names of every fruit, but we can make this a bit more complex:

let array = [
{
  name: "Casper",
  breed: "Pomeranian",
  favoriteFood: "Chicken"
},
{
  name: "Yorky",
  breed: "Chihuahua",
  favoriteFood: "Rice"
},
{
  name: "Geo",
  breed: "Yorkie",
  favoriteFood:"Rice"
},
{
  name: "Lulu",
  breed: "Chihuahua",
  favoriteFood: "baby carrots"
},
{
  name: "cosmo",
  breed: "Chihuahua",
  favoriteFood: "Peanut butter"
}
]
function printer(array) {
  for(const dog of array) {
    if(dog.breed === "Chihuahua"){
       console.log(dog.name)
     }
  }
}
printer(array)
=> Yorky
=> Lulu
=> Cosmo

This example prints the name of the dogs, but only the dogs whose breed is a chihuahua.

This is basically how iterating through arrays works. A function iterates through an array and interacts with each element inside of it. JavaScript has a variety of prototype methods that can make iterating a lot easier, here I will explain some of these methods.

Array.prototype.map()

The map()method iterates through an array and performs a function on each element, then returns a new array with the new elements without changing the original array.

const array1 = [2, 4, 6, 8, 10]
const array2 = array1.map(e => e * 2);
console.log(array2)
=>[4, 8, 12, 16, 20]

In the above example, the map method iterated through the array and multiply each element by 2 then stored the results in a new array(array2).

Array.prototype.find()

The find() method is used to find a specific element that meets the provided criteria. This method will only return the first element that meets the criteria.

let array = [
{
  name: "Casper",
  breed: "Pomeranian",
  favoriteFood: "Chicken"
},
{
  name: "Yorky",
  breed: "Chihuahua",
  favoriteFood: "Rice"
},
{
  name: "Geo",
  breed: "Yorkie",
  favoriteFood:"Rice"
},
{
  name: "Lulu",
  breed: "Chihuahua",
  favoriteFood: "baby carrots"
},
{
  name: "cosmo",
  breed: "Chihuahua",
  favoriteFood: "Peanut butter"
}
]
let array2 = array.find(e => e.breed === "Chihuahua")
console.log(array2)
=> { name: 'Yorky', breed: 'Chihuahua', favoriteFood: 'Rice' }

In this above example, we used find() to find a dog whose breed is “Chihuahua” and in return, we get back the object of “Yorky” since this is the first dog that meets the criteria.

Array.prototype.forEach()

The forEach() method executes a function once per element.

let array = [2, 4, 6]
array.forEach(e => console.log(e * 2))
=> 4
=> 8
=> 12

The forEach() method executes the provided function, in the above example we just multiply each element by 2 but there is many more stuff we can do, we can also use callback functions.