J'apprends le JavaScript : les variables

Les variables sont la base de la programmation. Nous ne ferions pas grand chose sans elles. Nous les retrouvons notamment dans tous les concepts plus avancés de programmation. Il serait même inutile de programmer sans variable.

Nous allons reprendre les bases concernant les variables pour être accessible aux débutants. Néanmoins, nous exposerons des points qui peuvent être intéressants pour des développeurs plus expérimentés.

Dans cet article vous allez apprendre:

• Ce qu'est une variable
• Comment utiliser les variables
• Quelques bonnes pratiques concernant l'utilisation des variables

Qu'est-ce qu'une variable ?

Les variables sont un moyen de stocker en mémoire des données qui peuvent changer dans le temps. Ça n'a l'air de rien dit comme ça mais c'est justement ce qui fait qu'un programme puisse réagir à ce que fait l'humain sur son clavier (ou tout autre périphérique d'entrée).

Une variable à un nom pour que l'on puisse l'appeler de là où nous avons besoin d'elle dans le code. Elle possède aussi une valeur. Par exemple, nous pouvons dire qu'une variable abc à la valeur 3. Là où vous écrivez abc dans votre code, l'ordinateur le remplacera avec la valeur stockée en mémoire. Dans notre exemple, il s'agit de la valeur 3.

Comme dit plus haut, une variable peut changer de valeur dans le temps. Ce qui veut dire que abc pourrait avoir pour valeur 5 lors d'une nouvelle exécution du programme ou pendant la même exécution de celui-ci. C'est de là que vient le nom "variable". C'est une portion du code qui va varier en fonction de différents facteurs.

Comment créer une variable

En JavaScript, la définition d'une variable (c'est à dire, lorsque l'on crée une variable) se fait de la façon suivante :

// keyword name = value
var a = 2
let b = 4
const c = 6

Le code ci-dessus crée/définit 3 variables a, b et c qui ont pour valeur 2, 4 et 6 respectivement.

Ce que nous venons de voir ici est en fait la version simplifiée et rapide de deux autres actions que nous avons fait sur la variable. La définition d'une variable est égale à 1) la déclaration de la variable : dire que nous voulons créer une variable et réserver l'espace mémoire pour celle-ci, et à 2) l'initialisation de la variable : attribuer une valeur pour la première fois à la variable précédemment déclarée.

let a // déclaration de la variable a

a = 1 // initialisation de la variable a

Lorsque les deux actions sont séparées, la variable existe dès la déclaration mais n'a pas de valeur tant que l'initialisation n'a pas eu lieu. On dit que la variable est non-définie puisque le processus de définition n'est pas complet. La variable vaut donc undefined.

Les types de variable

Nous avons vu que les variables possèdent un nom, une valeur et que nous pouvons utiliser des mot-clés précis pour les définir. Les variable possèdent aussi un type.

Le type est une façon de regrouper les variables similaires et de faire des actions sur la variable sans vraiment savoir ce qu'il y aura dans celle-ci lorsque nous écrivons le code.

Par exemple, si j'ai deux variables qui sont de type "nombre entier", je sais que je peux les additionner même si je ne sais pas quelle sera la valeur exacte qui y sera stockée.

Plusieurs types de variables existent en JavaScript. Dans l'exemple des 3 variables a, b et c déjà cité, les variables stockent chacune un chiffre. Elles sont donc de type Number.

Les variables peuvent être d'un des types suivant :

• String : Une chaine de caractères (± du texte)
• Boolean : Une variable qui ne peut prendre que deux valeurs : vrai ou faux.
• Array : Un tableau de valeurs quelconques.
• Object : Un objet.
• Number : Un nombre. Il peut être entier, décimal, positif, négatif.
• Symbol : Une donnée unique et non-modifiable.

En JavaScript, nous ne définissons pas explicitement le type d'une variable. Aussi le type d'une variable peut changer dans le temps. Mais cela ne veut pas dire qu'il n'y a pas de typage des variables.

Le moteur JavaScript est capable de deviner (ou "inférer") le type d'une variable à partir de sa valeur. Cette fonctionnalité donne beaucoup de flexibilité aux développeurs mais s'il veut être sûr d'un type il doit le vérifier lui même.

Pour vérifier le type d'une variable nous pouvons utiliser les deux mot-clés typeof et instanceof, ainsi que plusieurs méthodes fournies par les objets natifs de JavaScript.

typeof a retournera le type de la variable a parmi les choix suivants :

• string
• number
• boolean
• function
• object
• symbol
• undefined

Comme vous avez surement pu le remarquer, il n'y a pas array dans la liste. En effet, Array est un object. JavaScript retourne donc object comme pour tous les autres objets.

Avec le mot clé instanceof, il est possible de vérifier qu'un objet "hérite d'un autre objet" ou plus littéralement si l'on retrouve le prototype d'un objet dans la chaîne de prototype d'un autre objet.

