Check out a free preview of the full Introduction to JavaScript course
The "Testing Solution with Arrays" Lesson is part of the full, Introduction to JavaScript course featured in this preview video. Here's what you'd learn in this lesson:
Brian live codes the array traversal section of the solution.
Transcript from the "Testing Solution with Arrays" Lesson
[00:00:00]
>> Brian Holt: Hopefully you had an opportunity to give this a shot. These kinda ranged in difficulty from pretty simple to really, really hard. And so yeah, I think it's good for you to go through these and kinda see different ways of coding and problems to solve. So let's go ahead and do some of these together.
[00:00:18]
The first one here should have been done for you, the addTwoToEveryNumberInTheList.
>> Brian Holt: Just so you can kinda see how these tests work. So let's go through and do findLargestNumber. So I showed you a bunch of different ways to do loops yesterday, and you could've chosen your favorite. You could've use forEach, you could've use a for loop.
[00:00:39]
You could've used a while loop if you'd wanted to. Any one of these would have been acceptable. So I have here doing it in a for loop, so let's just go ahead and do it that way.
>> Brian Holt: So we're gonna start by saying let largest = list[0]. I guess this is this is making the assumption that there's something in the list, but I guess it could be undefined as well, so.
[00:01:08]
And then what we'll do is we'll move over the rest of the list. And we'll try and keep the largest number that we see here in this largest. So here the next thing I'm gonna say, for(let i = 0, i is less than list.length; i++). So why did I choose a for loop here?
[00:01:30]
Well in general, when you're operating on arrays, it's just a good indication that you're probably gonna use a for loop. Because you wanna get this little dynamic right here, where i is less than list.length. That just works really well for looping over an entire array.
>> Brian Holt: Okay, and then all you're gonna ask here is if(list[i] is greater than largest), then you're gonna say largest = list[i].
[00:02:02]
>> Brian Holt: Okay, so you can go through the entire for loop here. And actually, since we already started with list[0] here, we can actually start this 1, right? Because we don't have to check 0 again. So it's not that inefficient, but you might as well, right?
>> Brian Holt: Okay, or the other thing you definitely could've done here is you could've just done this and said, let largest.
[00:02:26]
And then said let i = 0, either one of those is fine.
>> Brian Holt: Okay, and then down here all you have to do is return largest. Question?
>> Speaker 2: So can you scroll up a little bit?
>> Brian Holt: Mm-hm.
>> Speaker 2: So that wouldn't be an issue, since you're asking if the first item in the list, or if any item in the list is greater than largest the first time it goes through the for loop.
[00:02:48]
Because you haven't said what largest is, you can call greater than on something that like doesn't-
>> Brian Holt: This is-
>> Speaker 2: Like it exists.
>> Brian Holt: So I guess this could be a problem, because when you coerce undefined, it's gonna be coerced to 0. Right, so if you try to force undefined to be a number, it's gonna be 0, I believe.
[00:03:09]
And so what happens if this was a list of negative numbers? 0 is not in that list, so yeah, it's gonna call list. Now, the test case I gave you were all positive numbers, because I'm not really, as long as you get the gist here, I'm fine, right?
[00:03:24]
>> Speaker 2: When you say you force it to be a number, is that what's happening with the greater than sign if you're-
>> Brian Holt: Yeah, so this is gonna say, this only works with numbers. And so it's like okay, well you didn't give me a number, so I'm gonna try and force this to be a number.
[00:03:36]
>> Speaker 2: Okay, so before it was undefined, and now it's 0?
>> Brian Holt: Yeah,
>> Speaker 2: The first time, okay.
>> Brian Holt: So in reality, if you wanted to make this truly bulletproof, we would go back to where I was here and start this at 1. And then you'd have to have a check here at the front.
[00:03:52]
That if list.length === 0, return probably undefined, right? Because there's no largest number in a list of 0, or whatever you wanna return, something like that. So let's see if that actually passes my tests down here. And you can see down here I got more tests passing.
>> Speaker 3: If I made largest just 0, how does that affect it?
[00:04:25]
>> Brian Holt: So you'll run into the same problem that I had, which is, what happens if I give you a list of negative numbers? 0 is going to be the largest number there, which it's not technically in the list, right?
>> Speaker 3: Okay, got you.
>> Brian Holt: So it depends on how flexible this needs to be, right?
[00:04:41]
If you were working on, I don't know dates, right? What's the largest date in a list? There's no such thing as a zero date, right? So you can make the assumption that everything's going to be a positive integer. So it kinda depends on the problem domain that you're working on.
[00:04:55]
But if you want this to make this the most flexible it can possibly be on, it would have to be something like this. Make sense? Cool, good questions. Do you have a question?
>> Speaker 4: In the first one, we have to create a new list to store the new list.
[00:05:10]
Because we're coming up with new values, cuz we're adding 2 to each value. In the second one, we're just moving things around in the array, so we don't need a new list.
>> Brian Holt: So this one here, findLargestNumber?
>> Speaker 4: Yeah, is it because we're just moving them around?
>> Brian Holt: So you're not expecting to return a list here, right?
[00:05:32]
Because largest number, right, findLargestNumber, this belies the fact that we're gonna return a number, not a list.
>> Speaker 4: Okay.
>> Brian Holt: So here, what is largest gonna be? largest is just gonna be one number, right? It's not gonna be a list of numbers, we're not returning the list of largest numbers.
[00:05:47]
We're returning just the largest number, does that make sense?
>> Speaker 4: Thank you.
>> Brian Holt: Whereas up here, addTwoToEveryNumberInTheList, this belies the fact that we're going to be returning some sort of list, right?
>> Speaker 3: Okay.
>> Brian Holt: Makes sense? Okay, good question. So return dog object here. So we're gonna make an object that has a speak method, that has a name property.
[00:06:14]
[COUGH] That has a name property, a color property, and an age property.
>> Brian Holt: So let's go through and knock those out. So the first one is, we're gonna give it a speak method. And this is going to return "woof", right? Cuz that's what we asked for right there.
[00:06:35]
Has a name property of Fido, name: "Fido".
>> Brian Holt: color: "white" and age of 6. And I think that should be enough.
>> Brian Holt: You can see down there, I passed a bunch more tests. Just kinda to show you how to construct objects, you can return objects and pass them around.
[00:07:03]
Any questions about that?
>> Brian Holt: Great.
>> Brian Holt: Okay, getListOfNames. So this list is gonna be an array of objects that look like this. With name being some person, jobTitle being something, and age being some number, right? Here we're gonna be expecting some sort of array of names going back that are very likely not going to be Game of Thrones characters, unfortunately.
[00:07:36]
>> Brian Holt: So there's a bunch of ways to do this. I showed you my favorite way, which is gonna be map. I'll probably just show you both ways to do it. So const names =, I'll show you map first, list.map. This is gonna take in a person object, right?
[00:07:59]
And you can put an arrow function there or however you choose to do it. Let's just do it the other way, so you can be a little more clear, function (person). And then here we just have to return whatever we wanna keep in the list, right? So here I wanna return person.name.
[00:08:20]
>> Brian Holt: And then here I want to return names.
>> Brian Holt: That should be enough. Okay, so that that passes this way.
>> Brian Holt: Do you wanna see if I can make it even shorter? Let's make it even shorter. So this is probably how I would actually write it, list.map. Then there's a thing here called destructuring.
[00:08:53]
>> Brian Holt: So this actually does exactly the same thing, you don't have to know this right now. I'm just trying to show you that you can get even more clever with these. But just so if you are curious as to how this works,
>> Brian Holt: This is saying that I'm getting an object.
[00:09:09]
So this is replacing this person thing right here, right? And I know inside of that object there's something called name, and I want you to pull it out and call it name. So now I have a variable called name that's coming out of person, and it's just ignoring the rest of the object.
[00:09:22]
Does that make sense so far? Right, so it's just pulling out this part, and it's leaving everything else behind, okay? Then here, where this is doing exactly what this function does right here, it's just the shorthand for it. Remember I told you yesterday that if you don't put curly braces on something that it just has an implicit return?
[00:09:44]
So that's what this is doing, it's returning that name that we're pulling out here. So if I comment that out, this should still work the same way.
>> Brian Holt: Right, it does.
>> Brian Holt: So you don't have to know that today. I just wanted to show you that there is some pretty cool tricks with JavaScript that you can do.
[00:10:08]
Okay, now let's just go ahead and run through it with a for loop as well. So here I would have const names = [], right? And then I'm gonna have a for loop, let i = 0; i is less than, what did I call up here, list? Yeah, list.length.
[00:10:31]
>> Brian Holt: i++, and then here you're gonna say names.push(list[i].name). This will also work.
>> Brian Holt: So all three of these things accomplish the same task, just in relatively different ways. And you could actually do this with the forEach as well. So it would look relatively similar to this, where you'd just be pushing names into some other list.
[00:11:01]
Yeah, yes?
>> Speaker 2: Sorry, so what does the second line, where it's name.push, what are you putting onto the list? What are you adding?
>> Brian Holt: That's a good question. So let's break this into multiple lines so it's a little less dense. That's usually a good strategy for deciphering what things mean.
[00:11:18]
So const currentName = list[i], let's even break it further down. So const person = list[i], so this is gonna pull the person out of the list, right? The next one is gonna say const name = person.name. And then you're gonna say names.push(name).
>> Brian Holt: So these three lines are the same thing, this is just condensed all into one line.
[00:11:49]
So you're pulling the person out here, right? That's what this list[i] part does, is it grabs the person that you need, right? Then we're grabbing the name, that's the .name part here, and we're pulling that off. And then we're passing that into names here, into the push function.
[00:12:04]
Is that clear?
>> Speaker 2: Yeah, that's cool.
>> Brian Holt: So either one of those is gonna work, let's just,
>> Brian Holt: Stick with the more clear one, that's good.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops