Improve .forEach examples: syntax and consistency (#12799)

* Improve .forEach examples: syntax and consistency

* fixup! Improve .forEach examples: syntax and consistency

* fixup! Improve .forEach examples: syntax and consistency

* Remove Polyfill section Array.prototype.forEach

Author: tshemsedinov

files/en-us/web/javascript/reference/global_objects/array/foreach/index.md

@@ -22,9 +22,9 @@ for each array element.
 
 ```js
 // Arrow function
-forEach((element) => { /* ... */ } )
-forEach((element, index) => { /* ... */ } )
-forEach((element, index, array) => { /* ... */ } )
+forEach((element) => { /* ... */ })
+forEach((element, index) => { /* ... */ })
+forEach((element, index, array) => { /* ... */ })
 
 // Callback function
 forEach(callbackFn)
@@ -125,109 +125,34 @@ effects at the end of a chain.
 > implications while using promises (or async functions) as `forEach` callback.
 >
 > ```js
-> let ratings = [5, 4, 5];
+> const ratings = [5, 4, 5];
 > let sum = 0;
 >
-> let sumFunction = async function (a, b)
-> {
->   return a + b
-> }
+> const sumFunction = async (a, b) => a + b;
 >
-> ratings.forEach(async function(rating) {
->   sum = await sumFunction(sum, rating)
-> })
+> ratings.forEach(async (rating) => {
+>   sum = await sumFunction(sum, rating);
+> });
 >
-> console.log(sum)
+> console.log(sum);
 > // Naively expected output: 14
 > // Actual output: 0
 > ```
 
-## Polyfill
-
-`forEach()` was added to the ECMA-262 standard in the 5th
-edition, and it may not be present in all implementations of the standard. You can work
-around this by inserting the following code at the beginning of your scripts, allowing
-use of `forEach()` in implementations which do not natively support it.
-
-This algorithm is exactly the one specified in ECMA-262, 5th edition,
-assuming {{jsxref("Object")}} and {{jsxref("TypeError")}} have their original values and
-that `fun.call` evaluates to the original value of
-{{jsxref("Function.prototype.call()")}}.
-
-```js
-// Production steps of ECMA-262, Edition 5, 15.4.4.18
-// Reference: https://es5.github.io/#x15.4.4.18
-
-if (!Array.prototype['forEach']) {
-
-  Array.prototype.forEach = function(callback, thisArg) {
-
-    if (this == null) { throw new TypeError('Array.prototype.forEach called on null or undefined'); }
-
-    var T, k;
-    // 1. Let O be the result of calling toObject() passing the
-    // |this| value as the argument.
-    var O = Object(this);
-
-    // 2. Let lenValue be the result of calling the Get() internal
-    // method of O with the argument "length".
-    // 3. Let len be toUint32(lenValue).
-    var len = O.length >>> 0;
-
-    // 4. If isCallable(callback) is false, throw a TypeError exception.
-    // See: https://es5.github.io/#x9.11
-    if (typeof callback !== "function") { throw new TypeError(callback + ' is not a function'); }
-
-    // 5. If thisArg was supplied, let T be thisArg; else let
-    // T be undefined.
-    if (arguments.length > 1) { T = thisArg; }
-
-    // 6. Let k be 0
-    k = 0;
-
-    // 7. Repeat, while k < len
-    while (k < len) {
-
-      var kValue;
-
-      // a. Let Pk be ToString(k).
-      //    This is implicit for LHS operands of the in operator
-      // b. Let kPresent be the result of calling the HasProperty
-      //    internal method of O with argument Pk.
-      //    This step can be combined with c
-      // c. If kPresent is true, then
-      if (k in O) {
-
-        // i. Let kValue be the result of calling the Get internal
-        // method of O with argument Pk.
-        kValue = O[k];
-
-        // ii. Call the Call internal method of callback with T as
-        // the this value and argument list containing kValue, k, and O.
-        callback.call(T, kValue, k, O);
-      }
-      // d. Increase k by 1.
-      k++;
-    }
-    // 8. return undefined
-  };
-}
-```
-
 ## Examples
 
 ### No operation for uninitialized values (sparse arrays)
 
 ```js
-const arraySparse = [1,3,,7]
-let numCallbackRuns = 0
+const arraySparse = [1, 3,, 7];
+let numCallbackRuns = 0;
 
-arraySparse.forEach(function(element) {
-  console.log(element)
-  numCallbackRuns++
-})
+arraySparse.forEach((element) => {
+  console.log({ element });
+  numCallbackRuns++;
+});
 
-console.log("numCallbackRuns: ", numCallbackRuns)
+console.log({ numCallbackRuns });
 
 // 1
 // 3
@@ -239,18 +164,18 @@ console.log("numCallbackRuns: ", numCallbackRuns)
 ### Converting a for loop to forEach
 
 ```js
-const items = ['item1', 'item2', 'item3']
-const copyItems = []
+const items = ['item1', 'item2', 'item3'];
+const copyItems = [];
 
 // before
 for (let i = 0; i < items.length; i++) {
-  copyItems.push(items[i])
+  copyItems.push(items[i]);
 }
 
 // after
-items.forEach(function(item){
-  copyItems.push(item)
-})
+items.forEach((item) => {
+  copyItems.push(item);
+});
 ```
 
 ### Printing the contents of an array
@@ -265,13 +190,13 @@ items.forEach(function(item){
 The following code logs a line for each element in an array:
 
 ```js
-function logArrayElements(element, index, array) {
-  console.log('a[' + index + '] = ' + element)
-}
+const logArrayElements = (element, index, array) => {
+  console.log('a[' + index + '] = ' + element);
+};
 
 // Notice that index 2 is skipped, since there is no item at
 // that position in the array...
-[2, 5, , 9].forEach(logArrayElements)
+[2, 5,, 9].forEach(logArrayElements);
 // logs:
 // a[0] = 2
 // a[1] = 5
@@ -288,19 +213,18 @@ function Counter() {
   this.sum = 0
   this.count = 0
 }
+
 Counter.prototype.add = function(array) {
   array.forEach(function countEntry(entry) {
-    this.sum += entry
-    ++this.count
-  }, this)
-}
-
-const obj = new Counter()
-obj.add([2, 5, 9])
-obj.count
-// 3
-obj.sum
-// 16
+    this.sum += entry;
+    ++this.count;
+  }, this);
+};
+
+const obj = new Counter();
+obj.add([2, 5, 9]);
+console.log(obj.count); // 3
+console.log(obj.sum); // 16
 ```
 
 Since the `thisArg` parameter (`this`) is provided to
@@ -321,20 +245,18 @@ and is presented to explain how `Array.prototype.forEach()` works by using
 ECMAScript 5 `Object.*` meta property functions.
 
 ```js
-function copy(obj) {
-  const copy = Object.create(Object.getPrototypeOf(obj))
-  const propNames = Object.getOwnPropertyNames(obj)
-
-  propNames.forEach(function(name) {
-    const desc = Object.getOwnPropertyDescriptor(obj, name)
-    Object.defineProperty(copy, name, desc)
-  })
-
-  return copy
-}
-
-const obj1 = { a: 1, b: 2 }
-const obj2 = copy(obj1) // obj2 looks like obj1 now
+const copy = (obj) => {
+  const copy = Object.create(Object.getPrototypeOf(obj));
+  const propNames = Object.getOwnPropertyNames(obj);
+  propNames.forEach((name) => {
+    const desc = Object.getOwnPropertyDescriptor(obj, name);
+    Object.defineProperty(copy, name, desc);
+  });
+  return copy;
+};
+
+const obj1 = { a: 1, b: 2 };
+const obj2 = copy(obj1); // obj2 looks like obj1 now
 ```
 
 ### Modifying the array during iteration
@@ -349,15 +271,15 @@ Because element `four` is now at an earlier position in the array,
 `forEach()` does not make a copy of the array before iterating.
 
 ```js
-let words = ['one', 'two', 'three', 'four']
-words.forEach(function(word) {
-  console.log(word)
+const words = ['one', 'two', 'three', 'four'];
+words.forEach((word) => {
+  console.log(word);
   if (word === 'two') {
-    words.shift() //'one' will delete from array
+    words.shift(); //'one' will delete from array
   }
-}) // one // two // four
+}); // one // two // four
 
-console.log(words);  //['two', 'three', 'four']
+console.log(words); // ['two', 'three', 'four']
 ```
 
 ### Flatten an array
@@ -366,24 +288,21 @@ The following example is only here for learning purpose. If you want to flatten
 array using built-in methods you can use {{jsxref("Array.prototype.flat()")}}.
 
 ```js
-function flatten(arr) {
-  const result = []
-
-  arr.forEach(function(i) {
+const flatten = (arr) => {
+  const result = [];
+  arr.forEach((i) => {
     if (Array.isArray(i)) {
-      result.push(...flatten(i))
+      result.push(...flatten(i));
     } else {
-      result.push(i)
+      result.push(i);
     }
-  })
-
-  return result
+  });
+  return result;
 }
 
 // Usage
-const nested = [1, 2, 3, [4, 5, [6, 7], 8, 9]]
-
-flatten(nested) // [1, 2, 3, 4, 5, 6, 7, 8, 9]
+const nested = [1, 2, 3, [4, 5, [6, 7], 8, 9]];
+console.log(flatten(nested)); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
 ```
 
 ## Specifications