1.3 JS in REPL - Video Tutorials & Practice Problems

<v Instructor>Now that we've got a Hello, world! Program</v> working in the browser, let's take a look at JavaScript in the REPL. This is a Read-Eval-Print Loop, so it reads input, it evaluates it, it prints out the output, and then it loops back. Most modern programming languages have some sort of REPL and in fact, JavaScript has two. We'll look first at one inside the browser itself and then we'll look at one in the command line. So let's start with the browser. This requires using the browser tools. Some browsers have browser tools enabled by default, like Chrome, for example, with Safari, which is what I'm using in this tutorial. You'll have to enable them by hand. That's the sort of thing you can just google around for. This is classic technical sophistication. Let's go to Google and say Safari enable developer tools. But once you do enable them, you can go like this, Control + click or Command + click depending on your OS. And go down to Inspect Element. So this opens the Web Inspector. And we can actually click over here to the console. And you can see that we actually have access to a little command line for interacting with JavaScript. So I just made it bigger so it's easier to see. Let's take a look here. This here is the structure of the page. But we don't need that right now. All we need here is this command line. So let's take a look at how to output the string Hello, world! You may recall with command line, you can just do echo Hello, world! So this is the equivalent of that. We're just gonna have JavaScript print out Hello, World! inside this console. So the way to do it is using what's known as a JavaScript object. This is actually much more complicated than in most other languages. And that's because JavaScript was designed to be something that lives inside a browser. So the way you print something out is you tell the console, like that that you want to output to the log. So the way you call this log function is with a dot. .log. So console.log and then you give it an argument. We saw this before with the alert. Hello, world! And then you can put the semicolon on or not. It doesn't really matter but again, for consistency, I'll generally add it. And there it is, look at this, Hello, world! It output it. You might note here that it says undefined. This is because console.log, like most things that print things out in programming languages operates what's called a side effect. It doesn't actually have a return value, like the number one. So here the number one is the return value. Console.log doesn't return anything. It returns an undefined value. And it prints out Hello, world! in this case as a side effect of being executed. That's not all that important a distinction right now but I just wanted to explain why it says undefined. And in fact, we'll see this again in just a moment when we look at the command line. By the way, you can use the up arrow, like this to get previous things, just like at the command line. I'll just show you that you can execute this without the semicolon. It works just the same. All right, well, let's take a look now at the command line. Here we are. We're gonna be using a fast and very commonly used execution environment for JavaScript called Node.js or Node.js. It often is just called Node for short. So in order to use Node, you'll have to have it on your system. You may recall from previous tutorials that you can type the which command to see if a command is on our system. And so you can see on my system, it's in /usr/local/bin/node. If it's not on your system, you'll have to install it and there's some instructions in the text for how to do that. If you're using Homebrew on macOS, you can type brew install node. Otherwise, the Node.js website has instructions on how to install Node on your system. So the way it's used Node to get a REPL for JavaScript is just to type node, like that. You can see here we've got the same sort of prompt, a little angle bracket in this case. This is the kind of thing that varies from language to language. So we've got our little REPL here and we can output Hello, world! Oops, okay, so this is great. You can see that I actually made a mistake. I like to leave these in the videos because I think it's instructive to see that well, among other things, that I make mistakes, even though I've been doing this for a while. So what happened here is I forgot the closing double quote, and so the REPL gave me some feedback. It said SyntaxError: Invalid or unexpected token. So essentially what's going on here is it got to the end of this and said, after this, wait a minute, where's the closing double quote? So I can do up arrow, and just fix it up like this. There we go, Hello, world! And as promised, it says undefined there. Now, this is also the kind of thing that's system dependent. It could be on some systems, some browsers might not show undefined. So this is also part of technical sophistication is being able to ignore things if they're not important, and knowing what is and isn't important is part of that sophistication. So this is a really big step towards doing modern JavaScript development because we're no longer tied just to the browser, we can actually use the command line. And we'll see in the next section how to make a file that can be executed as JavaScript code. To do that, we'll have to exit the REPL, which can be done by typing Control + D. All right, now we're ready to go.