Why does .forEach() return undefined?

It is so hard to understand .forEach() return undefined? If it returns undefined so why are we using it?

const fruits = [‘mango’, ‘papaya’, ‘pineapple’, ‘apple’];

fruits.forEach(fruit => console.log('I want to eat a ’ + fruit));

.forEach() method returns here

I want to eat a mango
I want to eat a papaya
I want to eat a pineapple
I want to eat a apple

As you see it returns VALUE.

So why you are calling that .forEach() returns undefined?

You use the method to log each item of the array to console.

logging something to the console and the value returned by a method are two different things.

doing:

console.log(fruits.forEach(fruit => console.log('I want to eat a ’ + fruit)));

will show you the return value, which is undefined

just like when we would define a function/method that doesn’t have a return keyword

2 Likes

I just like to clarify what roy said above, so it means that the forEach() method purpose only is if we want to perform an action in an array such as accessing an element in an array, forEach() method will only help us access those element in an array and pass those elements in a callback function defined as argument of the forEach() method right? that’s why it doesn’t expect any return value as it’s only purpose is to help us access elements, which is a great alternative, rather than using for loop.

So basically, the return value will always depend on the callback function that we will be going to defined and passed an argument? just like the example above which performs an arrow function with implicit return value. That’s how I understood the purpose of forEach() method. am I right?. Please correct me if I’m wrong. Thank you so much.

The difference between logging and returning value is that, if we want to perform certain actions inside the function and we want to get those results and use those results on other functions or assign the result value to a new variable globally, then the returned keyword is what we need. We should define it inside of our functions.

const val1 = 1;
const val2 = 2;

function sumWithReturn(a, b) {
	let sum = a + b;
	return sum; 
}

returning value means we can use the value for performing other actions globally, such as assigning it’s value to a new variable. If we try to log the returned value of the above function, it will display it to the console.

// will log the sum as it returns the value, and value can be access and used globally
console.log(sumWithReturn(val1, val2)); 
// used the returned value of the sumWithReturn function and assign it to a variable
const sum = sumWithReturn(val1, val2); 
// log the value of sum
console.log(sum); 
// without returning value, sum variable can be only access inside this code block / locally
// that's why if we tried to log this function, it will return an undefined, but it performs the actions inside
function sumNoReturn(a, b) {
	let sum = a + b;   
}
// will only returned undefined, but performs actions inside the function.
console.log(sumNoReturn(val1, val2)); 

// this function will log the value of the sum 
// but it doesn't return its values
// if we try to print it, it will return an undefined

function sumWithLog(a, b) {
	let sum = a + b; 
  console.log(sum); 
}

// logging the function will returned undefined but it will log the value of sum as we defined a console.log() inside the function.
console.log(sumWithLog(val1, val2)); 
3 Likes

… in Read Only mode.

1 Like

“… in Read Only mode.”

Ah, that’s a key point, thanks.

1 Like

Well, I’ve looked through all of these and I still don’t understand how forEach() always returns undefined, lots of people posted code that is too complex for me since this is an intro class and I am just learning how to do this. And other people are posting saying they’re demonstrating how it “returns” undefined, and there is no return in there code. Maybe I am missing something, probably I’m missing something actually. Would be grateful for some enlightenment, thank you.

Every function has a default return.

const foo = x => {

}
console.log(foo())    //  undefined

Functions that perform an action but have nothing to send back all return the same way. Methods are functions and behave identical. .forEach() is a method that performs an action and has nothing to send back. The return value will always be undefined.