JavaScript : Les conversions de type implicites

Il existe deux sortes de conversion de type :

1. Il y a celles que vous demandez. Je veux dire celles que vous programmez. On les appelle les conversions explicites. Par exemple, vous codez un parseInt() pour convertir une chaîne de caractères en un number.
2. Il y a celles que vous ne demandez pas. On les appelle les conversions implicites. Par exemple, vous multipliez "4" * 3 et le résultat est 12, car la chaîne de caractères "4" a été convertie en number. Mais cette fois, c'est l'opérateur multiplier qui en a fait la demande au moteur JavaScript. Ce n'est pas vous !

Donc, comprenez bien ce qui se passe. L'opérateur multiplier travaille sur des number et si les opérandes qui lui sont fournis ne sont pas des number alors, il demande des conversions. Et ceci est valable en JavaScript pour tous les opérateurs. Si le type des opérandes ne convient pas, l'opérateur demande une conversion vers le type qui lui convient.

Vous voyez bien ci-dessous, que la chaîne "4" a pris la valeur numérique 4 et pour cela, elle a été convertie. Ce n'est pas possible autrement.

Alors, vous allez me dire que c'est idiot de prendre une chaîne pour la multiplier par un nombre. Sauf qu'il arrive qu'on le fasse sans s'en rendre compte. Par exemple, supposez que vous fassiez appel à un prompt pour saisir le 4. Donc, vous faites un let x = prompt(), puis vous rentrez votre 4 en tapant sur la touche 4. Donc, vous pensez intuitivement avoir saisi une valeur numérique, donc un number. Maintenant, vous faites un typeof de x et vous constatez que le prompt vous retourne string. Tout se passe comme si vous aviez saisi un "4".

Maintenant si je multiplie mon x par 3. J'obtiens 12. Et je me dis super tout est bien qui finit bien, sauf qu'il y a eu des conversions de type et il faut en être conscient, car la conversion implicite ne fera pas toujours notre affaire.

Justement, prenons un autre exemple. J'ajoute mon x à un 3. Et là, j'obtiens "43". J'aurais pu m'attendre à un 7. Sauf, qu'ici le moteur JavaScript vient de faire une concaténation de chaîne de caractères et pas une addition de number. (* Je détaille le cas de cet opérateur ensuite).

Alors, je vais vous donner un conseil important : NE PERDEZ JAMAIS DE VUE LE TYPE D'UNE VARIABLE. C'est la cause de nombreux bugs.

Dans la suite du tuto, je vais vous montrer les principales situations dans lesquelles vous allez rencontrer des conversions de type implicites.

Dans le vocabulaire des programmeurs, il y a différentes façons de parler de conversion de type :

1. Le terme coercition de type est utilisé pour désigner une conversion de type. Coercition signifie en français action de contraindre. Donc ici, on contraint le type de la variable.
2. Vous pouvez rencontrer aussi le terme de transtypage.
3. Il est fréquent aussi que les programmeurs utilisent un anglicisme. Pour dire qu'ils font une conversion de type, ils disent qu'ils font un cast. Il arrive même, lorsque l'on discute entre programmeurs, que l'on conjugue le mot cast, comme si c'était un verbe de la langue française. Un programmeur peut très bien vous dire, au sujet d'une variable, "caste la en entier" ou bien "caste la en chaîne". Ca fait partie de notre jargon de programmeur.

On a déjà fait la multiplication. On a vu que cet opérateur travaille sur des number et va donc réclamer des number. Cela va être le cas pour les opérateurs suivants :

1. Pour la division "4" / 3 donne 1.3333.
2. Pour la soustraction "4" - 3 donne 1. Si vous faites "4" - "3" c'est pareil, il convertit les deux.
3. Pour la division euclidienne (le modulo) "4" % 3 donne 1 (le reste de la division euclidienne de 4 par 3 vaut 1).

Il faut que je précise une chose, c'est que la chaîne "4" est convertie dans le number 4 parce que dans ce cas le moteur comprend ce qu'on lui dit et est capable de faire la conversion. Si j'écris "quatre" - 3 alors là, il ne comprend plus et il retourne NaN (Not a Number).

L'opérateur d'addition est un opérateur particulier. Il peut faire soit l'addition de number, soit la concaténation de chaînes de caractères c'est-à-dire de string. On dit que c'est un opérateur surchargé. Pour choisir l'opération qu'il va faire, il se base sur le type des opérandes qui lui sont fournis. Trois cas de figures peuvent se présenter :

1. Les opérandes sont tous les deux des number. Par exemple, 4+3 et à ce moment-là, il procède à une addition de number, et il vous trouve 7.
2. Les opérandes sont tous les deux des string. Par exemple, "4"+"3" et à ce moment-là, il procède à la concaténation des chaînes de caractères, et il vous trouve "43".
3. Les opérandes n'ont pas le même type. Par exemple, "4"+3. Dans ce cas, il se retrouve avec un string et un number. Là, il ne sait pas faire. Pour s'en sortir, il doit choisir un opérande et le convertir. Il va systématiquement choisir de convertir le number en string, et il va nous donner "43".

Vous avez beaucoup de conversion de ce type lorsque vous faites des console.log en mélangeant des valeurs numériques et des chaînes.

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> </head> <body> <script> const x = 10; const y = 20; // Ci dessous x et y sont convertis en chaîne. console.log("x = "+x+" y = "+y); </script> </body> </html> Tester le code

Maintenant, on va faire un test. On va tester si "3" est égal à 3. Pour cela, on va utiliser un test simple, c'est-à-dire un double égal. Et vous constatez que dans ce cas, il y a une conversion de type implicite et que les valeurs sont comptées comme égales. C'est la même chose si vous demandez si elles sont différentes. Et dans ce cas, il vous dit qu'elles ne sont pas différentes.

C'est pour éviter ce genre d'approximation qu'il vaut mieux utiliser le === ou le !== pour effectuer des comparaisons.

On peut continuer avec les valeurs booléennes true et false qui sont équivalentes à 0 et à 1.

Je vais examiner maintenant les conversions vers des booléens, qui sont faites au moment des évaluations des conditions. Par exemple, celles des tests conditionnels. On peut trouver ça aussi sur la condition qui est évaluée avec l'opérateur ternaire, voir sur certaines conditions de boucles.

<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> </head> <body> <script> if ( 0 ) alert('1-> true'); else alert('1 -> false'); // Affiche 1 -> false if ( '' ) alert('2 -> true'); else alert('2 -> false'); // Affiche 2 -> false if ( 'str' ) alert('3 -> true'); // Affiche 3 -> true else alert('3 -> false'); let x; // undefined if ( x ) alert('4 -> true'); else alert('4 -> false'); // Affiche 4 -> false if ( null ) alert('5 -> true'); else alert('5 -> false'); // Affiche 5 -> false if ( NaN ) alert('6 -> true'); // Penser à utiliser isNaN() else alert('6 -> false'); // Affiche 6 -> false const obj = {}; if ( obj ) alert('7 -> true'); // Affiche 7 -> true else alert('7 -> false'); const f = function(){}; if ( f ) alert('8 -> true'); // Affiche 8 -> true else alert('8 -> false'); </script> </body> </html> Tester le code

Je vous ai présenté dans ce tuto l'essentiel des conversions de type implicites. En tout cas, je vous ai présenté celles que l'on rencontre le plus souvent. Comprenez bien qu'il existe une multitude de cas. Ce que je vous ai montré ne constitue qu'une petite partie des différentes situations que l'on peut rencontrer.