How to return a value from a foreach loop? Javascript

In javascript, forEach is used to execute a function on each element in an array. However, forEach() by default does not return any value. But there are ways by which we can return a value in a forEach() loop.

In this article, we will see how to return value in a forEach() loop and also explore different methods by which we can return a value for a loop instead of using the forEach() function in Javascript.

Using a variable with forEach() method

To return a value in forEach() method, we can use a variable in the loop and once the loop is finished, we can set the values to that variable.

const arr = [1,2,3,4,5]

const newVal = []

const results = arr.forEach(el => {
  newVal.push(el * 2)
})

console.log(newVal)

Result:

[ 2, 4, 6, 8, 10 ]

Here, we have declared a variable (newVal) and then used it to push the multiplied value to it and when the loop is completed, we have console logged the new values in the terminal.

Now, next, we will learn about other javascript methods that we can use to return a value from a loop.

Using find() method

The find() method in Javascript returns the value of the first element in an array that passes a test function.

We can use this method instead of forEach() to return the first value of a given condition.

Example:

const arr = [1,2,3,4,5]

const results = arr.find(el => {
  return el % 2 == 0
})

console.log(results) // output: 2

In the above example, it returns the first number which is an even number from the given array.

Using reduce() method

The reduce() method iterates over all the elements of an array like forEach method and returns the last value that passes the test condition.

The reduce() method runs a function against an accumulator and each element from left to right in the array to reduce it to a single value.

Syntax:

arr.reduce(callback(accumulator, currentValue), initialValue)

initialValue is optional. Learn more about it here: Array.prototype.reduce() – JavaScript | MDN

Example

const arr = [2, 5, 5];

const initVal = 0

const result = arr.reduce((total,num) => {
    return total + num;
})

console.log(result) // output: 12

Here, we loop through the given array and returned the total as the result.

Using map() method

The map() method creates a new array with all the elements of a given array that passes the test function.

We can use this method to return an array of elements that satisfy a certain condition, instead of using the forEach() method.

Syntax:

Array.map(function(element) {
  if(condition)
    return element;
});

Example:

const arr = [2, 5, 5];

const result = arr.map(el => {
  return el * 2
})

console.log(result) //output: [ 4, 10, 10 ]

Here, we have used map() to loop through each element and multiplied it by 2, and return the new value.

Conclusion:

Here, we have learned how we can return a value in forEach() loop and also learned about other methods that can return a value from a loop in Javascript.