Tutoriel : Les variables

Dans cet article, nous verrons la partie la plus élémentaire du JavaScript : les variables.

Les variables en JavaScript ne sont pas typés, c'est-à-dire qu'elles peuvent contenir toutes sortes d'informations comme une chaîne de caractères, un nombre entier, une décimale, un tableau...

Pour déclarer une variable, on utilise le mot clé var :

var lastName;

Le nom d'une variable est libre, mais ne peut comment par un nombre et peut être déclaré sans avoir défini de valeur au préalable. Dans ce cas, sa valeur par défaut est undefined.

Par convention, quand une variable possède plusieurs mots, on utilisera le principe d'écriture qui est le lowerCamelCase, autrement dit que l'on écrira notre variable sans espace et en mettant la première lettre des mots en majuscules, sauf le premier mot.

Vous remarquerez aussi l'utilisation d'un point virgule à la fin de ma déclaration. En JavaScript, le point virgule indique au moteur que l'instruction est terminée et qu'il peut passer à la suivante.

Il est évidemment possible de fournir une valeur par la suite de cette manière :

lastName = 'Smith';

Pour déclarer la variable et l'initialiser en même temps on écrira :

var lastName = 'Smith';

Si jamais vous avez besoin de définir plusieurs variables, vous avez la possibilité de le faire sur la première déclaration, en séparant chaque variable par une virgule :

var lastName = 'Smith',
    firstName = 'John';

Il faut bien faire la différence entre une variable non déclarée et une variable non définie !
Une variable non déclarée est une variable qui n'a pas été... déclarée ? En revanche, une variable non définie est une variable déclarée, mais à laquelle aucune valeur n'a été attribuée.

Il est aussi possible de déclarer une variable en utilisant le mot clé let :

let lastName = 'Smith';

Tout ce qui est dit pour var est valable pour let, la différence est que vous pouvez redéclarer une variable en var portant déjà un nom existant, elle sera tout simplement écrasée par la nouvelle déclaration, ce qui est impossible avec let :

var lastName = 'Smith';
var lastName = 'Doe';
console.log(lastName); // Résultat : Doe

let lastName = 'Smith';
let lastName = 'Doe';
console.log(lastName); // Résultat : Erreur !

Vous pouvez aussi utiliser le mot clé const pour déclarer une variable :

const lastName = 'Smith';

const est différent de var et let, car déclarer une variable avec ce mot clé le rend seulement accessible à la lecture. Autrement dit, sa valeur ne pourra être réaffectée ultérieurement. Il est important d'affecter une valeur à sa déclaration avec const.

Pour voir la différence entre ces mots clés, je vous laisse lire l'article sur la portée des variables.

Types de variables

En JavaScript, il existe sept types de variables :

let variable; //undefined
let variable = null; // null
let variable = false; //boolean
let variable = 'Ma valeur'; //string
let variable = 12; //number
let variable = []; // array
let variable = {}; // object

Le type "undefined"

C'est une variable déclarée pour laquelle aucune valeur n'a été initialisée.

let variable; //undefined

Le type "null"

null n'est rien d'autre qu'une valeur précisant à JavaScript que la variable est vide.

let variable = null; // null

JavaScript définit null comme identique à undefined :

console.log(null == undefined); // true

Le type "boolean"

Le type booléen possède deux valeurs : true et false.

let ok = true;
let nope = false;

JavaScript est capable de convertir un autre type de variable en booléen, qui peut ensuite être utilisé lorsque l'on applique des conditions :

String :
Non vide = true
Vide = false
Number :
Nombre non nul = true
Zéro ou nul = false
NaN (Not A Number)
Object :
Non vide = true
Vide = false
Undefined
undefined

Le type "string"

Le type string (chaîne de caractères) est une séquence allant de zéro à plusieurs caractères, entourée de guillemets simples ou doubles :

let message = '';
let chaine = 'Bonjour';
let phrase = 'Tout va bien ?';

