JS forEach() - arr.forEach(callback[, thisArg])

gistfile1.txt

// arr.forEach(callback[, thisArg])
// REMEMBER!! The forEach uses a function
// The forEach() method executes a provided function once per array element.
// The function can be written outside of the forEach() and called in the forEach() or 
// the function can be written inside of the forEach.
// You cannot break from a forEach().
// Each of the 3 code blocks below uses the same function written inside of the forEach(). 
// also these functions were between script tags in the .html file, if in ext file, they would need to be slightly modified using the this keyword
// For performance-critical scenarios (“hot paths,” tight loops, etc.), a classic for loop is better because the Javascript interpreter can better optimize it. This is also necessary if you need to break from the loop, which you cannot do with forEach.
// http://www.kraigbrockschmidt.com/2013/01/22/array-enumeration-javascript/


<script>

  // *** Example # 1 **************************************************************
  var myArray = ['liz', 'jim', 'pat', 1, 2, 3, 'this is a string'];
  var lizArray = [];  
  // if lizArray is initialzed inside of the forEach, the value of the array is reset with each pass, recreating an empty array
  // if lizArray is simply declared and not initialized inside of the forEach, an error occurs
  // so lizArray is initialized outside of the forEach(), but this creates a global var which is undesirable, so the block of code below this next block of code is the same except that it is wrapped in a function and called, and the 3rd block of code is same but uses an IIFE and does not return anything.
  // also the vars above have been declared in global namespace which is undesireable

  myArray.forEach(function(entry) {
    // console.log(myArray);
    var newEntry = entry + ':'
    // console.log(newEntry);      
    lizArray.push(newEntry);
    //console.log('lizArray', lizArray);
    return lizArray;  // returns to global namespace which is undesirable
  });

  console.log('lizArray - ', lizArray);

  // *** Example # 2 **************************************************************
  // the above code but wrapped in function lizArrayFunct
  var lizArrayFunct = function() {
    var myArray = ['liz', 'jim', 'pat', 1, 2, 3, 'this is a string'];
    var lizArray = [];

    myArray.forEach(function(entry) {
      // console.log(myArray);
      var newEntry = entry + ':'
      // console.log(newEntry);      
      lizArray.push(newEntry);
      // console.log('lizArray', lizArray)   
    });
      
    return lizArray;
  };

  var addColons = lizArrayFunct();
  console.log('addColons - ', addColons);


  // *** Example # 1 **************************************************************
  // same as above but IIFR, nothing is returned
  (function() {
    var myArray = ['liz', 'jim', 'pat', 1, 2, 3, 'this is a string'];
    var lizArray = [];

    myArray.forEach(function(entry) {
      // console.log(myArray);
      var newEntry = entry + ':'
      // console.log(newEntry);      
      lizArray.push(newEntry);          
    });
    console.log('lizArray in IIFE - ', lizArray) 
  }());

</script>