Résumé des types de données — typeof et un tableau de référence rapide

Les valeurs JavaScript couvrent chaînes, nombres, booléens, tableaux, objets, null, undefined, Map, et Set. En vrai travail, tu vérifies si une valeur venue d'un formulaire ou d'un serveur est du type que tu attendais avant de la traiter.

Cet article démêle tout ça sous un seul angle — le type — en résumant ce que renvoie typeof et la bonne façon de vérifier chaque type.

Les types se partagent en 7 primitives et Object

Connaître le type d'une valeur décide ce que tu peux en faire. Une chaîne te donne length et slice ; un nombre te laisse calculer ; un tableau te donne push.

Se tromper de type en traitant une valeur reçue, en revanche, et undefined ou NaN peuvent glisser jusqu'au bout sans que tu le remarques.

Les valeurs de JavaScript se partagent en primitives (7 genres : number, string, boolean, null, undefined, symbol, et bigint — des valeurs qui ne sont ni des objets ni des tableaux) et Object (une valeur qui garde des propriétés ; les tableaux, Map, et Set en font tous partie aussi).

Ce cours a couvert les 5 premières primitives et Object.

Des 2 restantes, symbol (une valeur pour créer une clé unique qui ne se duplique jamais) sert quand tu as besoin d'un genre spécial de clé, et bigint (une valeur dédiée à manipuler des entiers extrêmement grands) sert pour des entiers trop grands pour que Number les représente précisément. Aucun des deux n'apparaît dans le cadre de ce cours, donc connaître juste le nom et où il se situe suffit.

L'opérateur qui vérifie le type est typeof. Écris-le devant une valeur, et tu obtiens son type. Ce qu'il renvoie est fixé à 8 genres : "string" "number" "boolean" "undefined" "symbol" "bigint" "object" "function". "function" ne revient que quand tu lui passes une fonction — les fonctions sont couvertes dans la prochaine catégorie.

console.log(typeof "ORD-6033");             // string
console.log(typeof 9800);                   // number
console.log(typeof true);                   // boolean
console.log(typeof undefined);              // undefined

console.log(typeof { orderId: "ORD-6033" });  // object
console.log(typeof [1, 2]);                   // object

// null est une primitive aussi, mais typeof renvoie object
console.log(typeof null);                   // object

Exécute typeof sur 4 valeurs de types mélangés, et vérifie quelle chaîne revient. values est déjà déclaré.

① Affiche le type de chacune des 4 valeurs, une ligne à la fois.

② Joins les 4 types avec « , » et affiche-les sur 1 ligne.

③ Retire les doublons des types listés en ②, et affiche combien de types distincts restent.

(Si tout s'exécute correctement, une explication apparaîtra.)

Les 3 choses pour lesquelles typeof renvoie object — null, tableaux, et objets

Si une valeur venue d'un serveur est un « objet adresse de livraison », un « null pas encore sélectionné », ou un « tableau de produits » change ce que tu en fais ensuite. Mais typeof renvoie le même "object" pour les 3, donc ça ne peut pas servir directement pour cette vérification.

typeof null renvoyant "object" est le comportement de JavaScript depuis ses tout premiers jours. C'est une erreur de spécification connue, mais la corriger casserait du code existant, donc c'est resté tel quel.

Vérifie null directement avec value === null.

Vérifie un tableau avec Array.isArray(value). Ça renvoie true seulement quand tu lui passes un tableau, donc ça distingue les tableaux des objets et de null.

Élimine ces 2 en premier, et tout ce qui reste en "object" est « un objet qui n'est ni un tableau ni null ».

const shipping = null;
const cart = ["Souris"];
const order = { orderId: "ORD-6033" };

// typeof renvoie le même résultat pour les 3
console.log(typeof shipping);      // object
console.log(typeof cart);          // object

// Vérifie null directement avec ===
console.log(shipping === null);    // true

// Vérifie un tableau avec Array.isArray
console.log(Array.isArray(cart));  // true
console.log(Array.isArray(order)); // false

// Est-ce un objet qui n'est ni un tableau ni null ?
console.log(typeof order === "object" && order !== null && !Array.isArray(order));  // true

Élimine null avant de lire son contenu

Fais de typeof value === "object" ta seule condition avant de lire le contenu d'une valeur, et ça s'arrête avec un TypeError dès que value est null. typeof laisse null glisser tout droit, donc vérifie value !== null d'abord, ou utilise le chaînage optionnel, comme dans value?.city.

Trie chaque champ d'un objet réponse venu d'une API par type. response est déjà déclaré.

① Affiche le type de chacun des 4 champs, une ligne à la fois, sous la forme « clé: type ».

② Affiche si items et coupon sont des tableaux, sous la forme « clé: résultat ».

③ Affiche si shipping vaut null.

④ Affiche si coupon est « un objet qui n'est ni un tableau ni null », comme une seule expression enchaînant 3 conditions.

Si une chaîne peut être traitée comme un nombre — Number et Number.isNaN

Une quantité ou un montant venu d'un formulaire ressemble à des chiffres, mais son type est une chaîne. Utilise-la dans un calcul sans vérifier d'abord si elle peut être traitée comme un nombre, et une valeur comme "12px" file directement dans le calcul et produit NaN.

Ce qui est couvert ici n'est pas le type lui-même, mais si ça peut se convertir.

Convertir avec Number(input) et vérifier si le résultat vaut NaN avec Number.isNaN(result) a été couvert dans l'article sur la conversion de type. Ce qui vaut la peine d'être séparé de la vérification de type ici, c'est que c'est une vérification sur le contenu, pas sur le type.

"9800" et "abc" ont le même typeof, "string" — si quelque chose fonctionne comme une quantité ne peut pas se déduire de son type.

Le piège, c'est une chaîne vide. Number("") renvoie 0, pas NaN, donc un champ de formulaire non rempli glisse comme « une saisie valide de quantité 0 ».

Pour rejeter une chaîne vide, vérifie input !== "" avant de convertir.

console.log(Number("9800"));               // 9800
console.log(Number("abc"));                // NaN
console.log(Number(""));                   // 0 (pas NaN)

// Vérifie si le résultat converti est NaN
console.log(Number.isNaN(Number("abc")));  // true
console.log(Number.isNaN(Number("9800"))); // false

// Une chaîne vide glisse comme 0
console.log(Number.isNaN(Number("")));     // false

Juge si 4 saisies venues d'un formulaire peuvent être utilisées comme une quantité. inputs est déjà déclaré.

① Convertis les 4 en nombres, joins-les avec « , », et affiche le résultat.

② Affiche si chaque résultat converti n'est pas NaN, à côté de la saisie, une ligne à la fois, sous la forme « saisie: résultat ».

③ Ajoute une condition qui rejette un champ non rempli, et affiche comment le résultat de la chaîne vide change avec 1 condition contre 2, côte à côte.

Choisir la bonne vérification — un tableau de référence rapide

Il y a plus d'une façon d'écrire une vérification de type. Certains types, typeof seul peut les distinguer, d'autres ont besoin d'une vérification supplémentaire par-dessus ce que renvoie typeof, et si le contenu d'une chaîne fonctionne comme un nombre est une vérification entièrement séparée du type. Choisis la façon d'écrire ça en fonction de ce que tu essaies de confirmer.