Check out a free preview of the full The Hard Parts of Functional JavaScript course

The "Map" Lesson is part of the full, The Hard Parts of Functional JavaScript course featured in this preview video. Here's what you'd learn in this lesson:

Will describes map as one of the most important higher functions in JavaScript. Map in this case, is the name usually used for the copyArrayManipulate function that was used before.


Transcript from the "Map" Lesson

>> Will Sentance: Final thing to adjust to kind of give you a little bit of the reality version of this is folk don't tend to call this function CopyArrayandManipulates. They call it a name that I think you get used to. But it's a bit on intuitive. It's a three letter word.

And it's map. They call the function that I call CopyArrayandManipulates Map, is one of the most important higher order functions out there. There it is. So we don't call it CopyArrayandManipulates we call it, Map. No CopyArrayandManipulates we call it, Map. And therefore, you thought to talk about mapping data from one state, which was 1 2 3, mapping it via some transformation into a brand new collection of that data where each element has been transformed in some way and that is known as the notion of mapping.

Mapping is sort of mathematical notion of mapping and changing data into a new construct where it's being transformed in some way. You could record it maybe transform element by element, you could record it. I don't know math is what they call it. I don't get why but whatever.

All right, let's talk in a slightly different way. This is our big exactly as JavaScript runs it way of diagramming. This diagram in a way, by the way, I lost my voice two days ago. But, let's diagram it in a way. This really gets to just the high level view of what it's doing.

What is actually doing, what is our map? CopyArrayandManipulates really doing, well takes in 123. Okay, first thing it does. What does the first thing that map does, Charles? The first thing that map had CopyArrayandManipulates, how do we have an array to copy and do all sorts of first thing we did, Charles

>> Charles: Context.
>> Will Sentance: True. Okay, inside a teaching context, what was the first thing we did, Sam.
>> Charles: The parameter.
>> Will Sentance: Agree.
>> Charles: Right, you're right.
>> Will Sentance: Exactly. That's the cool thing that Matt does is it makes it a new array. Then it takes the first element multiplies it by two.

Well, this case multiplies it by two as we're doing this. Give us 2 push it to the array. Okay? Push it to the array and it takes it the 2 multiplies it by 2 to get what, Jasmine?
>> Jasmine: 4.
>> Will Sentance: 4, place to the right there it is.

And then again, 6 it is. We were applying the functionality multiply by 2, two each element, and then pushing the element of the array, okay. I mean nothing profound. I wanna show you here though just a simplified version of diagramming. Exactly what we just did was get a high level sense.

The reason is because we're gonna wanna see on a high level exactly what does this look like? Because I am gonna tell you, we made quite a few assumptions there and I hinted one of them already. We assumed that we're gonna be taking the first element and combining it with an array.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now