JavaScript Variables

What Is A Variable?

One of the most important components of programming, variables allow us to store and manipulate information, including user input. Remember equations like x + 2 = 5 from high school algebra class? You probably don't remember because algebra was really boring. And the reason it was boring is probably because you didn't know why you were learning it. Now you will!

Replace the code between the body tags of your HTML document with this:

<p id="paragraph"></p>
<script>
 var text = "Purple Monkey Dishwasher";
 document.getElementById("paragraph").innerHTML = text;
</script>

Save the file and bring up the web browser. If you've typed it correctly, it'll look like this:

The id attribute identifies the element, and the code between the script tags modifies that element. Let's take a closer look at the code:

Code Description
<p id="paragraph"></p> Declares a paragraph element and assigns it the id of "paragraph"
<script> Indicates the start of a section of JavaScript code
var text = "Purple Monkey Dishwasher"; Declares a new variable called "text" and assigns it the value of "Purple Monkey Dishwasher"
document.getElementById("paragraph").innerHTML = text; Gets the element with the id "paragraph" and assign the "innerHTML" property to the value of the variable called "text"
</script> Indicates the end of the JavaScript code section

You'll notice that each of the lines of our JavaScript ends with a ; symbol. This symbol indicates the end of a line, and failing to include them is a common source of errors.

The var keyword is used to declare a variable. You can declare a variable and assign its value in one statement or assign its value later. You can also change the value of a variable at any time.

More Examples

Try changing the name and value of the variable as well as adding more variables and elements to the page. Here are some examples you can try:

Code Descrption
var firstName = "Johnny";
var lastName = "5";
var fullName = firstName + lastName;		 Declares the variables "firstName" and "lastName" and assigns them values, then declares the variable "fullName" and assigns it the value of the combination of the other two
var x, y;
x = 5;
y = 10;
var z = x + y;		 Declares the variables "x" and "y" and then assigns them the numerical values 5 and 10 respectively, then declares the variable "z" and assigns it the value of the sum of the other two
var color = "#ff0055";
document.getElementById("elementOne").style.color = color;		 Declares the variable "color" and assigns it a hexadecimal text value, then gets the element with the id "elementOne" and changes the font color to the value stored in the variable

Variable Types

There are many different types of variables, each storing different kinds of values. For example, the statement var firstName = "Johnny"; is storing text, while the statement var x = 5; is storing a number. Adding numbers is different than adding text, so it's important to think about what type of value you want to store in your variable.

Here are the common variable types:

Type Description Example
Number Stores a numerical value (negative or positive) var x = -5;
String Stores a text value var myName = "Tommy Creo";
Boolean Stores a true or false value var myBool = true;
Array Stores a number of other variables var pizzaToppings = ["Pepperoni", "Cheese", "Bacon", "Green Peppers"];
Object Groups variables together as an object var city = {name: "Vancouver", Province: "BC", Country: "Canada", Population: 603502};

Notice that arrays and objects variables that contain other variables. This can be useful for organizing variables when dealing with groups of elements. Here are some examples of organizing similar information in three different ways:

var firstName = "Bruce";

var lastName = "Wayne";

var alterEgo = "Batman";

console.log(firstName + " " + lastName + " is " + alterEgo);

var hero = ["Clark", "Kent", "Superman"];

console.log(hero[0] + " " + hero[1] + " is " + hero[2]);

var hero = {firstName: "Peter", lastName: "Parker", alterEgo: "Spiderman"};

console.log(hero.firstName + " " + hero.lastName + " is " + hero.alterEgo);

Try declaring, assigning and accessing various variable types. Note that arrays start with an index of 0. This is another common source of errors. You can also use arrays to hold objects and objects to hold arrays.

Operators

In addition to adding numbers or combining values, there are a number of other operators:

Operator Description Example
= Assignment var x = 5;
+ Addition var sum = x + 5;
- Subtraction var difference = 10 - x;
* Multiplication var product = x * 5;
/ Division var quotient = 25 / x;
% Modulus var remainder = 25 % x;
++ Increment x++;
-- Decrement x--;

You should familiarize yourself with these operators, as they are used frequently in programming. We'll discuss some more operators later on.

Make sure you have a decent grasp of the different variables and operators before proceeding.

Continue to Next Lesson »