(Array Methods Part 3) What are Iteration Methods?

#javascript #beginners #programming

Today, finally, I will explain the last type of array methods.

If you have had contact with JavaScript at some point, you have probably come across one (or maybe all) of the methods that I will show in this post.

Iteration methods are very important because we generally need to work with a group of information that is most of the time inside arrays.

This type of method directly interacts with each element of the array, facilitating the handling of the data that we want to obtain.

Iteration Methods

.forEach(callback(item, index, array)) - This method take a callback function as an argument. The callback function is called for each element in array.

The callback function take three arguments: item (current item), index (position of item in array) and original array.

For example,

const fruits = [
  {
    name: "Apple",
    price: 2.0,
  },
  {
    name: "Banana",
    price: 4.0,
  },
  {
    name: "Orange",
    price: 3.0,
  },
];

fruits.forEach((fruit, index, originalArray) => {
  console.log(`${fruit.name} costs ${fruit.price}`); // (Name of fruit) costs (price of fruit)
  console.log(`Its in position ${index} of the array`); // Its in position (0, 1 or 2) of the array
  console.log(originalArray); // [{ name: 'Apple', price: 2 }, { name: 'Banana', price: 4 }, { name: 'Orange', price: 3 }]
});

In this case, I used forEach just to display the name of the fruit along with its price, show the item's position in the array, and display the original array.

.map(callback(itemAtual, index, array)) - This method works the same as forEach, the only difference is that map method return new array with the changes made by callback function

const fruits = [
  {
    name: "Apple",
    price: 2.0,
  },
  {
    name: "Banana",
    price: 4.0,
  },
  {
    name: "Orange",
    price: 3.0,
  },
];

const fruitsWithIndex = fruits.map((fruit, index) => {
  return {
    name: fruit.name,
    price: fruit.price,
    index,
  };
});

console.log(fruitsWithIndex);

/*
  [
    { name: 'Apple', price: 2, index: 0 },
    { name: 'Banana', price: 4, index: 1 },
    { name: 'Orange', price: 3, index: 2 }
  ]
*/

In this case, I used the map method to generate a new array fruitsWithIndex, which adds an index to the object related to each fruit in the iterated array.

As usual I'll leave some others important Iteration Methods that I think you should know:

.reduce()
.reduceRight()
.some()
.every()

That's all for today!!