JavaScript Variables

Go back to JavaScript Index

What is a variable?

A variable is a sort of container that stores a value. I normally state that variables are like refrigerators or water bottles that can store content until we need it. In a web context, variables can store information like username or password, level or score, so that the information is easy to retrieve and use in a given situation later on. Descriptive variable names makes it easy for the web developer to make sense of the information that the variable stores.

In short, variables label data and store it in memory for later use.

Variable syntax

[keyword] [name] [assignment operator] [value];
1.0 | The overall syntax of variables in JS

The keyword used in connection with variables is either var, const or let. We will take a closer look at each of them in a bit.

The name is the name of the variable. The name is up to you as developers to choose, but there are some general rules. It can only start with a letter, $ (dollar sign) or _ (underscore), but may contain letters, numbers, $ (dollar sign) and _ (underscore). The name cannot contain a - (dash). Descriptive names that consist of multiple words are often written with camelCase. The JS keywords are reserved words and cannot be used as variables names.

The assignment operator is in most cases = (equal to).

The value is the value that is to be stored.

Keyword: var

Before ES2015, the keyword var was the only way to declare a variable:

var season = 'spring';
1.1 | Keyword var. Data type: String

In the example above, the keyword var is used to declare a variable named season the is assigned the value spring using the assignment operator = (equal to). Notice that the value 'spring' is written in quotation marks - this is because the data type of the value is string (a combination of symbols).

If you wish to get the value of the variable, you just type in the name of the variable:

var season = 'spring';
1.2 | Retrieving the data stored in a variable

If the value of the variable is a number, it is written without quotation marks:

var numOfRainyDaysPerYear = 179;
1.3 | Keyword: var. Data type: Number

The same thing applies if the value is boolean:

var isSunny = true;
1.4 | Keyword: var. Datatype: Boolean

If you want to assign a new value to the variable, type in the name of the variable and use an assignment operator to assign the new value:

isSunny = false;
1.5 | Assigning a new value to a variable.

Keyword: const

The keyword const was introduced in connection with ES2015 and is short for word constant. It follows the same structure as var:

const numOfSeasonsPerYear = 4;
1.6 | Keyword: const. Data type: Number

The main difference between the two is that const cannot be assigned a new value. If you try to do so, you will get an error message.

There is also a difference between the two when it comes to scope - with const it is possible to create block scope - we will talk about that some more later.

Keyword: let

The keyword let was also introduced in connection with ES2015 and is used to declare a variable that can be assigned a new value (just like var).

let myFavoriteSeason = 'spring';
myFavoriteSeason = 'summer';
1.7 | Keyword: let. Data type: String

When to use what?

You will see the keyword var used in many examples online, but since it is the old way of declaring a variable, you should try to use const and/or let instead.

The keyword const is used when the value assigned is not to be changed. In the example 1.6 above, the keyword const was used, because the number of seasons does not change. The number of months doesn't either.

The number of days per year does however change every four years in connection with leap year, which is why you would use let to declare a variable storing this information. My favorite season may also change as shown in example 1.7.

In short, use const when the value is not supposed to change and let when the value may change - don't use var.


Assignment 1

Look at example 1.1, 1.3 and 1.4 where the keyword var was used to declare the variables. If var was to be replaced with either const or let, which keyword would you choose and why?

Assignment 2

Declare a variable named isSpring and assign the value true to it. The variable is to be used to tell whether it is spring or not.

After you have declared the variable, answer the following questions:

  • Which keyword do you use to declare the variable and why?
  • Is the value to be written in quotation marks or not?
  • What is the data type of the value?

Assignment 3 - The Light Bulb

  • Identify the variables you would need to create the program (Wireframe on Canvas).
  • Create the three HTML, CSS and JS files needed for the program.
  • In the JS document, declare all the variables identified in the first part of the assignment.

Next up

Before we start looking at conditional statements which are used a lot in programming, let's have a look at some of the operators, we will be using.

Next up: Operators (1)