class ClassC {}
const objO = new ClassC()

objO instanceof ClassC // true

L'exemple est assez simple et parle de lui même.

Je vous ai parlé des méthodes fournies par le langage. Au nombre de celles-ci vous allez retrouver : Array.isArray(), Number.isInteger(), etc. Ces méthodes prennent en paramètre la valeur à tester et retournent true ou false en fonction de la véracité de l'assertion.

En règle général, la bonne pratique est de prioriser ces méthodes lorsqu'elles existent au lieu d'utiliser les autres mot-clés ou même vos solutions faites maison.

La déclaration

La déclaration d'une variable en JavaScript se fait via les mot-clés var, let et const comme nous l'avons vu plus haut. Au départ, on peut être perdu de devoir choisir entre trois mot-clés différents mais rassurez-vous ils ont bien un intérêt. Nous allons les découvrir ensemble.

Le mot-clé var

Il s'agit du mot-clé historique. Pendant très longtemps il n'y a eu que lui.

Ce mot-clé déclare une variable dans son contexte d'exécution, c'est à dire que la variable ne sera disponible que dans la fonction qui contient sa déclaration.

// a n'existe pas

function context() {
  var a = 0
  
  // a existe
}

// a n'existe pas

Si la variable est créée dans le scope (ou contexte) global, c'est-à-dire en dehors de toute fonction, le mot-clé var crée en fait cette variable dans l'objet global qui est window dans un navigateur et global sur un serveur NodeJS.

typeof window.a === 'undefined' // retourne true
typeof window.b === 'undefined' // retourne true

var a = 0

typeof window.a === 'undefined' //retourne false
typeof window.b === 'undefined' // retourne true

Le mot-clé let

Apporté par la version ES2015 de JavaScript, let est un mot-clé qui vise à résoudre les quelques problèmes de var.

// a n'existe pas
// b n'existe pas

function context() {
  var a = 0
  // b existe mais vaut undefined
  
  if (true) {
      var b = 0
      
      // a existe
      // b existe et vaut 0
  }
  
  // a existe
  // b existe et vaut 0
}

// a n'existe pas
// b n'existe pas

En fait, Javascript va faire ce que l'on appelle l'hoisting. Il va lire tout le code de la fonction, voir que l'on veut définir la variable b dans le if et déplacer sa déclaration en haut de la fonction context mais laisser son initialisation dans le if.

Ce comportement, qui diffère de celui des autres langages de programmation, fait que la variable b existe même avant le if. Elle a la valeur undefined jusqu'a son initialisation dans le if. Elle vaut ensuite 0.

Cela pose souvent des problèmes avec le code asynchrone et rend le code plus compliqué à comprendre et débugger.

Pour répondre à cette problèmatique, la version ES2015 de JavaScript a apporté le mot-clé let.

// a n'existe pas
// b n'existe pas

function context() {
  let a = 0
  // b n'existe pas
  
  if (true) {
      let b = 0
      
      // a existe
      // b existe et vaut 0
  }
  
  // a existe
  // b n'existe pas
}

// a n'existe pas
// b n'existe pas

Le mot-clé let permet de déclarer une variable et de la limiter au scope englobant.

Un scope est souvent représenté avec des accolades en JavaScript. Cela veut dire que toutes les structures de code qui possèdent des accolades définissent un scope et que les variable créées à l'intérieur de ceux-ci n'existent plus à l'extérieur.

Depuis que let existe, la bonne pratique est de l'utiliser par défaut à la place de var. Vous pourrez toujours le changer en var si la situation l'exige.

Le mot-clé const

La version ES2015 de JavaScript a aussi apporté le mot-clé const qui fonctionne quasiment comme le mot-clé let à ceci près qu'il permet la modification de la variable uniquement au moment de la déclaration de celle-ci.

const veut dire "constante". En d'autre terme, c'est une variable qui ne change jamais. La valeur que vous donnerez à une constante sera la seule qu'elle stockera jusqu'à sa destruction.

const a = 0

a = 1 // Uncaught TypeError: Assignment to constant variable.

Notez que j'ai dit qu'il "permet la modification de la variable uniquement au moment de la déclaration de celle-ci" et non qu'il "permet la modification de la variable uniquement au moment de l'initialisation de celle-ci".

C'est parce que vous ne pouvez pas séparer la définition en deux étapes comme pour les variables normales. C'est bien au moment de la déclaration et uniquement à ce moment que vous pouvez initialiser les constantes.

const a // Uncaught SyntaxError: Missing initializer in const declaration

Une bonne pratique de développement est de limiter au maximum les possibilités de modifications de variables. Ainsi, il est bien de préférer l'utilisation de const à celui de let. Vous pourrez toujours le changer en let si la situation l'exige.

Si nous devions donner une priorité aux mot-clés de déclaration de variables ce serait celle-ci : const > let > var.

