Please enable JavaScript to use CodeHS

Variables in JavaScript

Learn the basics of variables in JavaScript.

By Rachel Devaney

What is a variable?

In programming, we use variables to store information. By storing values in variables, we are able to reference and/or manipulate information throughout a program. Let’s say we create a game where players have a specific number of lives. We could use a variable to store the number of lives.

We’ll start by creating a variable by declaring it. In Javascript, you declare a variable with the keyword var.

var numLives;
Plain text

Right now, we have an empty storage container called numLives. If we want to give it an initial, or starting, value, we can also initialize the variable when we declare it, like this:

var numLives = 3;
Plain text

Here, we’ve initialized the variable numLives and given it a starting value of 3. Let’s say the player loses a life and now has 2 lives. We change the value of a variable by assigning a different value to it:

numLives = 2;
Plain text

Notice how we don’t use the keyword var when assigning a new value to an existing variable. This is because we’re not creating a new variable. Instead, we want to change the value of the original variable.

The program below puts all of this together. Explore the example by running it and answering these guiding questions:

  • What happens when you assign different values to the variable numLives?
  • Let’s say the player loses another life. Can you add to the program to assign a new value to numLives?
  • Take a look at line 13. What is the difference between the variable and the text? What happens to the printed output when you change the value of numLives?

Naming Variables

When naming variables in Javascript, follow these rules:

  • no spaces
  • must start with a letter, $, or _
  • variables are case sensitive
  • written in lower camel case (the first word starts with a lower case letter, the rest of the words start with a capital letter)

Additionally, while not necessarily a rule, you’ll want to name your variable in a way that describes what information it’s holding. This makes your program easier to read and understand.


Practice #1

The Mandalorian is about to escape with Baby Yoda when he is ambushed by 15 stormtroopers! He uses a variety of attacks to defeat them. Create a program that uses a variable to keep track of the remaining stormtroopers. After each attack, change the value of the variable and print the number of remaining stormtroopers using the println command.

The Mandalorian starts by using his blaster to knock out 5 stormtroopers. Then, he uses his flamethrower to knock out 3 more. With 7 left, the Mandalorian uses his Amban rifle to get three out of the way. Finally, he goes in for hand-to-hand combat to finish off the last 4 stormtroopers! With stormtroopers littered around the room, the Mandalorian is free to escape with Baby Yoda!

When run, your program might look like this:

There are 10 stormtroopers left.
There are 7 stormtroopers left.
There are 4 stormtroopers left.
there are 0 stormtroopers left.
Plain text

Hint: Look at Line 13 in the example when writing your print statements!

Types of Variables

In the examples so far, we’ve only used numerical data. However, variables can store other types of information as well. The variable type is based on the type of data the variable holds. Let’s take a look at the different types of variables:

  • Integer (int): whole numbers, such as -5, 0, 15. Example: var numLives = 3
  • Float: number with a decimal, such as 43.67, -0.11, 45.2543. Example: var cost = 40.25
  • String: text - note that strings are always surrounded by quotes. Example: var name = "Baby Yoda"
  • Boolean: either true or false. Example: var isJedi = true;

Take a look at the example to see the different variable types in action.

  • Can you identify the type for each variable?
  • Notice how the Boolean variable type does not include quotes around the value true. If you were to add quotes, what type of variable would it be?
  • Can you change the variable type of age by assigning a different value?

Practice #2

Extend your program from Practice #1 to include a variable to store the type of weapon the Mandalorian uses for each attack. This means you will need to create two variables: one to store the remaining number of stormtroopers and one to store the weapon type. Print out four statements to describe each phase of the attack. Be sure to change the value of your variables before printing each line!

Here’s an example of what a run of your program might print:

The Mandalorian uses his blaster to attack. There are 10 stormtroopers left.
The Mandalorian uses his flamethrower to attack. There are 7 stormtroopers left.
The Mandalorian uses his Amban rifle to attack. There are 4 stormtroopers left.
The Mandalorian uses his hands to attack. There are 0 stormtroopers left. 
Plain text

As a reminder, here is the scene: The Mandalorian starts by using his blaster to knock out 5 stormtroopers. Then, he uses his flamethrower to knock out 3 more. With 7 left, the Mandalorian uses his Amban rifle to get 3 out of the way. Finally, he goes in for hand-to-hand combat to finish off the last 4 stormtroopers! With stormtroopers littered around the room, the Mandalorian is free to escape with Baby Yoda!

The Power of Variables

So far, we’ve seen how we can change the values of variables and how to print these values to the console. However, variables are much more powerful than that! Take a look at this final example program to see how we can use variables in programs with graphics.

This program draws a circle inside of a square. Run the program and explore with these guiding questions:

  • How is the variable radius used in this program?
  • Change the value of the variable radius and run the program. What happens?
  • How could you write this program without variables? What difference do variables make?

The program above uses one variable to control the size of the circle and square. If we want to change the size, all we have to do is change the value of the radius variable. This affects all of the places we use the variable radius in our program, enabling us to change the size of the circle and the square at the same time. If we had not used a variable for the radius, we would have to update this value in multiple places, which gets super tricky when you have hundreds and hundreds of lines of code!

In conclusion, the power of variables comes in their ability to store information that we can use throughout our program - making it easy to update our programs as we work.