JS - Variables

Designing with Web

True or False?

What's a variable?

Variables are containers that you can store values in. Why do we need variables? Well, variables are needed to do anything interesting in programming. If values couldn't change, then we couldn't do anything dynamic, like login to your account on Facebook.

We can create variables using the var keyword:

As we can see, JS execute instructions in the order we would read them.

Let's take a simple example of how to use variables :

Here's another example: We create a variable called "size" storing a number. We use it to change the radius of our circle. You can observe that changing the variable's number modifies the circle.

source

Also variables have another specificity, they can be re-useable. It means that we can take a variable and use it multiple times. We can use the "size" variable to also change the circle's color.

source

We could also create a variable called "color" to specify the circle's color, for instance. Usually variables are reused to avoid rewriting the same variables twice

We can name a variable nearly anything, but there are some name restrictions: see this article on variable naming rules. If you are unsure, you can check your variable name to see if it is valid.

JavaScript is case sensitive, this means that a and A are interpreted as totally different characters, thus myVariable is a different variable to myvariable. If you are getting errors in your code, check the casing!

For now, keep in mind that variables must have unique names, we'll come back to that later.

Since ES6 (a specification to standardize JS), var is not the only keyword to declare variables. When looking around you may find let and const keywords, learn about them here: var, let, or const?

Data types

Note that variables may hold values that have different data types:

Number

A number. It can be either integer or floating point number.

var myNumber = 10;
var pi = 3.14159;

String

A sequence of text known as a string. To signify that the value is a string, you must enclose it in quote marks (either single quotes 'Bob' or double quotes "Bob").

var myString = "Bob";
var lorem = "Lorem, ipsum dolor sit amet consectetur adipisicing elit."

Boolean

A True/False value. The words true and false are special keywords in JS, and don't need quotes.

var myBoolean = true;

Array

A structure that allows you to store multiple values in one single reference.

var myArray = [ 100, "Bob", "Steve", 10 ];
// Then refer to each value of the array like this:
console.log( myArray[ 0 ] ); // for the first value in the array: 100
console.log( myArray[ 1 ] ); // for the second: "Bob", etc.

Object

Basically anything. Everything in JavaScript is an object, and can be stored in a variable. Keep this in mind as you learn.

var teacher = { name: "Lionel", age: 35 };

We'll see Arrays and Objects later in the course.

Much Like Algebra

The good news is computers do the maths, they're really good at it; we tell them what to compute (hence the name).

Yet different from Algebra

The equal sign = is an assignment operator, not an "equal to" operator. This is very different from algebra:

Assignments are evaluated from right to left: first the right side of the = is evaluated, then the computed value is stored in the variable designed on the left side.

In JS, we can also add strings together using the plus sign +, this is called string concatenation. Take care if you're mixing data types (i.e. Number and String), the result can be confusing:

We can also use a syntax called template literals or template strings:

Template literals are enclosed by the back-tick ` (grave accent) character instead of double or single quotes. Template literals can contain expressions, indicated by the dollar sign and curly braces (${expression}). Expressions are evaluated and their result is used for string concatenation. Read more about Template literals on MDN.

Sum up

Variables are containers to store values.
Variables need to be declared before being assigned a value.
Variables can store different types of value.
To get the value stored in a variable, we write their identifier.
We can assign a new value to a variable based on the values of other variables or even on its own value.

Quiz

Test your knowledge

This quiz is mandatory. You can answer this quiz as many times as you want, only your best score will be taken into account. Simply reload the page to get a new quiz.

The due date has expired. You can no longer answer this quiz.

We're now good with variables! Let's move on to Conditions.