JavaScript variables and data types: var, let and const

This chapter covers the basics of variables and data types in JavaScript. We will see how to declare and use variables, which data types are available, and how to work with them. Getting these basics right is what makes JavaScript code efficient and maintainable.

Declaring variables in JavaScript

In JavaScript, a variable is a container that can hold a value. To declare one, use the following syntax:

let maVariable;

That declares a variable named “maVariable” with no value yet. You can also declare a variable and give it an initial value with the assignment operator (=):

let maVariable = 5;

JavaScript has three keywords for declaring variables: var, let and const. The var keyword is the oldest one and has been around since the early days of JavaScript. The let keyword arrived with ECMAScript 6 (ES6) and is now the recommended way to declare a variable. The const keyword, also introduced in ES6, declares variables that cannot be reassigned once their initial value is set.

Choose the right declaration keyword depending on how the variable will be used. If you plan to reassign a value to your variable (for example to increment or decrement it), use the let keyword. If you want your variable to hold a constant value that cannot be modified, use the const keyword. The var keyword, for its part, ignores block scope: a var variable declared inside an if or a loop stays visible throughout the function that contains it, or throughout the script if it is declared outside a function. That is a source of hard-to-spot bugs: keep it for legacy code.

Data types in JavaScript

JavaScript gives you several data types to store in your variables:

• Numbers: JavaScript uses a single data type for numbers, whether they are integers or floating-point values. Here is how to declare a variable holding a number:

let maVariable = 5;

• Strings: a string is a sequence of characters wrapped in quotes. You can use single or double quotes, but single quotes are recommended to avoid any confusion with apostrophes. Here is how to declare a variable holding a string:

let maChaine = 'Ma variable est une chaine de caractères';

let maChaine = 'Chaque matin, j\'écoute la radio';
// or, more readable: double quotes
let maChaine2 = "Chaque matin, j'écoute la radio";

• Booleans: a boolean is a data type that is either true or false. Here is how to declare a boolean variable:

let estVrai = true;

• Null and undefined: the null keyword stands for an intentionally empty value, while undefined stands for a value that was never defined. They are often used to signal that a variable has not been initialised yet, or that it holds no valid value. Here is how to declare a variable with the value null or undefined:

let maVariable = null;
let monAutreVariable = undefined;

Global and local variables

In JavaScript, a variable declared outside every function is a global variable and can be read from anywhere in the code. A variable declared inside a function is a local variable and only exists inside that function.

// Global variable
var globalVariable = "Je suis une variable globale";

function myFunction() {
  // Local variable
  var localVariable = "Je suis une variable locale";

console.log(globalVariable); // Prints "Je suis une variable globale"
  console.log(localVariable); // Prints "Je suis une variable locale"
}

console.log(globalVariable); // Prints "Je suis une variable globale"
console.log(localVariable); // Throws an error because the variable is not accessible outside the function

Conclusion

This chapter covered how to declare and use variables in JavaScript, the data types available and how to work with them. We also looked at the differences between the var, let and const declaration keywords, and at global and local variables. With these basics in hand, you are ready to use variables effectively in your JavaScript projects.