Javascript forEach - loop through js array items

Javascript forEach - loop through js array items

So imagine you went fruit shopping and you came back home with a basket of fruits. You need to store these fruits separately i.e you need all apples to be put together, all bananas to also be put together, all oranges to be put together and so on..

If you only had around 20 fruits in the basket, it will be relatively easy to complete this task. However, if the number was increased to about 50 - 60 fruits in this basket, then it becomes difficult and the difficulty of this task gradually increases as the number of the fruits does.

So in a case where you have a large number of fruits to be sorted, you're going to need something or someone that can make this process a little faster and less of a hassle.

Now, to be really honest, I have no idea on how to help you sort your basket full of fruits. But if we can imagine that basket to be an array of fruits in javascript, then I can think of a solution using the forEach method in javascript.

The forEach method is a higher order function (a function that takes a function as an argument). Other types of higher order function include: sort, reduce, filter and map.

Syntax of the forEach method:

// Arrow function
forEach((element) => { /* ... */ } )
forEach((element, index) => { /* ... */ } )
forEach((element, index, array) => { /* ... */ } )

// Callback function
forEach(callbackFn)
forEach(callbackFn, thisArg)

// Inline callback function
forEach(function(element) { /* ... */ })
forEach(function(element, index) { /* ... */ })
forEach(function(element, index, array){ /* ... */ })
forEach(function(element, index, array) { /* ... */ }, thisArg)

The above syntax can be found on the MDN Web Docs

The forEach method takes a callback function (a function passed as a argument into a higher order function) as its parameter, and this callback function takes three parameters: the currentElement, the indexOfcurrentElement, and the array itself.

array.forEach(function(currentElement, indexOfcurrentElement, array), thisValue)

The return value of the forEach method is undefined. It only calls a callback function for each of the elements provided in an array.

Now back to our basket of fruits..

Let's say we have an array that looks like this:

const basketOfFruits = [
  "apple",
  "orange",
  "grape",
  "banana",
  "watermelon",
  "grape",
  "apple",
  "banana",
  "orange",
  "watermelon"
];

and we want to group and know how many apples, bananas, oranges, watermelons and grapes are in our basket. A good way to do this would be to use the ForEach method.

So let's create individual arrays where we can group these fruits into.

const apples = [];
const bananas = [];
const watermelons = [];
const grapes = [];
const oranges = [];

We are going to be sorting our various fruits into their arrays respectively. For this, we use the forEach method.

basketOfFruits.forEach(sortFruit);

and the body of our sortFruit function will be as follows:

function sortFruit(fruit) {
  switch (fruit) {
    case "apple":
      apples.push(fruit);
      break;
    case "orange":
      oranges.push(fruit);
      break;
    case "banana":
      bananas.push(fruit);
      break;
    case "grape":
      grapes.push(fruit);
      break;
    case "watermelon":
      watermelons.push(fruit);
      break;
    default:
      console.log("Not a Fruit");
  }
}

So what the above function will do is to go into the basketOfFruits array, check each fruit and put them into their respective arrays.

So if we want to know the number of the different fruits we have individually, we can just check the length of each of their arrays

console.log(
  apples.length,
  bananas.length,
  oranges.length,
  watermelons.length,
  grapes.length
);

Comments

[Viktoria Bors-Pajuste]

Thanks for your explanation. I had hard times to see and understand the difference between forEach and map, and why forEach is useful. :D Your example is really good :)

[Jima Victor]

You're most welcome, Viktoria. I'm glad I could help.