JavaScript: From Fundamentals to Functional JS Functions Exercise Solution

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Bianca Gandolfo: It's supposed to be a little bit of a difficult challenge. It's really combining all the different things that we've gone over today, functions, arrays, objects, loops, and just really tying everything together. So let's see, let me find my solutions, here we go.
>> Speaker 2: Is there a solution file somewhere?

[00:00:27]
>> Bianca Gandolfo: There is a solution slide. I'll tell you how to get to the solutions later. I don't want give it away ahead of time because then you'll cheat and that would be too easy. The first thing is for questions one and two combined, we have this animal test user.

[00:00:47] For the first one though, let me just type out the first version. For the first one, we can save our AnimalTest = a function. And this function takes a username as a parameter. And then it just returns an object. So, see that, see how I expanded that object?

[00:01:13] So there's an object there, and then I just expand it out, and in there, I'm going to write some properties and the property was, I believe it was just username and then username. So, this is a little bit confusing. So, we have username on one side of the colon and then we have username on the other side of the colon.

[00:01:33] And username's a parameter, which one actually is the one that's going to be turned into the username. So, if I called this and I said var myCow = AnimalTest and then I passed, what's a good cow name, like Bessy or something. Bessy. I don't know how to spell Bessy, but that's as good as it's gonna get.

[00:02:05] So is the property name Bessy, or is that value gonna be Bessy? Absolutely. So the value in this case is gonna be Bessy. Here's the parameter. When we have a property name on the left side of the colon like that, that's gonna be assumed as a string in object literal notation.

[00:02:27] And it won't ever be evaluated as an expression. So before I was talking about how we could use bracket notation to put an expression for the property name, we can't do that with object literal notation. So, keep that in mind that this will always be assumed as a string.

[00:02:42] If it makes you feel better, you can just put it in quotes to remind yourself that this one on the left is a string and the value on the right is the one that's going to be my parameter. Which, once I pass the string Bessy, then that parameter has the value Bessy.

[00:03:03] And if we just wanted to console.log(myCow.username), that is going to print out Bessy, right? Thumbs on that? Thumbs on that? How many people have finished that one? Awesome, good job guys. So that's step one. Then the second part of the question was, if the arguments are, let's see.

[00:03:38] If the length of the arguments is greater then one, put the other arguments as a property, or as an array. Sorry, let me reword that. As a property with the value of an array of those arguments. Are you guys following? I kind of lost myself in that explanation.

[00:04:01] So, other args is going to be an array of the arguments passed in, if there's more than one argument. And so there's a few ways you could have done that. So one way you could do it, so here we have args, which is going to be the length of the, I think a better one would be like, argLength, just to be like a little more clear on what args is.

[00:04:24] So we say argLength. So that's going to be the length of the arg, it's going to be a number, and then we have a-
>> Speaker 2: Arglength, in the if statement? No?
>> Bianca Gandolfo: Thank you. Someone's paying attention. Awesome. So if the length is greater than one, then we're going to enter into this if block.

[00:04:49] And the simplest way, I'm using the concepts that we actually covered in the class, is just to loop through that arguments array and push them except for the first one, so that's why our i there, our var i is gonna start at one instead of zero. And so you loop through, and you push each argument into an array, and that would create an array.

[00:05:11] The other one is what I mentioned briefly earlier, the array.prototype.slice.call will also turn it into an array. But we can stick to this one because it's more straightforward. The other one goes into prototype land which is not somewhere I really wanna go right now. Any questions about this method?

[00:05:35]
>> Speaker 3: I didn't see that slice.call in the documentation so call is a function of slice, which is a method.
>> Bianca Gandolfo: Call is a method on all functions. And if we have time tomorrow I have some slides that go over call and apply if we have time. Fingers crossed.

[00:05:54]
>> Speaker 3: Call and apply.
>> Bianca Gandolfo: Yeah, so call and apply are two function methods that are commonly used and they're really useful for functional programming when you're doing some generic things with functions. But we'll see if we get there tomorrow. Hopefully we will.
>> Speaker 3: So they're part of any built in method of any other object.

