Programming Primer Solution

[00:00:00]
>> Kyle Simpson: I'm glad you came back, and I didn't scare you away. So let's talk through the solution for this exercise. You may have gotten stuck on a few points, or there might have been some things that were confusing. So, we'll take our time and make sure that we talk through each of these little bits.

[00:00:14]
I'm gonna walk you through these instructions, and then we'll switch over and we'll do the code, run the code, and see those end results. So, you'll notice on instruction number one it says, define an addFavoriteBook function. Well if you recall from our slides and you probably saw it several times, the way we make a function is to use the function keywords.

[00:00:33]
So, over here in my exercise file, up here at the top where that code comment is, I'm gonna take that one out and I'm gonna actually define a function. We use the function keyword, and I'm gonna say addFavoriteBook, and then we need to receive some input, it needs to receive an input, a single parameter called bookName.

[00:00:53]
So I'm gonna name it bookName right inside those parentheses, that's the parameter. Now, just for the purposes of us testing, let's just print out whatever has been passed in. So I'm just gonna say console.log bookName, and then if we copy this code over into one of our run environments, I'm gonna use RunJS.

[00:01:14]
If I run that code, you'll notice that it will print out all five of them because each time addFavoriteBook was called, it's receiving bookName it's passed in and then we're printing it out. Okay, now the second item in the instruction says if the provided book name string does not have the word Great in it with capital G, then that's when you add it to the favorite books array.

[00:01:42]
And there's several key hints here that you wanna look at. Number one, the hint says, if we wanna figure out whether one sub string is in a different string, then we say someString.includes in the anotherString. And that'll tell us if another string is inside of some string somewhere, okay.

[00:01:59]
So, that's the first thing that we wanna do, we wanna make a decision and remember we talked about decisions, we can use the if statement. So we're gonna say if, and the thing that we're looking for is to see if bookName, includes, and then the thing we wanna check for is whether or not it includes the word Great, and that's when we're gonna do something.

[00:02:22]
But actually this is backwards because the instructions say, only if it doesn't include. So we want to basically end up filtering out the ones that have Great, we don't wanna do it if it doesn't include. You might remember from our discussion of operations, that the exclamation mark is how we negate or we complement a boolean value.

[00:02:42]
So if this one would have returned true, we want it to be false, and if it would have returned false, we wanted to return true. So we're gonna flip it by putting the exclamation mark there. So now I'm just gonna do that console log statement again, we'll just make sure this time, that we're only printing out the three book names that don't have the word Great in it.

[00:03:02]
So we'll switch back over to our run environment, we'll run this, and we should see only the three book names then we've filtered out, we have not printed out Great Gatsby or Great Expectations. Okay, so that allows us to see we validated that our if statement decision logic, is working correctly.

[00:03:22]
>> Kyle Simpson: We can do the same thing in a Chrome console as we're doing in RunJS. All right now, the item says that we should be adding it to the favoriteBooks array, not just printing it out, but adding it to the favoriteBooks array. And here, this third hint tells us how to put something into array, we give the array name and then we say .push, and we give it the value that we want to push in.

[00:03:44]
So let's do that, instead of console.log, let's actually just say favoriteBooks.push, and what we want to push in, is the book name that's been passed to us, so bookName. Now, after all five of those have been called, then the favorite books array should have only the three in it that don't have the great keyword.

[00:04:09]
So we could quickly check whether that was true by just printing out the contents of favorite books. After we've made these five calls, favorite books should have all three of them contained in it. Let's try that, I'll copy that code come back over here to RunJS, and when I run this code we should see it print an array with those three strings in it.

[00:04:33]
And sure enough now we see an array, with those three strings having been included.
>> Kyle Simpson: Okay, back to the instructions. Next item in our instruction said we wanna make a printFavoriteBooks function. We already know how to do functions, that's just the function keyword. This one's not gonna receive any parameters, so let's try our hand at that.

[00:04:55]
In this TODO statement, in place of the TODO statement we're gonna write a function called printFavoriteBooks. And it doesn't receive any parameters, so we just do that open close parentheses. Now I don't wanna forget to take this console.log out, so I'll remember to take that one out. We have our printFavoriteBooks function, and this is going to be called after we've done the addFavoriteBooks.

[00:05:20]
So let's do that down here, let's actually call printFavoriteBooks. And you remember that the way that we execute a function, is we put a parentheses right after the variable name, that’s how we execute a function. Now the instructions tell us what printFavoriteBooks needs to do. It first needs to print out a message, that says Favorite Books: and then it’s gonna have a number for how many are in that favorite books array.

[00:05:51]
All right, so let's do a console.log statement, and we're going to be printing something out. And I'm gonna use, because the hints tell us to use the back-tick kind of string, that will allow us to include a value inside of another string. So let's use back-tick, and then inside of this string, we're gonna say, Favorite Books, with a colon.

[00:06:17]
And then the way that we add a value inside of a string, the way we drop that value in, is we do the ${} delimiting. And then inside of it is the expression, where we want to print out which, what is the number of the books? And the way we know the number of the books, is gonna be the length of this array.

[00:06:37]
So we wanna say, FavoriteBooks.length, that's gonna be the message that we wanna print out. Let's just test this code as is, and make sure it should print out, FavoriteBooks: 3, whenever we execute it. So I'll come over here, and execute our code, and sure enough we get the message, FavoriteBooks:3.

[00:06:59]
Okay, now, back to the instructions. It says, Finally, printFavoriteBooks() should loop through the FavoriteBooks array, there's our keyword, we're gonna be using a loop. It's gonna loop through that favoriteBooks array, and print out each value. And we wanna make sure we've already done this part, we are calling the printFavoriteBooks function, and it gives us a hint here which is critical.

[00:07:23]
It says, use the for of form, remember in the slides, a few slides back. There were two ways of doing a for loop, one was where we were counting with an i variable. And one was where we were just getting all the values in an array. It's gonna be easier for our purposes to use this second form of that, which was this for of loop.

[00:07:42]
So let's do that, let's go back to our printFavoriteBooks() function, and we'll type in for, and we need to declare a variable. So we'll say, let, and we’re using let here just so we add the variable only in the for loop instead of the function. Either way, you could’ve used a var if you prefer, but I’m gonna use a let.

[00:08:02]
We’re gonna say for let, and then we wanna say bookName of, and then the thing that we’re gonna get all the values out of is, favoriteBooks. That's our array, so we're gonna say for, let bookName of favoriteBooks. And then we're gonna do console.log, bookName.
>> Kyle Simpson: Now, if we test this, we're expecting it to first print out favoriteBooks: 3.

[00:08:33]
And then one line at a time, we're expecting it to print out only the three books that are in our favoriteBooks array. If we've done our jobs correctly, this application should work now. So I'll switch over, one last time, to RunJS. And we will run this code, and there we go, it says Favorite Books: 3.

[00:08:52]
Let me move it over so it's a little easier to see. Favorite Books: 3, A Song of Ice and Fire, Crime & Punishment, and You Don't Know JS. Those are clearly the three best books, that have ever been written. All right, so hopefully you're feeling a lot more comfortable with some of these basic programming principles.

[00:09:11]
If things were a little bit confusing for you, that's okay. Try this again, try the exercise from scratch, just start over from the empty file and try going through the instructions. Maybe try, if you were able to get the exercise working up to the point of the solution, maybe try adding something, maybe try add some more books, or add some more calls to add favorite books.

[00:09:33]
Or maybe try filtering out a different value from the book name, or something like that, play around with this code a little bit. Don't be afraid to actually write some JavaScript, because there really is no better way of learning how to code JavaScript.