- Implement a
map()
function from scratch - Demonstrate using
map()
In the previous lesson, we learned about .filter()
, a built-in array method
that searches through a collection, passes each element to a provided callback
function, and returns an entirely new array comprised of elements for which the
callback returned a truthy value.
Another very common built-in array method is .map()
, which transforms every
element in an array to another value. For example, it can be used to square
every value in an array of numbers: [1, 2, 3]
-> [1, 4, 9]
. Like
.filter()
, .map()
accepts a callback function, and passes each element
in turn to the callback:
[1, 2, 3].map(function (num) {
return num * num;
});
// => [1, 4, 9]
While both .filter()
and .map()
return a new array, .filter()
returns a
subset of the original array (unless all elements meet the provided condition)
in which the elements are unchanged. .map()
, on the other hand, returns a new
array that's the same length as the original array in which the elements have
been modified.
Let's quickly run through how we could create our own version of the .map()
method.
Right off the bat, we know that our function needs to accept the array from which we'd like to map values as an argument:
function map(array) {
// Map magic to follow shortly
}
Inside the function, we need to iterate over each element in the passed-in
array, so let's fall back on our trusty for...of
statement:
function map(array) {
for (const element of array) {
// Do something to each element
}
}
We want to transform values from the array, but for code organization and
reusability it's best to keep that logic decoupled from the map()
function.
map()
should really only be concerned with iterating over the collection and
passing each element to a callback that will handle the transformations. Let's
accept that callback function as the second argument to map()
:
function map(array, callback) {
for (const element of array) {
// Do something to each element
}
}
And inside our iteration, we'll want to invoke the callback, passing in the
elements from array
:
function map(array, callback) {
for (const element of array) {
callback(element);
}
}
Let's make sure this is working so far:
map([1, 2, 3], function (num) {
console.log(num * num);
});
// LOG: 1
// LOG: 4
// LOG: 9
Logging each squared number out to the console is fun, but map()
should really
be returning an entirely new array containing all of the squared values. First,
let's create that new array:
function map(array, callback) {
const newArr = [];
for (const element of array) {
callback(element);
}
}
Inside the for...of
statement, let's .push()
the return value of each
callback invocation into newArr
:
function map(array, callback) {
const newArr = [];
for (const element of array) {
newArr.push(callback(element));
}
}
And at the end of our map()
function we're going to want to return the new
array:
function map(array, callback) {
const newArr = [];
for (const element of array) {
newArr.push(callback(element));
}
return newArr;
}
Let's test it out!
const originalNumbers = [1, 2, 3, 4, 5];
const squaredNumbers = map(originalNumbers, function (num) {
return num * num;
});
originalNumbers;
// => [1, 2, 3, 4, 5]
squaredNumbers;
// => [1, 4, 9, 16, 25]
Now let's try using our version of the map()
function on a trickier data
structure — a list of recently onboarded engineers. First off, we need to flip
each new engineer's account from a normal user to an admin:
const oldAccounts = [
{ userID: 15, title: "Developer Apprentice", accessLevel: "user" },
{ userID: 63, title: "Developer Apprentice", accessLevel: "user" },
{ userID: 97, title: "Developer Apprentice", accessLevel: "user" },
{ userID: 12, title: "Developer Apprentice", accessLevel: "user" },
{ userID: 44, title: "Developer Apprentice", accessLevel: "user" },
];
const newEngineers = map(oldAccounts, function (account) {
return Object.assign({}, account, { accessLevel: "admin" });
});
oldAccounts;
// => [
// { userID: 15, title: "Developer Apprentice", accessLevel: "user" },
// { userID: 63, title: "Developer Apprentice", accessLevel: "user" },
// { userID: 97, title: "Developer Apprentice", accessLevel: "user" },
// { userID: 12, title: "Developer Apprentice", accessLevel: "user" },
// { userID: 44, title: "Developer Apprentice", accessLevel: "user" }
// ]
newEngineers;
// => [
// { userID: 15, title: "Developer Apprentice", accessLevel: "admin" },
// { userID: 63, title: "Developer Apprentice", accessLevel: "admin" },
// { userID: 97, title: "Developer Apprentice", accessLevel: "admin" },
// { userID: 12, title: "Developer Apprentice", accessLevel: "admin" },
// { userID: 44, title: "Developer Apprentice", accessLevel: "admin" }
// ]
As before, we are calling our version of the map()
function and passing in the
collection and a callback. Notice that we're using Object.assign()
to create a
new object with updated values instead of mutating the original object's
accessLevel
property. Nondestructive updating is an important concept to
practice — destructively modifying objects at multiple points within a code base
is one of the biggest sources of bugs.
Next, we just need a simple array of the new engineers' userID
s that we can
shoot over to the system administrator:
const userIDs = map(newEngineers, function (eng) {
return eng.userID;
});
userIDs;
// => [15, 63, 97, 12, 44]
Finally, we'll update our engineer objects to indicate that all the new
engineers have been provided a new work laptop. This time, though, let's use
JavaScript's built-in Array.prototype.map()
method:
const equippedEngineers = newEngineers.map(function (eng) {
return Object.assign({}, eng, { equipment: "Laptop" });
});
equippedEngineers;
// => [
// { userID: 15, title: "Developer Apprentice", accessLevel: "admin", equipment: "Laptop" },
// { userID: 63, title: "Developer Apprentice", accessLevel: "admin", equipment: "Laptop" },
// { userID: 97, title: "Developer Apprentice", accessLevel: "admin", equipment: "Laptop" },
// { userID: 12, title: "Developer Apprentice", accessLevel: "admin", equipment: "Laptop" },
// { userID: 44, title: "Developer Apprentice", accessLevel: "admin", equipment: "Laptop" }
// ]
Note how similar this method call is to the one using our version of map()
:
the only difference is that we call the built-in .map()
method on our array,
rather than passing the array as an argument. There is one big difference
between the two, though: we didn't have to do all the work of building
Array.prototype.map()
!
Now that we understand how the built-in .map()
array method is implemented, we
can stick to the native method and get rid of our copycat map()
function.