[00:06:10]
>> Bianca Gandolfo: Yeah, yeah, exactly. So like how push is a native array method, call and apply are native function methods.
>> Speaker 3: Okay.
>> Bianca Gandolfo: And that goes back to how functions are also objects, they also have methods, etc. Cool. Did you have a question?
>> Speaker 3: [LAUGH]
>> Bianca Gandolfo: No? Cool.
>> Bianca Gandolfo: Sweet.

[00:06:44] So let's put on word wrap here so we can see everything. So here's a more complicated version of our first animal user. So it takes a username, it takes a species, it takes a tag line, it takes noises. So starting to sound familiar? From our other exercises. So what we're doing here is we're creating a constructor function for our animal model.

[00:07:12]
>> Bianca Gandolfo: And so here we have an object and we're just storing it in a variable which you could do. And again you can just put quotes around this. So you know which one's which. There you go and we're just initializing these values. And here at the very end, we're returning that object, and another way that you can do this is simply by returning the object literal, instead of the variable name.

[00:07:47] But they do the exact same thing. There's no difference there.
>> Bianca Gandolfo: Any questions on this one? No? Cool. So here's just an example of how you would use it. So we're passing in a series of arguments, and then you can console.log(sheep) and you'll see that sheep is going to be,

[00:08:15]
>> Bianca Gandolfo: Hopefully, oops, is going to be an object. So here's sheep. Our sheep, and we see how its name is cloud. It's a sheep. Tag line is you can count on me and it has a noises array of the noises, and it has an empty friends array. I lost where I was.

[00:08:43] Questions on that? Cool. So, I'm gonna try to go through this quick so that we can keep going. So here's our function add friend, it takes an animal and it takes a friend which you want to add to the friend. So if you wanted to simply push the whole object, it would be animal.friends.push and you would push that friend and so that would be the entire object.

[00:09:18] So at this point, if we looked at it, we could do this. Oops. I keep trying to open the console up in Sublime. It's not liking that. Do we have sheep here still? No. Okay.
>> Bianca Gandolfo: So let's do this.
>> Bianca Gandolfo: [SOUND] Okay.
>> Bianca Gandolfo: Okay. So we have sheep, and now I think we'll just add.

[00:10:07]
>> Bianca Gandolfo: Cloud's gonna be his own friend. So we're gonna give sheep a sheep.
>> Bianca Gandolfo: And so now we can see that sheep has itself as a friend. And you can see there.
>> Bianca Gandolfo: And then, if you wanted to save space, you didn't want to pass around whole objects or you didn't want to save whole objects, you can just keep the username there or their user ID or something like that.

[00:10:50] And do it that way. And, in that case it would just save the name.
>> Bianca Gandolfo: So, here are some other ones, cows, sheep and llamas. So here's one way that we can create our farm, by just using our array little notation, putting those variables in there that represent our animal objects like that.

[00:11:19]
>> Speaker 2: So those were already created in the animal creator?
>> Bianca Gandolfo: Yeah, up here. You can kind of see. Here's llama, here's cow and here's how you can add matches. So.
>> Bianca Gandolfo: Okay. Let's see. So we're looping through farm. We could actually use, which might be better. Is we could just use it regular for loop with semicolons rather than this for in-loop.

[00:11:55] Because, again, if we had some properties on our array it might do some silly things that we aren't expecting. But you can also do that as well. So we have farm and then inside farm we have animal. For each animal on the farm, .matches. So the matches, it's creating a matches property there and initializing it to an empty array.

[00:12:20] So this function just gives each animal in our farm the ability to have a match. Whereas before, they can only have friends. Maybe you only get matches if you're a premium user, so you can only have friends, and if you wanted to do the dating-matching part or something, then you can upgrade them and give them matches.

[00:12:46] Just don't tell them they could just put this function in their console and they wouldn't have to pay anything. That business model will be perfect. So and then here's a function that gives matches. And it looks like it is just gonna loop through all those animals in the farm.

