Var

Une variable est un conteneur 📦 permettant de stocker une valeur afin d'y accéder plus tard. Cette valeur peut-être une chaîne de caractères (string), un nombre, un booléen (boolean), etc.

Définition

Pour en définir une, il suffit d'utiliser le mot réservé var suivi du nom que nous souhaitons lui attribuer. (Ce nom sera ensuite utilisé pour y faire référence).

Par exemple:

var astronaute;

• var indique qu'une variable s'apprête à être déclarée.

• astronaute correspond au nom donné à la variable.

Sur cette page 📄, ouvrez l'inspecteur 🕵️ de votre navigateur. Pour ce faire, faite un clic droit et sélectionner l'option Inspecter ou utiliser le raccourcis clavier ctrl+i. Ensuite, via la console, créer la variable astronaute comme dans l'exemple de code ci-dessus ☝️.

À partir de ce moment, la variable astronaute est définie globalement. Il est donc possible d'y accéder en l'appelant par son nom astronaute. La console du navigateur retournera alors la valeur qui lui est attribuée, soit: undefined puisqu'aucune valeur n'a encore été définie.

Initialisation

Afin de stocker une valeur dans une variable, il faut séparer son nom de sa valeur en utilisant le symbole =.

Par exemple, tapez la ligne suivante dans votre console.

var astronaute = "Chris Hadfield";

Dès lors, si vous appelez la variable astronaute, elle vous retournera désormais la chaine de caractères: "Chris Hadfield".

Modification

Une fois initialisée, il est possible de modifier la valeur d'une variable en l'appelant et en lui donnant une nouvelle valeur.

Par exemple, encore dans la console, tapez:

astronaute = "🇨🇦👨🏻‍🚀"

Si vous appelez la variable astronaute, elle ne vous retournera plus "Chris Hadfield", mais bien: "🇨🇦👨🏻‍🚀". 

Contexte (scope)

Par défaut, si une variable n'est pas définie dans une fonction, son contexte est global. Il est donc possible d'y accéder partout simplement en l'appelant par son nom (astronaute) ou encore en utilisant l'objet window (window.astronaute).

Les deux commandes retourneront "🇨🇦👨🏻‍🚀", puisqu'elles sont équivalentes.

Cependant, le contexte d'une variable définie à l'intérieur d'une fonction se limite à celle-ci. Donc si vous tapez la fonction suivante

function creerStation() {
  var station = "Station spatiale internationale";
  console.log(station);
}

creerStation();

Vous obtiendrez "Station spatiale internationale" comme attendu. Cependant, si vous tapez:

function creerStation() {
  var station = "Station spatiale internationale";
}

creerStation();

console.log(station);

Vous obtiendrez un message d'erreur vous informant que la variable station n'existe pas. Ce qui est normal, puisqu'elle a été définie dans la fonction creerStation() {...} et que vous tentez d'y accéder à l'extérieur de celle-ci. Il s'agit donc d'une variable dite locale, d'on le contexte est limité à sa fonction.

Si une variable est définie à l'extérieur d'une fonction, il est quand même possible d'y accéder à partir de la fonction et de la modifier.

Par exemple, si vous tapez les lignes suivantes dans la console:

var station;

function creerStation() {
  station = "Station spatiale internationale";
}

creerStation();

console.log(station);

Vous obtiendrez quand même "Station spatiale internationale", puisque la variable a été initialisée à l'extérieur de la fonction. Son contexte est donc global et non local.

Fuite (leak)

Comme mentionné précédemment, les variables ont un contexte global si elles ne sont pas définies à l'intérieur d'une fonction. Donc si vous tapez les lignes suivantes dans la console:

var poidsISS = 420000; // kg
var poidsVoiture = 1400; // kg

if (poidsISS > poidsVoiture) {
  var comparable = poidsISS / poidsVoiture; 
  console.log(`Le poids de l'ISS = ${comparable} 🚘`);
}

Vous obtiendrez "Le poids de l'ISS = 300 🚘". Cependant, si vous tapez dans la console comparable, vous obtiendrez 300 et non un message d'erreur 🤔.

On pourrait croire à tort que le contexte de la variable est limité aux accolades du if {...}. Cependant, le contexte d'une variable se trouvant à l'intérieur ne se trouve aucunement affecté par celle-ci. Donc dans le cas présent, la variable est quand même globale.