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.