Apprenez à programmer avec JavaScript

Le type d'une variable ou d'une constante est tout simplement le genre des données qu'elle enregistre. En JavaScript, il y a trois types primitifs principaux :

• number (nombre) ;

• string (chaîne de caractères) ;

• boolean (valeur logique).

Les types primitifs sont les briques de base de chaque structure de données en JavaScript. Peu importe la complexité finale de votre application, à sa base se trouveront ces trois types primitifs.

Bien qu'il ne soit pas nécessaire de déclarer le type d'une variable en JavaScript (plus de détails à ce sujet un peu plus tard), il est important de comprendre leur existence et leur importance.

Toutes les variables que vous avez créées jusqu'à maintenant dans ce cours étaient du type  number  (nombre, en français).  Comme vous l'avez vu, elles peuvent être manipulées de nombreuses façons.

Les variables de type   number  peuvent être positives ou négatives. Elles peuvent aussi être des nombres entiers (1, 2, 3, etc.) ou décimaux (1,4 ; 67,34 ; etc.).

Attention à l'arithmétique en virgule flottante !

L'arithmétique en virgule flottante peut déclencher des erreurs très gênantes dans tous les langages de programmation :

let integerCalculation = 1 + 2;  // donne 3
let weirdCalculation = 0.1 + 0.2;  // on attend 0.3, réponse réelle 0.30000000000000004

Chaque fois que c'est possible, utilisez plutôt des calculs entiers (pour le calcul de prix, vous pouvez par exemple calculer en centimes, et non pas en euros ou en dollars).

Appréhendez les valeurs logiques

Les valeurs logiques (booleans) sont le plus simple des types primitifs : elles ne peuvent avoir que deux valeurs,   true  ou   false  (vrai ou faux). Elles s'utilisent dans toutes sortes de cas : pour indiquer si un utilisateur est connecté ou non, si une case est cochée ou non, ou si un ensemble de conditions particulières est réuni.

Les variables de type boolean peuvent avoir une des deux valeurs   true  ou   false  .

let userIsSignedIn = true;
let userIsAdmin = false;

Les chaînes de caractères (chaînes, ou strings, en anglais) sont la façon d'enregistrer du texte dans des variables JavaScript. On peut enregistrer dans une variable de type string  n'importe quelle chaîne de caractères, allant d'une seule lettre à un très grand nombre de lettres (plus de 134 millions, même dans des navigateurs anciens).

Les variables de type string sont encadrées par des guillemets simples ou doubles –'  ou   "  :

let firstName = "Will";
let lastName = 'Alexander';

Les chaînes peuvent aussi être concaténées (ajoutées à la fin l'une de l'autre) par l'opérateur   +  :

let wholeName = firstName + " " + lastName;  // valeur: "Will Alexander"

Il est possible depuis quelques années d’utiliser une nouvelle écriture qui simplifie la concaténation des variables et des chaînes de caractère : la string interpolation. Pour créer une string interpolation on écrit du texte encadrée par le signe   `  et si on veut injecter une variable dans ce code on utilise l’expression  ${maVariable}. 

Un exemple vaut mieux que de longs discours :

const myName = `Alexander`;
const salutation = `Bienvenue sur mon site ${myName}!`;
console.log(salutation);   //retournera “Bienvenue sur mon site Alexander!” 

Pratiquez les types de données

Entraînez-vous sur les types primitifs nombres, chaînes et valeurs logiques, avec cet exercice CodePen. 

Maintenant que vous avez terminé le composant pour la série, il est temps de travailler sur le composant pour les épisodes individuels.

Ce composant affichera le titre de l'épisode, sa durée en minutes, et si l'utilisateur a déjà regardé l'épisode ou non.

1. Créez une variable nommée  episodeTitle  qui contient une chaîne de caractères correspondant au titre de votre épisode (employez votre créativité !).

2. Créez une variable appelée  episodeDuration  qui contient un nombre correspondant à la durée de votre épisode en minutes.

3. Enfin, créez une variable booléenne nommée   hasBeenWatched  qui indique si l'utilisateur a déjà regardé l'épisode ou non.

Vérifiez si le composant fonctionne correctement. N'hésitez pas à modifier vos valeurs pour vérifier que le composant réagit comme prévu. N'oubliez pas, votre code ira entre les commentaires "===" sur l'exercice.

Solution

Vous avez terminé ?  Voici un nouveau CodePen avec une solution à l’exercice.

JavaScript est un langage dit à types dynamiques et à typage faible. Cela signifie que vous pouvez initialiser une variable en tant que nombre, puis la réaffecter comme chaîne, ou tout autre type de variable. Ceci offre une grande souplesse, mais peut aussi conduire à un comportement inattendu si vous opérez sans précaution.

La morale de l'histoire : prenez garde aux types de vos variables, et en général, utilisez des constantes chaque fois que c'est possible.

Dans ce chapitre, vous avez découvert les trois principaux types de données primitifs en JavaScript :

• number (nombre) ;

• boolean (valeur logique) ;

• string (chaîne de caractères).

Il existe d'autres types de données plus complexes.

Nous commencerons d'ailleurs à nous intéresser à un type très utile dans le chapitre suivant : les objets.

Techniquement, il y a trois autres types de données primitifs dans JavaScript :   null  ,   undefined  et   symbol  . Vous croiserez les deux premiers dans ce cours, mais les symboles sortiraient du sujet. Pour en savoir plus, consultez les docs MDN pour les types.