Variables: The catch-all containers of JavaScript

- Programming can be boiled down to a simple principle. Write down something, make some sort of change to it, and then write down the result. Think of a simple math equation. What is four plus five? First you write down "four." Then you say what you want to do with four. In this case, add five to it. So you write down "plus five." And then you save the result, which is nine. You can do this in JavaScript by simply typing in the math equation. But this is a one-and-done operation, and not very useful.

The power of programming lies in our ability to perform the same operation on many different objects, or change that object itself over and over. So we create storage containers that hold these objects until we need them. In JavaScript, we have several different types of storage containers to hold different kinds of objects. The most common one is the variable. The variable is a container we create that holds whatever data we put into it. In JavaScript, a variable is created by typing in var and then the variable name.

That name can be anything, as long as it's written with letters, numbers, underscores, and a dollar-sign, and has no spaces. Here, it's important to remember, JavaScript is case-sensitive. So var lower-case a and var upper-case A are two different variables. There's also one caveat here. You can't make a variable that starts with a number, but otherwise you can call the variable whatever you want, including just a single letter.

When you create a variable, you create a container. And, by default, the container is empty or undefined. We can now assign something to it. A value, an object, or something else. That's done with the equals symbol. There's a formula to this. First, create the variable by typing in its name. Then assign something to it using the equals symbol and the value. Let's do that simple math example again, only this time, we'll use our variables. First, I define three variables: a, b, and sum.

Next, we assign four to a and five to b. And to get sum, I assign a and b to the sum variable by quite literally putting them into the sum variable. In code, it looks like this. Var a; var b; var sum; a equals four; b equals five; sum equals a plus b.

The sum variable is populated by the contents of a and b, so we define it first, then put the other variables into it. In code, this can often feel a bit backward, but when you see what's going on in real life, it makes a lot of sense. Creating variables, and then calling them in to set their values in a separate statement is a bit clunky, so there's a shorthand we can use instead. Var a equals five; var b equals four; var sum equals a plus b.

Here, we create the variable and set its value right away. Less code and it still makes sense. If you're creating a bunch of variables at the same time, you can create them all in one statement by saying "var" and then listing the variable names separated by commas. You can also do this with values, though that will quickly become hard to read. Exactly how you do this depends on the script you're writing. In some cases, it makes sense to create variables without setting their values. In others, it makes sense to set a value right away.

You'll see me do both in this course. When creating and using variables, there is one weird little quirk you need to know, because it's important. If I type out my function in a JavaScript file, and run it in the browser, I can ask for the value of a or b or sum, and get that right away. The browser sees I created variables with these names and knows I'm referring to those variables. But what if I just type in "c equals six" in my script without creating the variable first? In the browser, I can still get the value of c, even though I didn't create the variable.

What's happening here is, the browser says, "I see you're using a variable named c, "but I don't see it defined, "so I'm going to assume you are defining it now." That seems useful, but it's actually a problem. Later in the course, you'll learn about scoping, and how we can place variables in scope or out of scope of functions. Basically, you can create a variable that only exists within a function in your code but nowhere else in the code. If you don't create that variable using the var prefix, though, the new variable gets a global scope, and that can lead to all sorts of weird problems.

So, rule of thumb. Any time you create a variable, declare it using the var prefix to avoid issues in your code. What can you put in a variable? Most things. JavaScript is a weakly typed language, so we don't have to declare what type of content will go into a variable. We just define it and stuff it with content. A variable is a generic container that can hold a number, a string, an object, a Boolean value, an array, a function, the list goes on.

We'll talk about most of these data types in this chapter.