Part 2: What is forEach and Map in JavaScript?
This is Part 2 of my I Need To Learn More JavaScript series.
- Part 1: What is a Closure in JavaScript?
- Part 2: What is forEach and Map in JavaScript?
- Part 3: What is a Reference in JavaScript?
- Part 4: What is Event Delegation in JavaScript?
- Part 5: What is Variable Scope in JavaScript?
What is forEach and Map in JavaScript?
forEach and Map are both methods on the Array.prototype.
That’s all.
Of course, I can’t end my article here so let us dig a litter bit deeper and see what we find out!
DOWN THE RABIT HOLE WE GO!!!
What is an Array.prototype?
According to the Mozilla Foundation, “the Array.prototype property represents the prototype for the Array constructor and allows you to add new properties and methods to all Array objects.”
That definition is rough… but here is what you need to know.
The Array.prototype is the prototype for the Array constructor.
Two things now jump out to me.
- What is a Prototype?
- What is a Constructor?
What is a Constructor?
A constructor in JavaScript is a function that is called with the new operator.
function Disney() {
this.founder = ‘Walt Disney’;
this.yearFounded = 1923;
}Disney.prototype = {
yearsOld: function () {
const age = 2017 — this.yearFounded;
console.log(age);
}
};const happy = new Disney();
In the example above, we execute the the Disney function with the new operator. Since functions are objects, constructers are also objects. So…
The Array.prototype is the prototype for the Array object.
What is a Prototype?
Almost every thing in JavaScript is an object, and every JavaScript object has a prototype. Therefore, the prototype itself is also an object.
But besides being just an object, a JavaScript prototype is a place that stores properties and methods for other objects. Said differently, JavaScript objects inherit their properties and methods from their prototype.
For example, lets say we have an Array object. All JavaScript objects inherit their properties and methods from their prototype. In our example above, the Array object inherits its properties and methods from the Array.prototype. Some of those methods include forEach and Map.
But it could be any type of object…
A date object? A date object inherits its properties and methods from the Date.prototype.
A RegExp object? A RegExp inherits its properties and methods from the RegExp.prototype.
This is where its gets wild.
Every object has a link to its prototype (which is also an object). So every object in JavaScript has a link to some other object. This goes on until the last object is reached. We know it is the last object because its prototype is null.
According to Mozilla, “null, by definition, has no prototype, and acts as the final link in this prototype chain.”
WE REACHED THE END OF THE RAINBOW!!
What is at the End of the Rainbow?
Null.
But the question we should ask is what is right before null — what is the last thing before null?
In most cases it is the Object.prototype. Nearly all objects in JavaScript are instances of Object which inherits all its properties and methods from the Object.prototype.
But is null really the end of the rainbow?
It turns out it isn’t.
The value null represents the intentional absence of any object value. But something must define what null is?
That something is JavaScript’s Primitive Values.
A primitive is data that is not an object and has no methods. It cannot be changed.
In our specific case, null is special… it DOES NOT have an object equivalent.
So why then does this return true!
typeof null === ‘object’
//returns trueMy friend Regis found this lovely gem…
“You may wonder why the typeof operator returns ‘object’ for a value that is null. This was actually an error in the original JavaScript implementation that was then copied in ECMAScript. Today, it is rationalized that null is considered a placeholder for an object, even though, technically, it is a primitive value.”
So having gone on that tangent….
What is forEach and Map in JavaScript?
forEach and Map are both methods on the Array.prototype.
What is the Difference between the Two?
The forEach() method executes a provided function once for each array element and always returns undefined.
const bretsName = ["b", "r", "e", "t"];
bretsName.forEach(function(letter) {
console.log(letter);
});returns-->b
r
e
t
undefined
The map() method creates a new array with the results of calling a provided function on every element in the array. It then returns this new array.
const numbers = [1, 5, 10, 15];numbers.map(function(x){
return x * 2;
});returns -->[2, 10, 20, 30]
The end..
