Historique

Tout d’abord, un peu d’histoire : le Javascript a été créé en 1995 en seulement 10 jours par Brendan Eich.

À la base, son nom d’origine est Mocha. Ce qui a évolué en Livescript puis en Javascript tel que nous le connaissons. Il est disponible premièrement sur le navigateur NetScape, puis à partir de 1996, Javascript devient un standard et est supporté par tous les navigateurs.

En 1997, le langage est standardisé sous le nom ECMAScript. Javascript est une implémentation d’ECMAScript (ES) (la version la plus récente est la 8ème : ES8)

Définition

Qu’est-ce qu’une variable ?

En informatique, une variable est un élément de code qui fait référence à une position de mémoire qui contient de la donnée et qui peut successivement prendre différentes valeurs au cours de l’exécution d’un programme.

Nous verrons des exemples un peu plus loin dans cet article.

Convention de nommage

En tant que développeur, nous sommes soumis à des conventions pour nommer nos variables.

Pourquoi ? Pour une question de lisibilité du code et de maintenabilité.

En JavaScript, un nom de variable doit obligatoirement commencer par une lettre (minuscule ou majuscule), un "$" ou un "_". Un nom de variable peut aussi contenir des chiffres, et les caractères spéciaux "$" et "_".

Mais attention : on ne peut pas faire commencer le nom de la variable par un chiffre !

Notez aussi que les espaces sont interdits dans le nom d’une variable. Cela produirait forcément une erreur.

Aussi, on choisira un nom qui donne du sens à la variable, de préférence en anglais. Par exemple, pour stocker mon prénom dans le programme je nommerai ma variable "firstName".

Vous remarquerez qu’il n’y a pas d’espace et qu’à partir du deuxième mot on utilise une majuscule. Cette convention de nommage s’appelle lower camelCase, le tout premier mot de la variable commence toujours par une minuscule et les suivants sont marqués par une majuscule en début de mot.

Déclaration

Une variable doit obligatoirement être déclarée, c'est-à-dire qu'on lui réserve un emplacement dans la mémoire. De manière optionnelle, il est possible de lui assigner une valeur au moment de la déclaration.

< mot-clé de déclaration > < nom de la variable > [ = valeur de départ ] ;

Quelques exemples :

1
2
3
4
// Déclaration simple, on réserve l'espace mémoire
let firstName;
// Déclaration avec assignation de valeur
let ageOfParticipant = 28;

Voyons maintenant les différents mots-clés qui nous permettent de déclarer en JavaScript.

Déclaration avec let

Le keyword "let" nous permet de déclarer une variable dont la valeur peut changer.

1
2
let nombre = 150; // nombre value is 150
nombre = 42; // nombre value is 42

Déclaration avec const

Le keyword "const" nous permet de déclarer une variable dont la valeur est constante. Elle ne peut PAS changer.

1
2
const favoriteSchool = "CodeWise";
favoriteSchool = "Another School"; // => TypeError: Assignement to constant variable.

Déclaration avec var

Le keyword "var" est similaire à "let". Néanmoins il y a une différence dans la portée de la variable que nous verrons plus bas

"var" est déprécié depuis le passage à ES6 et devrait toujours être remplacé par un "let".

En conclusion, selon le mot-clé que vous utilisez, la portée et la manière d'utiliser la variable peuvent changer.

L’assignation

Comme vu dans les exemples précédents, pour assigner une valeur à une variable, on utilise l’opérateur d’affectation "=".

On peut assigner une valeur lors de la déclaration de la variable, ce qu'on appelle l’initialisation.

1
let age = 25;

Mais on peut également assigner une valeur après la déclaration, pour assigner une nouvelle valeur à notre variable, qui écrasera la valeur précédente.

1
2
3
let age = 25; // age value is 25
age = 26; // age value is 26
age = age + 1 // age value is 27

Notez qu'on peut utiliser la valeur courante d’une variable pour calculer une nouvelle valeur à lui assigner.