Cependant, soyez prudent lors de l'utilisation des guillemets, notamment les guillemets simples, car si vous écrivez une phrase avec une apostrophe, une erreur sera générée :

let phrase = 'Ils n'étaient pas arrivés'; // Erreur

L'apostrophe est alors considérée comme le guillemet de fermeture ; tout ce qui se trouve après sera hors de l'initialisation de la variable, ce qui produira une erreur.

Pour résoudre ce souci, vous devez utiliser un caractère d'échappement pour faire comprendre au programme qu'il ne s'agit pas du guillemet de fermeture. Le caractère en question est un antislash que vous placerez avant l'apostrophe :

let phrase = 'Ils n\'étaient pas arrivés';

Il est possible aussi d'associer deux variables de type string ensemble.
On appelle cette méthode une concaténation.

let phrase = 'Tout va bien ?';
let nouvelle_phrase = phrase + ' Oui merci :)';

console.log(nouvelle_chaine); // Tout va bien ? Oui merci :)

L'opérateur + associera les deux chaînes de caractères afin de n'en former plus qu'une seule. La même chose est possible avec deux variables.

Il est possible aussi de concaténer en utilisant la syntaxe ${ } :

let phrase = 'Tout va bien ?';
let nouvellePhrase = `${phrase} Oui merci :)`;

console.log(nouvellePhrase); // Tout va bien ? Oui merci :)

Bien entouré la chaine de caractères par des accents grave et non pas d'apostrophes doubles ou simples !

Le type "number"

Pour déclarer une variable de type nombre, vous n'avez pas besoin de guillemets et vous devez même éviter d'en mettre, sinon celle-ci sera considérée comme une chaîne de caractères :

let number = 100; // number
let number = '100'; // string

Dans les nombres, il existe aussi les décimales ou float. Si vous avez besoin de déclarer un nombre à virgule, vous utiliserez un point à la place :

let nombre = 12.4; // 12.4
let nombre = .67; // 0.67

NaN (Not a Number)

JavaScript possède une valeur numérique spéciale : NaN.
Elle est généralement utilisée pour indiquer une condition d'erreur pour une fonction qui doit renvoyer un nombre valide.

let total = 12 + 'hello'; // NaN

Le type "array"

Les tableaux sont sensibles à des listes. De plus, il permet de stocker plusieurs informations comme une chaîne de caractère, un nombre, une décimale, un booléen...

let tableau = ['hello', 34, 56.6, true, 'bye ;)'];

Chaque élément reçoit un "index" déterminé automatiquement. Celui-ci commence à zéro ! On utilise cet "index" pour lire un élément du tableau :

console.log(tableau[1]); // 34

Pour lire la totalité du tableau, on utilisera une boucle.

Le type "object"

L'objet est une collection de propriétés définies par un système de clés et de valeurs, le tout encerclé des accolades :

let object = {
  key: value
}

Par convention, les clés doivent être écrites en "camelCase" pour répondre à un identifiant valide JavaScript.
Par exemple, "lastName" est un identifiant valide, mais si vous êtes obligés d'écrire "last-name", alors il faudrait entourer cette clé de guillemets doubles pour que cela fonctionne, notamment à cause du tiret !

let object = {
  lastName: "Martine",
  "last-name": "Smith"
}

Vous pouvez insérer autant de valeurs que vous le souhaitez en les séparant par une virgule comme dans l'exemple ci-dessus.

L'avantage de l'objet est la possibilité d'organiser les valeurs de celui-ci pour une meilleure lecture :

let personnage = {
  lastName: "Doe",
  firstName: "John",
  address: {
    city: "San Andreas",
    country: "USA"
  }
}

L'affichage des éléments contenus s'en retrouve facilité, car retrouver uniquement les clés voulues et de les séparer par un point s'il y en a plusieurs, pour afficher la valeur souhaitée :

console.log(personnage.firstName); // John
console.log(personnage.address.city); // San Andreas