Attention cependant a un piège commun en JavaScript, les pointeurs et les références n'existent pas explicitement mais leur héritage est bien là. Les objets sont "passés par référence". Le mot-clé const crée une référence immuable vers une valeur.

const obj = { nom: "Robert" }

obj = { nom: "Jean" } // Uncaught TypeError: Assignment to constant variable.

obj.name = "Jean"

console.log(obj) // { nom: "Jean" }

Le mot-clé const empêche que nous modifions la référence vers un objet. Il n'est donc effectivement pas possible de réaffecter une constante contenant un objet mais cela ne garantit pas que les attributs de l'objet soit non-modifiables.

Si vous souhaitez empêcher que les attributs d'un objet soit modifiés ultérieurement, utilisez la méthode Object.freeze().

const obj = Object.freeze({ nom: "Robert" })

obj = { nom: "Jean" } // Uncaught TypeError: Assignment to constant variable.

obj.name = "Jean"

console.log(obj) // { nom: "Robert" }

Les noms de variables

En JavaScript, il est possible de nommer une variable en utilisant les lettres majuscules ou minuscules, les chiffres et le _. Le nom ne peut pas commencer avec un chiffre.

Vous admettrez que c'est assez laxiste comme règle. Le développeur n'est pas trop gêné dans sa créativité. Ceci étant dit, je pense que les développeurs devraient s'imposer eux-même quelques règles lorsqu'il s'agit de nommer des variables.

La casse

La casse est le fait d'utiliser un caractère en majuscule ou en minuscule. En programmation il existe plusieurs normes : le lowerCamelCase, le UpperCamelCase, le kebab-case, le snake_case, le SCREAMING_SNAKE_CASE, etc. Souvent les communautés de développeurs autour d'un même langage choisissent de suivre une même norme.

Par exemple, la communauté Python aime énormément le Snake Case tandis que d'autres communautés choisiront le Camel Case. D'autres encore font leur choix en fonction de l'élément qu'ils souhaitent créer : le Upper Camel Case pour les objets, le Lower Camel Case pour les variables de type scalaires ou primitives et le Screaming Snake Case pour les constantes.

Je ne vais pas prendre position ici mais voici trois principes qui peuvent vous aider à nommer vos variables :

1. S'il y a un standard dans votre langage, suivez-le.
2. Une fois que vous avez choisi votre style, gardez le tout au long du projet.
3. Soyez consistent dans tout le projet, qu'il y ait 1 ou 30 développeurs !

Le sens

Le sens est important lorsque nous nommons des variables. Il permet d'exprimer ce que contient la variable en fonction du contexte. Un nom de variable qui a du sens permet de rendre le code plus lisible, plus compréhensible et de limiter le besoin en documentation/commentaires.

Evitez les noms du type a, cpt, zejqdhalkja. Aussi les noms trop génériques ou qui peuvent vouloir dire plusieurs choses en fonction de qui les lit (comme Processor ou Manager) sont de piètre qualité.

Utilisez des noms de variable prononçables. Des noms prononçables demandent moins d'effort de compréhension à notre cerveau d'humain. Si je devais citer Clean Code de Uncle Bob qui est – pour moi – une référence sur le sujet, je citerais ceci :

Humans are good at words. A significant part of our brains is dedicated to the concept of words. And words are, by definition, pronounceable. [...] So make your names pronounceable.

Evitez les schémas mentaux. Lorsque vous essayez de comprendre un bout de code, vous ne voulez pas avoir à vous poser ce genre de question : "Attends, r c'est quoi encore ?". Vous faites déjà le travail mental de comprendre du code, si vous rajoutez à cela la compréhension de chaque nom de variable ou de fonction... Et il faut aussi retenir tout cela.

Il y a encore beaucoup de conseils simples que l'on peut appliquer concernant le nommage des variables et je ne vais clairement pas tous les citer ici. Je ne pense pas non plus que je puisse être totalement exhaustif sur ce sujet.

Par contre, je vous conseille fortement de lire Clean Code de Uncle Bob ou au moins — pour rester dans le sujet — les 14 pages qu'il a écrit concernant le nommage. Le chapitre s'appelle "Meaningful names".

Voilà les bases (et un peu plus) à avoir pour pouvoir utiliser les variables. Il y a bien-sûr encore beaucoup à apprendre sur le sujet mais c'est un bon début.

Pour en savoir plus sur les variables, vous pouvez jeter un œil à l'article sur les pointeurs en C et C++. Même si vous ne faites pas de C, cet article vous apportera des compléments d'information sur le fonctionnement des variables.

Pour aller plus loin :

• Ubiquitous Language : utilisez un langage métier et commun pour nommer les différentes entitées de votre code
• La décomposition en JavaScript : découvrez une manipulation spécifique aux variables de type Array ou Object.

Si vous avez des questions ou des remarques/conseils, n'hésitez pas à laisser un commentaire plus bas ! Je serais ravis de vous lire. Et si vous aimez l'article, n'oubliez pas de le partager avec vos amis.