Type d’une variable

En JavaScript comme dans différents langages, nous manipulons plusieurs types de données :

• Des nombres (Number), entiers ou à virgule.
• Des chaînes de caractères (String).
• Des tableaux (Array).
• Des objets (Object).
• Des booléens (Boolean), pouvant contenir la valeur true ou false.

On peut connaître le type d’une variable avec l'opérateur "typeof" :

1
2
3
4
5
6
7
8
9
10
11
const firstName = "John";
typeof firstname; // => "string"

const age = 25;
typeof age; // => "number"

const user = {
    firstName : "John",
    age : 25
}
typeof user; // => "object"

Portée d’une variable

La portée d'une variable correspond à l'ensemble des endroits dans votre code où la variable est accessible.

Une variable est généralement déclarée à l’intérieur d’un bloc d’instruction. Dans ce cas, elle est connue jusqu’à la fin du bloc d’instruction.

On dit que sa portée se limite au bloc d'instruction dans lequel elle est déclarée.

Un bloc d'instruction représente l'ensemble des instructions contenues entre deux accolades.

Règle d’indentation : les instructions mises entre accolades sont indentées. C'est à dire qu'on les décale vers la droite de 2 ou 4 espaces pour améliorer la lisibilité du code.

Cas exceptionnel : lorsqu'une variable est déclarée avec le mot-clé "var", sa portée est limitée à la fonction dans laquelle elle est déclarée et non pas au bloc d'instruction dans lequel elle est située.

Voyons de plus près la différence entre "let" et "var".

La portée de let

1
2
3
4
5
6
7
8
9
10
11
12
13
// name n'est pas accessible avant d'être déclarée, on obtient donc une erreur
console.log(name); // => ReferenceError : name is not defined

let name = "John"; // déclaration et initialisation d'une variable "name" globale

if (name === "John") {
  let age = 25; // déclaration de "age" dans le bloc
  console.log(age); // => 25
}
console.log(name); // => "John", accessible car déclarée de manière globale

// age n'est pas accessible en dehors du bloc, on obtient donc une erreur
console.log(age); // => // => ReferenceError : name is not defined

La portée de var

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// avec "var" la variable est accessible au dessus de la déclaration, 
// mais elle n'a pas encore de valeur.
console.log(name); // => undefined

var name = "John"; // déclaration et initialisation d'une variable "name" globale

if (name === "John") {
  var age = 25; // déclaration de "age" dans le bloc
  console.log(age); // => 25
}
console.log(name); // => "John", accessible car déclarée de manière globale

// age a été assignée dans le bloc mais elle reste accessible en dehors.
console.log(age); // => 25

C'est pour cette raison qu'on évite au maximum d'utiliser "var". C'est un comportement beaucoup plus imprévisible et contre-intuitif qui peut créer ce qu'on appelle des effets de bord.

Constante

Comme son nom l’indique, c'est une varibale qui n'est pas variable (oui oui) mais constante !

Une constante est déclarée avec le mot-clé "const", et ne peut être initialisée qu’une fois. On ne peut pas lui réassigner d’autres valeur.

Toutes les variables dont les valeurs ne sont pas réassignées devraient être déclarées avec const pour des raisons de performance et simplicité de lecture du code

1
2
const favoriteSchool = "CodeWise";
favoriteSchool = "Another School"; // => TypeError: Assignement to constant variable.

La portée d'une variable déclarée avec le keyword "const" est limitée à son bloc d'instruction, exactement comme pour "let".

Conclusion

Vous venez de découvrir les variables en JavaScript.

Chaque langage utilise un standard différent de nommage ou de syntaxe mais les principes restent toujours les mêmes. Si vous avez des idées d’amélioration pour cet article, laissez-nous un commentaire !

Sources

• Developer Mozzila : Stocker les informations nécessaires — les variables
• Pierre Giraud - Javascript apprendre à coder : Présentation des variables