Lesson 3.5. Variables in JavaScript

lesson 3.4 Summary lesson 3.6

Like all programming languages, JavaScript allows you to use variables. variables are used to store numbers, text, lists ... Above all, we will see later it is possible to do operations with these variables.

There are three keywords for declaring variables:

var defines global variables;
let defines local variables;
const defines constants.

the difference between var and let is the scope, i.e. the places of the code where the variables can be used.

Var

The Var keyword is used to declare a global variable (for simplicity, it will be accessible everywhere). In the example below, we declare a variable x with an undefined value and a variable y equal to 5.

var x;
var y = 5;

In JavaScript, variables can contain different types of elements:

numbers,
strings
objects
lists
arrays
functions
...

Here are some examples:

var integer = 12;
var real = 12.3456;
var text = "Hello Wolrd!";
var list = ["Jacques", "Nicolas", "François"];

The issue with variables created with var is that it is possible to create several times variables with the same name:

var myVariable = "Initial text";
var myVariable = "Something else";

// Display "Something else"
console.log (myVariable);

Try online

When working on large projects, this is a problem because it is easy to to declare an already existing variable, and thus to overwrite it. This is a source of bugs. To avoid this problem, it is better to use let.

Let

To avoid creating two variables with the same name (which is possible with var), JavaScript introduced a new type in 2015: let.

The first advantage of let is that it is impossible to declare a variables twice:

let myVariable = 5;
let myVariable = 7;

The above code displays an error message in the console:

Uncaught SyntaxError: Identifier 'myVariable' has already been declared.

Try online

let a un autre avantage : la variable n'existe que dans le bloc où elle est déclarée, on dit que c'est une variable locale. Les variables locales permettent d'économiser la mémoire, car elles sont effacées à la fin du bloc dans lequel elles sont déclarées.

For these reasons, it is a better option to declare variables with let.

Const

const is short for constant. It is not exactly a variable: variables are variable (they can change), as opposed to constants which are constant (their value will never change). The code below declares a constant, then tries to change its value:

const myVariable = 5;
myVariable = 12;

As you might expect, this code generates an error that states that you cannot change the value of a constant.

Uncaught TypeError: Assignment to constant variable.

Try online

Exercise

Complete the script in the following code with the declaration of the variable message (with let). The message variable will contain the text The value of PI is:. Then declare a constant PI equal to 3.1415.

<html>
  <head>
  </head>
  <body>
    <h1>Variables</h1>

    <script>
      // Create variables here

      console.log(message, PI);
    </script>
  </body>
</html>

Do the exercise online

Solution

Quiz

What syntaxes are used to declare variables in JavaScript?

x = 5;

let x = 5;

var y = 12;

let z;

Check

What can be stored in a variable?

an integer

a decimal number

a string (text)

a list

Check

What is the difference between var and let?

There is no difference.

let needs more memory.

There is less risk of confusion with let.

let is no longer supported by the latest versions of JavaScript.

Check Bravo ! Les variables déclarées avec let occupe moins de place en mémoire et ne peuvent pas être déclarée plusieurs fois.

What is the difference between var and const?

There is no difference.

With let, the variable can no longer be modified.

let declares a variable that can change.

const declares a constant that will be fixed.

Check

lesson 3.4 Summary lesson 3.6

Lesson 3.5. Variables in JavaScript

Var

Let

Const

Exercise

Quiz

See also