[00:13:04] And it's going to push the first friend of each animal as a match. You could get fancy with this and make it a random match. Or perhaps in future iterations of your data structure, you'll have some ratings based on a test that they take. And then they'll find in the farm other animals that have a similar, a close rating to them and then match that way.

[00:13:33] Mm-hm.
>> Speaker 2: So on this one, animal, is it like cow, sheep, llama, is that what it's, it's not like going to the username and matching usernames.
>> Bianca Gandolfo: Right. It's-
>> Speaker 2: It's saying sheep to sheep and cow to cow.
>> Bianca Gandolfo: Yeah, exactly, so it's looping through. And again, this would be better as a for loop with semi-colons.

[00:13:55] It will work this way, but in general, you only wanna use those for loops with semi-colons when you're looping through an array.
>> Speaker 3: I used for each.
>> Bianca Gandolfo: Yeah, or you can use for each. We'll talk about that more tomorrow. Cool, and this is how you would use giveMatches.

[00:14:10] You just pass the whole farm to it. And then you can check it by just inspecting your farm and seeing if there's other animals in your matches. I think I said that all without breathing. Any questions? No?
>> Speaker 4: I have a question.
>> Bianca Gandolfo: Sure.
>> Speaker 4: [COUGH] Line 75 and line 76.

[00:14:39] So, farm on line 75 is an array.
>> Bianca Gandolfo: Same thing with this.
>> Speaker 4: And then that variable animal, is some indexer into the array. What is it actually doing on line 76 where it says farm-
>> Bianca Gandolfo: So animal is actually gonna be, is gonna be the i. So you could, maybe it would look better if it was an i.

[00:15:09] But in general you're gonna wanna use the for loop with semicolons here, where you say for var i equal less than array.length, that one would be better. This will work, but since farm is an array, in a lot MVCs, at least Backbone, which is the one I use mostly, is that your collection is actually going to be an object.

[00:15:30] It's not usually an array, it's usually an object that contains an array. That's probably where the solution is basing that on. Cool. All right, so if you don't have any questions on that, we'll just move on to nesting. And that's going to be our last topic for today.

[00:15:55]
>> Speaker 2: Can you just speak to the assignment or the exercise file where you have under each exercise number you have a code area and then you have some items commented out is that a hint for what you're trying to do?
>> Bianca Gandolfo: Let's see. This here?
>> Speaker 2: Yeah, so.

[00:16:16]
>> Bianca Gandolfo: Yeah, so that's saying that this console log will print out this.
>> Speaker 2: What about on three below that.
>> Bianca Gandolfo: Yeah, so we're console logging sheep. So, sheep should be an object that looks like this.
>> Speaker 2: So that's what the log [CROSSTALK] for that.
>> Bianca Gandolfo: Yeah. So, it's just going to give you some guidance into what you should be expecting your solution to look like.

[00:16:37]
>> Speaker 2: All right, thanks.
>> Speaker 4: Can you go down to the number eight?
>> Bianca Gandolfo: Mm-hm.
>> Speaker 4: Then so, that matches Zeny? So that Zeny is a sheep, and that's why Zeny's in the matches?
>> Bianca Gandolfo: It really depends on how you implement your matches, your give matches function. We don't do species discrimination on eFarmony, so it's usually just the first one.

[00:17:07] The solution does the first one, so actually in the solution, it would be moo, because that would be the frist index. In this one, maybe it's always the last one. Just depends on how you implement it. There's no robust-
>> Speaker 4: So we're like matching one thing to another.

[00:17:23] We're just saying the first or the last or whatever.
>> Bianca Gandolfo: Yeah, so someone from your friends list will be one of your match.
>> Speaker 4: Got it, okay, right on.
>> Bianca Gandolfo: Yeah and if you want to build that out into something more interesting, you're welcome to do that.
>> Speaker 4: Got it.

[00:17:37]
>> Bianca Gandolfo: Yeah.
>> Speaker 4: Like matching sheep to sheep or?
>> Bianca Gandolfo: Yeah.