So the JavaScript Map function. It’s a great way to iterate through an array. In other words, if you want to call some code to operate on every item in an array, you can do it with a map. The map() function doesn’t just do that though, it also returns the output of the array.
Consider this example, where we’ll double every number in the array.
Let array1 = {2,4,5,6};
Let map1 = array1.map( x => x * 2);
console.log(map1)
// Your array will be modified so it looks like this. Array [4,8,10,12];
As you can see, Map is a big hit with minimalist coders who like one liners. See how this
function(x) {
return x * 2;
}
Can be converted to
(x => x * 2) // Implied return
Parameters
Callback: this is the function that gets called for each and every one of the elements in the array. It can be in any form that functions are found, and that function has a few parameters of it’s own.
The callback is expecting:
currentValue: the current element being operated on.
Index: it’ll tell you the index in the array
workedOnArray: the array that your Map is working on.
thisArg: A variable to use as “this” when inside the callback.
So here’s an example, say we want to round every number in an array.
Let grades = [80.5, 60.1 56.9, 73.1, 99.3,89.7];
grades.map( function(currentValue, index, currentArray) {
Return Math.round(currentValue)
});
One of the problems with Map, is that it’s not always supported by older browsers.
You can use this Polyfill found from mozilla’s developer reference for JavaScript
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
// Production steps of ECMA-262, Edition 5, 15.4.4.19
// Reference: https://es5.github.io/#x15.4.4.19
if (!Array.prototype.map) {
Array.prototype.map = function(callback/*, thisArg*/) {
var T, A, k;
if (this == null) {
throw new TypeError('this is null or not defined');
}
// 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.com/#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 = arguments[1];
}
// 6. Let A be a new array created as if by the expression new Array(len)
// where Array is the standard built-in constructor with that name and
// len is the value of len.
A = new Array(len);
// 7. Let k be 0
k = 0;
// 8. Repeat, while k < len
while (k < len) {
var kValue, mappedValue;
// 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. Let mappedValue be the result of calling the Call internal
// method of callback with T as the this value and argument
// list containing kValue, k, and O.
mappedValue = callback.call(T, kValue, k, O);
// iii. Call the DefineOwnProperty internal method of A with arguments
// Pk, Property Descriptor
// { Value: mappedValue,
// Writable: true,
// Enumerable: true,
// Configurable: true },
// and false.
// In browsers that support Object.defineProperty, use the following:
// Object.defineProperty(A, k, {
// value: mappedValue,
// writable: true,
// enumerable: true,
// configurable: true
// });
// For best browser support, use the following:
A[k] = mappedValue;
}
// d. Increase k by 1.
k++;
}
// 9. return A
return A;
};
}
Polyfills functions that get rewritten in JavaScript like this function above, that will replace pieces of the language that is missing in older browsers.