Learn the basics of variables in JavaScript.
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.
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:
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:
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:
numLives
? numLives
?numLives
?When naming variables in Javascript, follow these rules:
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.
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:
Hint: Look at Line 13 in the example when writing your print statements!
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:
var numLives = 3
var cost = 40.25
var name = "Baby Yoda"
true
or false
. Example: var isJedi = true;
Take a look at the example to see the different variable types in action.
true
. If you were to add quotes, what type of variable would it be?age
by assigning a different value?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:
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!
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:
radius
used in this program? radius
and run the program. What happens?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.