Blog

JavaScript Basics: Variables

This tutorial is part of a series called JavaScript Basics. We recommend starting with the first post in the series: Get Started With JavaScript. Or, if you prefer, you can download the code files here, and read on to learn about JavaScript Variables.

Creating Variables with JavaScript

If you’ve ever sat through an algebra class, you’ve come across statements like x + y = z. Each variable represents something else, whether it’s a number, a word, an object, or anything else you can imagine. JavaScript uses variables in much the same way.

For example, let’s say you’re building a basic JavaScript video game, where the character’s spacecraft starts with 100 health-points. Every time it gets hit by an asteroid, the ship loses somewhere between 1 and 10 health points, depending on the size of the asteroid.

In JavaScript (or in any programming language for that matter), you’ll need to use variables to represent things like the number of health-points that the ship has left, and the size & damage potential of each asteroid. Creating these variables is easy. Perhaps the simplest way would be to write a single line of code that creates, or declares, each variable:

var shipHealth = 100;

var asteroid_01 = 6;

Can you guess what each piece of that code means?

Naming Variables Intelligently

As you may have guessed, “var” means “Hey JavaScript, create a new variable!” The rest of the code is pretty self-explanatory. We’ve named the variables “shipHealth” and “asteroid_01” — so the ship has 100 health points, and asteroid_01 has a damage-potential of 6. While more in-depth code will be needed to give meaning to those numbers (so that, for example, shipHealth will go down to 94 if the ship collides with asteroid_01), the variable names are meant to have meaning to us (human coders).

You can name variables whatever you want (it won’t make any difference to the JavaScript gods whether you call your variable shipHealth, x, y, z, or fooBar), but if you want your code to be readable by other human beings (or if you want to be able to read and understand your own code tomorrow when you try to finish making your video game), it’s good practice to name your variables in a way that makes sense. So if you come back tomorrow and see that “var x = 100;” you might not know what that means. If you see “var shipHealth = 100;” then you know that that variable is being used for the health-points of your spacecraft.

Working with Variables

Just like the variables in your favorite high school algebra class, you can have fun with JavaScript variables by manipulating them to your diabolical ends.

You can add variables together, you can subtract them from each other, you can multiply them, divide them, or even compare them to one another.

For example, let’s look in our JavaScript code file “codingIsFun.js” (which, if you haven’t done so already, you can download here). From lines 8-10 you’ll find this awesome little piece of code:

if (collision) {
shipHealth = (shipHealth - asteroid01_damage);
}

In this case, if the variable called collision is set to “true” (rather than set to “false” or simply undefined), then the code inside the { … } will execute (we’ll get into “if” statements in more depth next week). In this case, the code that will execute upon collision is …

shipHealth = (shipHealth - asteroid01_damage);

In this case, we are subtracting one variable (asteroid01_damage) from another variable (shipHealth). Since shipHealth is defined as 100 on line 3 of our JavaScript file, and asteroid01_damage is defined as 6 on line 4 of our JavaScript file, 100-6 = 94. So effectively, the browser calculates that:

shipHealth = (94);

This number, 94, is now assigned to the shipHealth variable through the assignment operator, the equal sign.

BONUS CHALLENGE

As we practiced in the previous tutorial, you can check the status of the shipHealth variable by entering into the console:

console.log(shipHealth);

Try altering the code in your JavaScript file to see what happens if you change the “minus sign” to a “plus sign,” like so:

shipHealth = (shipHealth + asteroid01_damage);

Then save your JavaScript file, and reload your web page. Enter console.log(shipHealth); into the console once again and see what happens.

You can also play with the variables directly inside the console. For example, you can enter the following code:

console.log(shipHealth + 1000);

and see what happens!

You could also try things like

console.log(shipHealth / 50);

console.log(shipHealth * asteroid01_damage);

console.log(asteroid01_damage + 10);

console.log(shipHealth == asteroid01_damage); (== asks whether the two quantities are equal)

console.log(shipHealth < asteroid01_damage); (asks whether shipHealth is less than asteroid01_damage)

console.log(shipHealth > asteroid01_damage); (asks whether shipHealth is greater than asteroid01_damage)

and things like that!

To practice more with variables, check out this more in-depth tutorial.

And don’t forget to join us next week, as we dive into if statements, so we can control the flow of our JavaScript video game!