This course has been updated! We now recommend you take the Getting Started with JavaScript, v2 course.
Transcript from the "Practice Coding" Lesson
[00:00:00]
>> Kyle Simpson: The next observation that we wanna make, which follows along with this understanding of execution and the fact that a program needs to get run, is that there is no substitution for running these programs yourself. So while you will see me for the visual purposes, I'll do a lot of code writing in my code editor.
[00:00:18] And in a code editor it's not actually running anything for me. An IDE might but there's no running environment here so it isn't checking my program. You're going to want to run these sorts of programs in an actual JavaScript environment. And it turns out that one of the easiest lowest hanging fruit ways of doing that is if you're in a browser you can open up the console.
[00:00:39] So I'm using the Chrome browser. There's a question. Question in the chatroom is JavaScript provides you an error on runtime, right? Javascript does both. It has both, what we call static errors, that is, something where the compiler said hey that's invalid syntax, you did something wrong. And it also has runtime errors, where the syntax was correct but that you tried to do something invalid with that, like you tried to assign to something that was read-only.
[00:01:09] Or you tried to run something as a function and it wasn't a function. Those are run time errors so JavaScript has both. What's an interpreted language in a nut shell? Yeah essentially, it's gonna take it line by line. When it's on line three it doesn't know what to expect of line four.
[00:01:25] A compiled language looks at and understands all four lines first before trying to run the first line. So that it implies that there's multiple passes happening. Okay, so if I'm in the Chrome browser as you see here. Most people know about keyboard shortcuts, if you get into development, so command option on a Mac and a Chrome will pop up, your developer tools and I have mine set that it defaults to popping up the console.
[00:01:54] If you are looking for a way to do it manually you can come over here and in your chrome developer tools there is a more tools and then you can go directly to your console and it is going to do the same thing. Yours might pop up on the right hand side it might pop up in a separate window I like to keep mine anchored into the bottom of my browser window.
[00:02:13] But it doesn't really matter how it looks up, how it shows up to you. Open up your JavaScript console and you'll notice that it's kind of like we can just type some code in, it's kind of inviting us like type some code. So we can literally just type some code.
[00:02:26] I could say something like a=2. And if I hit enter, it's actually gonna run that statement as if that statement was a program, okay. Now I'm gonna refresh my environment and I'm gonna go back to this program here, the a=2, and then the 2(). And I'm gonna run this and what you're gonna see when I try to run that program.
[00:02:51] Is that I get an error. This error says two is not a function. In other words, it checked the program first. There's no a that has been run. It was invalid to try to run two as a function. There's lots of other syntax errors that we could come up with, okay?
[00:03:11] So for example, if I had 2 = 3, right, the value two on the left-hand side is not something that can get assigned, it's not a variable, so it can't get assigned something. So that is yet again an example of something that can be caught kind of at the compiler phase you've written something totally invalid.
[00:03:31] But here's something that can't be caught at the compiler phase that has to be run time. If I say something like a( ), open close parenthesis. What it cannot known is if at that exact moment of my program is a function or not, it doesn't know that yet.
[00:03:47] So it has to try to run the program and if it fails. In this case it's failing cuz there isn't an a, that's a mistake. So let's make b and a and then let's try that a ( ) and you'll notice that it fails as a type error because a doesn't have a function value in it.
[00:04:06] If a had a function value in it, then the function call would've worked. So that's what we meant between the distinction between compiling something, knowing ahead of time that it's broken, versus needing to try to run the program to find out if it works or not.
>> Kyle Simpson: Hopefully the most recent question in the chat room has been answered.
[00:04:30] JavaScript catches invalid syntax by compiling your program first and then executing the compiled code, as opposed to a scripting language which can't catch the syntax errors until it gets to them. Okay, so it's important to try from here on out to run programs in an environment. And the easiest way for you to try that is something like your developer console.
[00:04:53] There are other ways to do this, there are sites like JSbin, JSfiddle and a dozen other ones out there, that you can go to the site and type in some code, and run a program. Those ones are fine too. For our purposes, I think the most basic is the best.
[00:05:07] Just try it in your console. So essentially what I'm asserting here in the book is I'm saying, don't just take these things for granted. That if I say a equals two, it works, try them yourself. One of the little kind of a tip here is that you'll notice I can do a = 2 and if I hit Enter all by itself it will run the program, but if I hit Shift Enter it gives me a second line so I can keep going, I can enter in a multi line program hitting Shift Enter and most of the developer consoles are kind of like that you can do multi line.
[00:05:41] But in my case I'm going to prefer to write my code in an editor, and copy and paste it in just so I don't have to keep hitting Shift Enter and all that, so you can go either way, but knowing about the Shift Enter technique is good. Okay, so in that case, the question in the chat room is, if I try var a; a ().
[00:06:06] The reason you're getting that it's a number is because your environment still has, a, assigned to value two from when you typed it in earlier. So you've been noticing that I've been refreshing, and I do that with my keyboard shortcut. I do CMD R in the browser in Chrome.
[00:06:27] To refresh an environment, to start it over. So you can do that, or you can hit the refresh button, or whatever. But making sure that you start with a fresh environment [LAUGH] is a good way to avoid the accidentally having it as value too.
>> Speaker 2: Question about running JavaScript from the command line?
[00:06:46]
>> Kyle Simpson: Yeah, there was a question about, can JavaScript be run from a command line? There are command lines execution environments, the most notable of which is node. Node is typically cited as kind of a service side java script environment, but node can also run command line programs. So you could, if you had node installed, you could run node minus e and give it a JavaScript program and run it from the command line.
[00:07:10] Or node and give it a file name, kinda like you talking about with JAVA. There are other JavaScript environment outside of browsers, so a Rhino is one of them, there is probably maybe three or four others that am forgetting off the top of my head. There are some JavaScript command line environments, the most common is definitely node, if you wanna run JavaScript on the command line.
[00:07:35] Yeah, node i o j s, they're forked versions of the same project. Looks like they're probably gonna come back together in a few weeks or months. So, I'm using node to refer to that whole family of server side JavaScript. And yes, node does have a REPL, which looks a little bit like our thing here, it's like an actual environment.
[00:07:54] I can illustrate that real quick, cuz I have node installed on my computer, so I can say node. And now I'm in a command line environment where I can do var a = 2 and try to run the program and I am going to get my errors. So note does have a ripple like that.
[00:08:09] But also it's a.
>> Kyle Simpson: If I had a file with that code in it, a =.
>> Kyle Simpson: I can't even type in VM anymore. Okay, so if I had a file called test.js, and I said, nodetest.js, that's very similar to Java's command line environment. So you can do those things.
[00:08:39] Or you can do node, I think it's minus e. And then give it a string of code like a = 2, I think that works. Yeah, so minus e will evaluate it from the command line. So there are command line environments. I would suggest it's probably better to stick with your developer console while you're learning JavaScript.
[00:08:58] But there are command line environments if you wanna play with them