> ## Content Index
> Fetch the complete content index at: https://mindsers.blog/llms.txt
> Use this file to discover other available public pages before exploring further.

# J'apprends le JavaScript : les variables
- URL: https://mindsers.blog/fr/post/apprend-javascript-variables/
- Published: 2019-09-04T04:00:00.000Z
- Updated: 2023-11-20T16:33:58.000Z
- Author: Nathanaël Cherrier
- Tags: javascript, coding-tech, beginner, #lang-fr

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 :

```js
// 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.

```js
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.

```js
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.

```js
// 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.

```js
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`.

```js
// 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
```

`var` ne fait pas de différence entre le scope de la fonction et le scope du `if`

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`.

```js
// 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
```

`let` limite l'existance des variables au scope englobant

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.

```js
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.

```js
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**.

```js
const obj = { nom: "Robert" }

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

obj.name = "Jean"

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

Un objet n'est pas immuable, sa référence l'est

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()`.

```js
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](https://fr.wikipedia.org/wiki/Sensibilit%C3%A9%5F%C3%A0%5Fla%5Fcasse?ref=mindsers.blog) 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](https://mindsers.blog/fr/post/les-meilleurs-commentaires-ne-secrivent-pas/).

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](http://amzn.to/2dD6zcB?ref=mindsers.blog) 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](http://amzn.to/2dD6zcB?ref=mindsers.blog) 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++](https://mindsers.blog/fr/post/pointeurs-c-cplusplus/). 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](https://mindsers.blog/fr/post/ubiquitous-language/) : utilisez un langage métier et commun pour nommer les différentes entitées de votre code
- [La décomposition en JavaScript](https://mindsers.blog/fr/post/decomposition-et-destructuration-en-javascript/) : découvrez une manipulation spécifique aux variables de type `Array` ou `Object`.