Difference between a forEach loop and a .map() loop

Describe one thing you learned in class today.

Array.prototype.forEach:

forEach() calls a provided callback function once for each element in an array in ascending order. It is not invoked for index properties that have been deleted or are uninitialized.

callback is invoked with three arguments:

  1. the value of the element
  2. the index of the element
  3. the Array object being traversed

If a thisArg parameter is provided to forEach(), it will be used as callback's this value. The thisArg value ultimately observable by callback is determined according to the usual rules for determining the this seen by a function.

The range of elements processed by forEach() is set before the first invocation of callback. Elements which are appended to the array after the call to forEach() begins will not be visited by callback. If existing elements of the array are changed or deleted, their value as passed to callback will be the value at the time forEach() visits them; elements that are deleted before being visited are not visited. If elements that are already visited are removed (e.g. using shift()) during the iteration, later elements will be skipped. (

Array.prototype.map:

map calls a provided callback function once for each element in an array, in order, and constructs a new array from the results. callback is invoked only for indexes of the array which have assigned values (including undefined).

It is not called for missing elements of the array; that is:

  • indexes that have never been set;
  • which have been deleted; or
  • which have never been assigned a value.

Array.prototype.filter:

filter() calls a provided callback function once for each element in an array, and constructs a new array of all the values for which callback returns a value that coerces to true. callback is invoked only for indexes of the array which have assigned values; it is not invoked for indexes which have been deleted or which have never been assigned values. Array elements which do not pass the callback test are simply skipped, and are not included in the new array.

callback is invoked with three arguments:

  1. the value of the element
  2. the index of the element
  3. the Array object being traversed

If a thisArg parameter is provided to filter, it will be used as the callback's this value. Otherwise, the value undefined will be used as its this value. The this value ultimately observable by callback is determined according to the usual rules for determining the this seen by a function.

filter() does not mutate the array on which it is called.

The range of elements processed by filter() is set before the first invocation of callback. Elements which are appended to the array (from callback) after the call to filter() begins will not be visited by callback. If existing elements of the array are deleted in the same way they will not be visited.

Can you describe the difference between a forEach loop and a .map loop and why you would pick one versus the other?

forEach() — executes a provided function once for each array element.

map() — creates a new array with the results of calling a provided function on every element in the calling array.

And, there it is! The main difference with forEach()and map() methods is that the map()method, executes a functions on each element inside of an array and returns a new array. Wherein the forEach() method, it executes a function on each element and returns a value of undefined.

Now if you find yourself in the predicament of choosing which of the functions to use, ask yourself if you need to store the functions output or not. Meaning if you are needing to get quick information for an array but don’t need the output to be stored anywhere else in the file, why store it? Use the forEach() method so you can get the important information then move on. It’s just more efficient to not collect the output if you don’t need them again.

Describe Event Bubbling:

It relates to the order in which event handlers are called when one element is nested inside a second element, and both elements have registered a listener for the same event.

What is the definition of a Higher Order Function?

A higher-order function is a function that can take another function as an argument, or that returns a function as a result.

ES6 Template Literals offer a lot of flexibility in generating strings. Can you give an example?

Per Mozilla, Template literals are enclosed by the backtick (` `) (grave accent) character instead of double or single quotes.

Template literals can contain placeholders. These are indicated by the dollar sign and curly braces (${expression}). The expressions in the placeholders and the text between the back ticks (` `) get passed to a function.

The default function just concatenates the parts into a single string. If there is an expression preceding the template literal (tag here), this is called a tagged template. In that case, the tag expression (usually a function) gets called with the template literal, which you can then manipulate before outputting.

To escape a back tick in a template literal, put a backslash (\) before the back tick.

Syntax would look like:

What is an Associative Array in Javascript?

The key idea is that every Javascript object is an associative array which is the most general sort of array you can invent — sometimes this is called a hash or map structure or a dictionary object. An associative array is simply a set of key value pairs.

Why you never use NEW ARRAY in Javascript?

Because it’s slower — it has to call the array constructor. The array literal notation is faster and also easier to read.

Austin Coding Academy