What's the difference between returning a value and passing a value along to a function?

Question

At this moment I am having trouble understanding the difference between passing along an array-element - which is the case in the forEach method - because it passes every array-element along to the console.log and logs it onto the console, but it RETURNS undefined.

However, in the case of array.map, which passes along the array-element to the console.log too, but also returns every array-element back to the variable which it is connected to, and creates a new array.

I don't understand the difference between returning a value (array.map) and passing a value along to a function (array.forEach).

const fruits = ['mango', 'papaya', 'pineapple', 'apple']
const yummyFruits = fruits.forEach(fruit => {
  console.log(fruit);
  return fruit;
});

const numbers = [1, 2, 3, 4, 5]; 
const coolNumbers = numbers.map(number => {
  console.log(number);
  return number;
});

console.log(yummyFruits);
console.log(coolNumbers);

Edit

My question is not solved by the proposed duplicate.

Answer 1

Let's start with a bit of theory about functions.

All functions have 2 fundamental aspects:

• they can return a value, to be used by the calling code

• they can "do something" in the course of being executed, where "something" can mean executing arbitrary code (eg logging to the console, changing the DOM, sending network requests, updating local or global state - the possibilities are endless). Such effects, things which a function does which are unrelated to what - if anything - the function returns, are called "side effects".

Note that these 2 aspects of functions are completely independent of each other. A function could return a value while having no side effects at all (this is sometimes called a "pure" function), or it could perform some side effects while not returning anything - or it could do both. All 3 are regularly seen in Javascript code.

Now let's look at forEach and map in this light. Both are array methods, which take a function as an argument, and apply that function to each element of the array. Note that, if that function has any side effects, those will all be performed in both cases - because side effects are things that a function does simply by being executed. But forEach and map behave very differently in terms of any return values produced by the function passed to the method:

• map builds a new array, made from the successive return values of the argument function when applied to each element of the original array. And it returns this new array.
• but forEach completely ignores any return value of the argument function. Because of this, there is no need for it to return anything. (And it doesn't.)

In other words, forEach is for applying a function to every element of an array, where that function is only relevant due to its side effects. Whereas map is for functions that return something, and building a new array by taking the collection of function results. It's most often used with pure functions - although there's no rule against using it with a function with side effects. But if you're mainly concerned with the side effects, then forEach is usually more natural.

Note that map could be implemented in terms of forEach very easily - by initialising an empty array, and using forEach with a function that applies its function argument to each element of the source array and pushes it onto the new one (and then returning that new array at the end).

But in general, forEach is for using side effects, and map is for building a new array by applying a pure function to each element.

Answer 2

There are several ways to iterate over the elements in an array, each with a different purpose.

For example forEach when you want to do something with every element in the array. It iterates over the array, but doesn't change it.

let myArray = [ 'A', 'B', 'B' ];

myArray.forEach( value => console.log(value) );

console.log(myArray); // Nothing changed: [ 'A', 'B', 'B' ]

Before forEach was added to Javascript, you could do the same thing like this:

var myArray = [ 'A', 'B', 'B' ];

var i;
for( i = 0 ; i < myArray.length ; i+=1 ) {
  console.log( myArray[ i ] );
}

With the new for of-statement the same thing can be done like this:

var myArray = [ 'A', 'B', 'B' ];

for( const value of myArray ) {
  console.log( value );
}

Sometimes you want to return a new array based on the values of the first array: You want to map the values. This returns a new array, based on the first.

let myTable = [ 'Alpha', 'Bravo', 'Charlie' ]
let myArray = [ 2, 1, 0 ]

let myNewArray = myArray.map( value => myTable[value] );

console.log(myNewArray); // [ 'Charlie', 'Bravo', Alpha' ]

Before map was added to Javascript you could do the same thing like this:

var myTable = [ 'Alpha', 'Bravo', 'Charlie' ]
var myArray = [ 2, 1, 0 ]

var myNewArray = [];
var i;
for ( i = 0; i < myArray.length; i += 1 ) {
  myNewArray[ i ] = myTable[ myArray[ i ] ];
}

console.log(myNewArray); // [ 'Charlie', 'Bravo', Alpha' ]

Sometimes you want to filter the values, only keeping some of the values.

let myArray = [ 6, 9, 10, 3, 15, 8, 2 ];

let myNewArray = myArray.filter( value => value >= 10 );

console.log( myNewArray ); // [ 10, 15 ]

Sometimes you wan to aggregate the content of the array, for example to sum all values:

let myArray = [ 6, 9, 10, 3, 15, 8, 2 ];

let sum = myArray.reduce(
 (sum, value) => sum + value, // the function
 0 // the start value
)

console.log( sum ); // 53

There is also find that will iterate over all values if the return value is false. The purpose of this is to find a value in the array.

const myArray = [ 6, 9, 10, 3, 15, 8, 2 ];

const myValue = myArray.find( value => value > 10 );

console.log( myValue ); // 15

And then there is some that iterates over the array until the function returns true. The purpose is to inspect the array to see if at least one value matches. If a match is found it stops the iteration.

const myArray = [ 6, 9, 10, 3, 15, 8, 2 ];

let myResult = myArray.some(
  (value, index) => {
    console.log('Inspecting index %d with value %d', index, value);
    return value >= 10
  }
);

console.log( myResult ); // true

And there is every that only returns true if all values matches the function.

const myArray = [ 6, 9, 10, 3, 15, 8, 2, 0 ];

let myResult = myArray.every(
  (value, index) => {
    const result = value > 0;
    console.log('Inspecting index %d with value %d: %s', index, value, result);
    return result;
  }
);

console.log( myResult ); // false

In all cases, every element is passed to the function, and you can do whatever you want. But it is bad practices to manipulate the original content of the array with find or map, or to use them if you don't want a new array. If you just want to process the values in the array, you use forEach.

Answer 3

When you call forEach on array, it makes whatever you want to do do with each element of array you pass, and returns undefined by definition.

map will do whatever you want with each element of array you pass (the same as forEach), but will create new array from values returned by inner function.

You will pass the same thing, the difference is only in what is the returned value (undefined vs. new array made up from what inner function returns)