Declaring and assigning variables - JavaScript Tutorial

- [Instructor] In this video, we're going to introduce variables and how to make them. I have the chorus code space loaded up here and we're going to open a terminal to serve as our JavaScript playground. So in the Menu, I'm going to go to Terminal and then start a New Terminal and from there I'm going to run Node. Great. If you prefer, you can also use a browser console. So here in Chrome, I can load up the JavaScript console. This one's pretty big, and you can drag this around. So basically the console takes up the whole page if you want. And you'll have plenty of room to play with the JavaScript right here on this little prompt. Now, a variable, as you may have heard in math class, is a place to keep things that are unknown. That's one way of looking at it. For our purposes, you could think of a variable as a box with a label on it. We can label the box whatever we want and put pretty much anything we want into the box and we end up with a convenient way to refer to some data. Remember that as a programmer, you are in charge and the computer is going to do what you tell it to do. Nothing more, nothing less. You should assume that the computer basically doesn't know anything unless you tell it something. And variables are an important part of how we do this. In the course of programming, we're dealing with a lot of unknowns, or at least things that are unknown at first. We then use variables to accumulate the knowledge we need to accomplish whatever the goals of our program are. So here's an example. Say we want to write a function that's going to let someone draw a line on screen. Some of the things we don't know at first are the points where the line will start and where it will end. We could have variables for these points and refer to them later by name when it comes time to draw the line. So anyway, that's the theory. Here's how it works. If we were approaching this the way you'd approach it in math class, you'd have variables called things like x. In JavaScript, the way to declare a variable, is to type "var" and then the name. So in this case, that will be "x". That's enough to create a variable but it's just an empty box at this point. To give the variable "x" a value, we would add a space and then an equal sign, and then we give it the value. So let's give it "32" and we end the line with a semicolon. Strictly speaking, this is optional, but it's a good idea and I recommend ending every line with a semicolon. There may be times in this course where it's left out, but that's just to save a little typing in the examples. What we've done here is called assigning a value to a variable. So now I hit Return and what I've just typed is executed. Nothing really happens here except the assignment. So I see undefined returned. Undefined is JavaScript's way of representing something that doesn't exist. You'll see it often. But if I type the name of the variable I just created and do nothing except end the line with a semicolon, I get back the value that I assigned. So I know it really works. And you can also see that Node is interpreting this for me and showing the value even before I hit Return. But if I do, there it is, "32". Calling things "x" is something that gets a lot of complaints in math class and we can certainly do better in our programs. Variables can be named almost anything that starts with a letter, an underscore or a dollar sign. I can create a variable called "whereAmI" and set it to "Santa Barbara, CA". The part in quotes is a string which we'll discuss in a little more detail later but it's how you store things like words or sentences. Now that I've stored a couple of variables, I can see their values. So if I start to type, "whereAmI", I can see the value there. Or if I start to type "x", I can see that. The JavaScript console now knows about those variables and will start to complete the names for me which is pretty useful. I can also keep the label, but change what's in the box. If I leave off the "var" and just do the assignment and the equal sign, I can change "x" to "45" and I can change "whereAmI" to "Los Angeles, CA". I could also change "whereAmI" to "75". That doesn't make any sense but JavaScript doesn't care what I assign. We'll have a short digression on what that means a little later in the course. Meantime, I can also assign several variables at once. So I'll create a few monster variables here, "monster1" can be "Grover". I'll separate these by commas, "monster2" can be "Cookie Monster" and "monster3" can be "Animal". This just saves me a little typing when I need to create several at once. But now if I type each variable's name and hit Return, I can see their values. A couple more details. Your variables can be named almost anything you want and I recommend you use names that are descriptive because programs aren't just for computers, they're for other humans to read as well. The computer isn't going to care what you call your variables for the most part but humans definitely will. So make sure you name variables something that indicates the sort of thing that they're actually going to contain. If I were writing a program dealing with how much it costs to ship a package, I might have variable names for things like "packageDimensions" or "taxRate" and so on. Starting a name with a lowercase letter and mashing on additional words with capital letters like that is called CamelCase and it's a pretty common way to name things in JavaScript. There are a few words you can't use for your variable names because they're part of JavaScript itself. They're called Reserved Words. From what we've seen so far, you wouldn't be able to use "var" as a variable name because JavaScript already claimed it. If you're curious, there is a list of reserved words available on the Mozilla JavaScript reference site, and of course, if you're using a nice code editor, it will highlight those words for you so you won't accidentally use them. So that's an overview of variables which are the way that we give names to data. If we're thinking of JavaScript like a spoken language, they're sort of like nouns.