JavaScript: From First Steps to Professional

map & filter Exercise

Anjana Vakil

Anjana Vakil

Software Engineer & Educator
JavaScript: From First Steps to Professional

Check out a free preview of the full JavaScript: From First Steps to Professional course

The "map & filter Exercise" Lesson is part of the full, JavaScript: From First Steps to Professional course featured in this preview video. Here's what you'd learn in this lesson:

Anjana live codes an exercise to practice mapping and filtering through an array. This example creates new arrays, including a new "name" array and an array for just nicknames that end in y.

Preview
Close

Transcript from the "map & filter Exercise" Lesson

[00:00:00]
>> And so what we can do, just to test our knowledge, is we can use map and filter to make a couple of new arrays out of our Spice Girls. So let's try this together. How could we create a new array called names that only has the name of each Spice Girl?

[00:00:21]
So here, each object has two properties, the name and the nickname. What I want now is an array called names, That's going to be just Emma, Jerry, etc., yeah? How could I do that with my map function, for example? Anybody wanna walk me through it? Paul?
>> Sure, so it'd be spices.map.

[00:00:55]
>> Okay, so we're gonna map over every element in the Spice Girls array, every object in the spice girls array.
>> Then the s, and then the fat arrow.
>> Yeah, and the s is just an arbitrary name, so I could say spice, for example. Yep, fat arrow.

[00:01:10]
>> Then it'd be just spice.name.
>> If I spell it right, [LAUGH] it would be. Okay, let's try it out. Names now is, exactly, it is just the value of the spice.name property on the original objects. And is our spices array gonna be different than it was before?

[00:01:30]
No, let's double check. Spices still has objects in it, so map does not mutate the array and neither does filter. Okay, let's do one more. Let's try to make a new array that's called endInY with just the girls whose nicknames end in y. Okay, so similarly to earlier, we wanted just the males.

[00:01:55]
Now we want just the girls whose nicknames end in y, so we want just Baby, Scary, and Sporty. But we want the objects for those girls, but we want only those three of them. So who'd like to walk me through this one? So if we want only certain items from this array, do we need map or filter here?

[00:02:23]
Filter, exactly. Great, do you wanna help me take a stab at it?
>> Yeah, let, okay,
>> Sure yes, we can do let.
>> No, no, no, it's fine.
>> [LAUGH] Okay.
>> = spices.filter.
>> Yep.
>> Parentheses s
>> Arrow?
>> Arrow s.name.ends with?
>> So it would be nice if we had an ends with, like we do have starts with in things, but unfortunately, for whatever reason we don't have the opposite.

[00:03:04]
But how could we get the the last character in their name?
>> .pop?
>> We could use pop, if we were working with arrays, but strings are immutable, right, so we can't pop things off of them. So since we're working with strings here-
>> Contains, is there a contains method?

[00:03:27]
>> We could do, so there's includes, right? We had used that for our Mel, we have includes, but in that case if we did includes y, in this case, it probably might be the same but we could have a-
>> We're looking for-
>> Yes, Queen Spice, and if the y was at the beginning of the name, [LAUGH] that wouldn't work, yeah, suggestion?

[00:03:49]
>> In chat they're saying endsWith.
>> Yeah, so endsWith, I mean, do we have a method, endsWith hat I don't know about? Let's look, let's see if there's an endsWith. We do, my gosh, okay, great. All right, excuse me. Earlier I said that we didn't have that, and I was totally wrong because I didn't go to MDN and check.

[00:04:07]
Which is just a pedagogical device I use to illustrate how you should always go to MDN and check. Totally, totally, totally, okay, all right, we do have endsWith. Sorry, please continue with your endsWith solution.
>> It ends with y. [LAUGH]
>> Ends with y, all right. [SOUND] All righty, so now let's check endInY.

[00:04:31]
Well, something went wrong here, let's find out what. Because I said, [LAUGH] what did I look at was ending in y here?
>> Nickname, you want nickname and-
>> I was looking at names and we wanted nicknames, and that's probably on me cuz I probably typed the wrong thing, so let's try it again.

[00:04:50]
Good thing I made this a let accidentally, cuz now we can reassign it. Let me try again. This one's a challenge for me for some reason, all right. s.nickname this time, that's what I think what you had said earlier, endsWith("y"). Now, [LAUGH] endInY actually has those three Spice Girls, question?

[00:05:18]
>> So how were you gonna do it if you didn't have the endsWith?
>> Great question, a complicated way that is less fun. So another way that we could get the last thing, so if I have a I don't know, stringy here, with indices, we can get the first character out, right, or we could get, I don't know, the third character.

[00:05:44]
We can also ask for the length of a string, Which is going to return, basically, one more than the index of the final character. So what I can do is combine this knowledge, and in my square brackets, I can actually pass in something that evaluates to a number instead of a number itself.

[00:06:16]
So I could do string, well, in this case, it's a little annoying cuz I have to type the thing again, "stringy".length-1, and that would get the value out. So what I could do is complicatedY [LAUGH] is spices.filter, oops, well I guess I could name it x but that'd be less helpful.

[00:06:41]
s, what was it, nickname. S.nickname.length-1="y", which is terrible and not fun, but does get the job done. I'm glad y'all had a way better solution for this than tired old me who didn't finish her coffee this morning. So thanks for teaching me JavaScript, appreciate it.

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