JS ES5: forEach vs map

forEach()

1. method

2. executes a provided function once for each array element, in order.

3. for array elements without values?

[Syntax]

arr.forEach(callback(currentValue [, index [, array]])[, thisArg])

▽

callback	Required	Function to execute on each element in the array.
		function(currentValue, index, arr)	currentValue Required.  The current element being processed in the array.
			index Optional.  The index currentValue in the array.
			array Optional.  The array object the current element belongs to. The array forEach() was called upon. : isn't this mean 'arr' in the syntax?
thisArg	Optional	A value to be passed to the function to be used as its "this" value when executing callback.
		If this parameter is empty, the value "undefined" will be passed as its "this" value

 

[Return value]

: Undefined.
: doesn't actually return anything (undefined). It simply calls a provided function on each element in your array.
: This callback is allowed to mutate the calling array.

---

map()

1. method

2. creates a new array with the results of calling a function for every array element, in order.

3. does not execute the function for array elements without values.
4. returns a new array and it is a pure function. So, it does not modify the old array.
5. to reformat objects in an array.
6. have to include a return statement in a callback. If don’t, a new array will be filled with undefined. 

[Syntax]

let new_array = arr.map(function callback( currentValue[, index[, array]]) {
    // return element for new_array
}[, thisArg])

▽

callback	Required	Function that is called for every element of arr.
		Each time callback executes, the returned value is added to new_array.
		function(currentValue, index, arr)	currentValue Required.  The current element being processed in the array.
			index Optional.  The index of the current element being processed in the array.
			array Optional.  The array object the current element belongs to. The array map was called upon. : isn't this mean 'arr' in the syntax?
thisArg	Optional	A value to be passed to the function to be used as its "this" value when executing callback.
		If this parameter is empty, the value "undefined" will be passed as its "this" value

[Return value]

: A new array with each element being the result of calling the callback function for each element in the original array.

---

#for vs forEach() vs map()

for loop: iterating each element one by one and add it to the new array.

forEach(): loop item one by one and add the element to the new array.

map(): returns a new array and it is a pure function. So, it does not modify the old array.

for	forEach()	map()	allows you to loop over the array.
			Don’t have to manually manage the state of the loop(more simpler and more maintainable).
			Fewer off-by-one errors is a big advantage.
			Can operate directly on the item instead of having to index into an array(more readable).
			map() function returns the array, so you can chain it with the other array methods.(forEach returns 'undefined')
			map() returns an array with the finished product, rather than requiring us to mutate the array inside a loop.

---

forEach()

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

https://www.w3schools.com/jsref/jsref_foreach.asp

map()
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

https://www.w3schools.com/jsref/jsref_map.asp

for vs forEach vs map
https://appdividend.com/2018/12/18/javascript-array-map-example-array-prototype-map-tutorial/