Getting Started with JavaScript, v2

Programming Primer Exercise

Kyle Simpson

Kyle Simpson

You Don't Know JS
Getting Started with JavaScript, v2

Check out a free preview of the full Getting Started with JavaScript, v2 course

The "Programming Primer Exercise" Lesson is part of the full, Getting Started with JavaScript, v2 course featured in this preview video. Here's what you'd learn in this lesson:

Kyle instructs students to use the basic programming principles learned in previous lessons to work through an exercise on adding strings to an array, then looping through the array.


Transcript from the "Programming Primer Exercise" Lesson

>> Kyle Simpson: Okay, well, that's a whole slew of different programming principles. And it might have just flown right over your head, but that's okay cuz we're gonna take some time to practice it. In this exercise, you're gonna get a chance to practice each of these different things. The values, the types, the loops, conditionals, the variables, all of those things.

We're gonna put it all together in one working piece of code. It's really important that you check out this README file and read through these instructions very carefully. I've tried to lay out exactly which steps you need to take to work through it, but I want to orient you to this exercise file so you understand.

We have a variable here holding an empty array, favoriteBooks is holding an empty array. And what you're gonna be doing, is you're gonna be finding first an addFavoriteBook function. You notice I'm already calling it here, and I've got listed several books that are gonna be passed in. You're gonna be defining that function such that each time it's called, it's gonna add what you've passed in into this array.

However, there's a little twist, which is that it's only gonna add it into the array if the book title that's passed in doesn't have the word great in it. And you'll notice, there are two of these book titles that have the word great in them. So those won't end up getting added, but the others will, the other three will.

That's what addFavoriteBook is gonna do. And then, printFavoriteBooks is gonna do a loop. Remember we talked about loops. You're gonna do a loop. And you're gonna print out all of the books that are in this array. You're gonna loop over all the values in this array and print those out.

And you're also gonna print out a message that says how many books are in there, which as we just said is going to be three, okay? So just make sure you follow along in these instructions, go in order, and make sure you check out the hints that I've labeled in each one of these items because they will give you critical information that you need.

Refer back to the slides, all that information should be either in here or in those slides. And if you do get stuck, it's entirely okay, cuz I know for some of you, this may be some very early experience with programming. If you do get stuck, and you need to kind of orient yourself a little bit, I have provided a solution file that you can take a look at and try to get back on track.

So we'll take plenty of time on this. Take as much time as you need. Work through these types of things, and try to run the code. And by the way, use an environment that allows you to run code like, for example, the developer tools console in your browser.

One tool that I really like to run my code is called RunJS, and this is what it looks like. It allows you to type in some code like var x equals 42, and then console dot log x. And then, it allows you to click the Run button, and then you see the output right there.

So I really like this tool for running code, and that might be useful to you. But definitely, do run the code as you're writing it so that you really get that hands-on experience with your code. Before you jump into this exercise and try to work on the code, I just wanna make sure I re-emphasize that there really is no substitute for actually running your code and seeing the results.

So as you're typing these things out, it's really important that you are also running them to try to see what results you're getting, what errors you might be getting to kind of correct things. That's how all JavaScript developers do it. So I wanna show you real quickly a couple of different ways that you might do that.

You could take some code and put it into the developer console of, say, the Chrome browser. So if you don't already have the Chrome browser downloaded, you can get that. If you got something like Firefox, it's gonna work very similar. I'm gonna go up here, and open up the developer tools for my Chrome browser.

And I've got it on the console tag. If it's on the elements tag, just click over to console. But this is an environment now that you can actually write code. So I can say teacherName equals Kyle. And I can see the results of what I'm typing. And then, I could say, console dot log teacher name.

And I can actually run that code and see the results of what I'm typing. So try your code in an environment like that. And if you don't wanna use Chrome console, or it's not working for you in developer tools, there's another tool that I really like to use and it's called RunJS.

And it looks like this. It's an environment where you can type in, and then there's a button where you can click to run. So again, I could type in var teacher name equals Kyle. And then, if I don't make typos, and then, say console dot log teacher name.

And then, when I click the Run button, we see the results right there. So either one of those two environments, or if you have a different one, maybe you like to run your NodeJS on a command line. But make sure you're running this code as you're trying the exercise.

It's not good enough to just talk about code, or write some code in theory in your head. What you really wanna do is make sure that you're running that code and checking yourself, and then correcting, and moving forward. So try that on this exercise. We'll be back in a little bit to talk you through, line by line, through the solution.

And remember, if you get stuck and you need a little bit of help, you can always take a look, take a peek at the solution file.

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