Reconnaître les types et construire des expressions

Dans un gestionnaire de tâches, un nom est du texte, un nombre de tâches est une quantité et leur état peut être vrai ou faux. Si vous mélangez ces valeurs sans savoir ce qu’elles représentent, vous risquez d’obtenir un calcul inattendu ou un message mal formé. Dans cette leçon, vous allez reconnaître les types JavaScript et composer des expressions utiles pour le projet.

Vous avez déjà préparé js/main.js comme module et utilisé const et let dans les leçons précédentes. Ici, vous allez remplacer les exemples temporaires de ce fichier par un petit scénario de calcul, puis observer les valeurs obtenues dans la console du navigateur.

Reconnaître les types de valeurs

Une valeur de type string représente du texte, comme le nom d’une tâche. Une valeur de type number sert notamment à compter ou à calculer. Le type boolean ne possède que deux valeurs, true et false : il convient, par exemple, pour indiquer si une tâche est terminée.

undefined signifie qu’aucune valeur n’a été attribuée à une variable. null est une valeur explicite qui indique une absence de valeur. Ces deux cas ne veulent donc pas dire exactement la même chose : dans le projet, vous pourrez rencontrer une valeur encore non renseignée ou une absence volontaire.

const nomTache = "Préparer la réunion";
const nombreDeTaches = 4;
const tacheTerminee = false;
let prochaineTache;
const tacheSelectionnee = null;

console.log(typeof nomTache);
console.log(typeof nombreDeTaches);
console.log(typeof tacheTerminee);
console.log(prochaineTache);
console.log(tacheSelectionnee);

string
number
boolean
undefined
null

L’opérateur typeof indique le type de la valeur placée après lui. Pour ces premières vérifications, il affiche respectivement string, number et boolean. Les deux dernières instructions affichent les valeurs elles-mêmes : undefined pour la variable sans valeur attribuée et null pour l’absence indiquée explicitement.

Construire des expressions

Une expression combine des valeurs et des opérateurs pour produire un résultat. Les opérateurs arithmétiques habituels sont + pour additionner, - pour soustraire, * pour multiplier et / pour diviser. Vous pouvez stocker le résultat dans une variable afin de le réutiliser ou de l’afficher.

const nombreDeTaches = 4;
const nombreDeTachesTerminees = 1;
const nombreDeTachesRestantes = nombreDeTaches - nombreDeTachesTerminees;
const progressionEnPourcentage = nombreDeTachesTerminees / nombreDeTaches * 100;

console.log(nombreDeTachesRestantes);
console.log(progressionEnPourcentage);

3
25

Il reste trois tâches, et une tâche terminée sur quatre correspond à une progression de 25 %. Cet exemple applique déjà une formule qui servira au gestionnaire : diviser le nombre de tâches terminées par le nombre total, puis multiplier par 100. Le cas d’une liste vide sera traité lorsque vous calculerez la progression à partir des données du projet.

Pour assembler du texte, vous pouvez concaténer des chaînes avec +. Une autre possibilité, généralement plus lisible lorsque le message contient plusieurs variables, consiste à utiliser une chaîne entourée d’accents graves et à insérer les valeurs avec ${...} : c’est l’interpolation.

const nombreDeTaches = 4;
const nombreDeTachesTerminees = 1;
const resumeParConcatenation = nombreDeTachesTerminees + " tâche terminée sur " + nombreDeTaches;
const resumeInterpole = `${nombreDeTachesTerminees} tâche terminée sur ${nombreDeTaches}`;

console.log(resumeParConcatenation);
console.log(resumeInterpole);

1 tâche terminée sur 4
1 tâche terminée sur 4

Dans la première expression, + assemble du texte plutôt qu’il ne calcule une somme, car l’expression contient des chaînes. L’interpolation produit le même message tout en séparant clairement les morceaux de texte des valeurs à insérer. Pour le résumé de progression, cette forme rend le résultat plus facile à relire.

Convertir une valeur simplement

Une valeur reçue sous forme de texte ne devient pas automatiquement un nombre pour tous les usages. Vous pouvez demander une conversion avec Number() ; inversement, String() produit une chaîne à partir d’une valeur. Faites cette conversion au moment où vous en avez besoin, plutôt que de supposer qu’un texte composé de chiffres est déjà un nombre.

const texteNombreDeTaches = "4";
const nombreConverti = Number(texteNombreDeTaches);
const resumeNumerique = nombreConverti + 1;
const texteProgression = String(25);

console.log(typeof texteNombreDeTaches);
console.log(typeof nombreConverti);
console.log(resumeNumerique);
console.log(texteProgression);

string
number
5
25

La valeur "4" est une chaîne, tandis que Number("4") donne le nombre 4 ; l’addition suivante produit donc 5. De son côté, String(25) produit le texte "25". Vous savez maintenant distinguer les valeurs, calculer une expression et construire un résumé sans confondre texte et nombres.

À retenir

• Une chaîne est de type string, un nombre de type number et une valeur vrai/faux de type boolean.
• undefined indique qu’aucune valeur n’a été attribuée ; null exprime une absence de valeur explicite.
• Les opérateurs arithmétiques produisent des résultats numériques ; le signe + peut aussi concaténer des chaînes.
• L’interpolation avec des accents graves permet d’insérer des valeurs dans un message.
• Number() et String() convertissent simplement une valeur vers un nombre ou une chaîne.

Dans la prochaine leçon, vous comparerez des valeurs pour déterminer si une tâche est terminée ou si deux données correspondent.