Console

L'objet console permet d'afficher des informations dans la console du navigateur. Cette commande est particulièrement utile afin d'afficher des message ou encore le contenu de certaines variables à des moments précis.

log

La méthode la plus simple et courante de l'objet console est log.

Par exemple, si une variable name est définie, elle contient probablement un nom. Cependant, si celui-ci n'est pas affiché à l'écran, comment savoir sa valeur? Heureusement, il est possible d'utiliser la commande suivante:

console.log(name);

Affichera le résultat suivant dans la console du navigateur:

Tommy

Affichage multiple

Il est possible de "logger" plus d'une valeur à la fois en séparant ces valeurs en question par une virgule (,).

Par exemple, le code suivant:

console.log(name, color);

Qui affichera le résultat suivant dans la console du navigateur:

Tommy Vert

La valeur des deux variables sont donc visibles ("Tommy" et "Vert").

Objet à la volée

Il est parfois difficile de savoir quelle valeur st associée à quelle variable. Dans l'exemple précédent par exemple, comment être sûr que name ne contient pas "Tommy Vert" et color une chaine de caractère vide ""?

Heureusement, il est possible de créer un objet à la volée à l'aide d'accolades {}. Le simple fait de spécifier une ou plusieurs variables entre ces accolades permet de créer une propriété dont le nom correspondant à celui de ladite variable et d'afficher son résultat.

Reprenons l'exemple précédent, mais créons cette fois un objet à la volée:

console.log({name, color});

Le résultat obtenu sera:

{
  name: 'Tommy', 
  city: 'Vert'
}

Ce qui permet de différencier facilement quelle valeur est associée à quelle variable.

table

La propriété table de l'objet console permet d'afficher un tableau (Array) ou un objet (Object) sous forme de tableau ce qui peut simplifier sa lecture.

Tableau

Par exemple, un tableau contenant les informations suivantes:

const rangers = ["Jason", "Zack", "Billy", "Trini", "Kimerberly", "Tommy"]; 

Si console.log(rangers) est utilisé, le résultat suivant sera affiché:

['Jason', 'Zack', 'Billy', 'Trini', 'Kimerberly', 'Tommy']

Ce n'est pas un affichage "désastreux", mais il est facile d'envisager que s'il y avait une centaine de noms que la chaine de caractère deviendrait difficile à consulter. Imaginez un instant qu'on vous demande de nommer la 75e personne dans un tableau du genre 🤯

Heureusement, il est possible d'utiliser console.table(rangers) à la place qui produira un résultat comme ceci:

(index)	Value
0	'Jason'
1	'Zack'
2	'Billy'
3	'Trini'
4	'Kimerberly'
5	'Tommy'

Soudainement, identifier la 75e personne dans un tableau du genre deviendrait beaucoup plus facile.

Objet

Par exemple, un objet contenant les informations suivantes:

const rangers = {
 Rouge: "Jason", 
 Noir: "Zack", 
 Bleu: "Billy",
 Jaune: "Trini", 
 Rose: "Kimerberly", 
 Vert: "Tommy"
}; 

Si console.log(rangers) est utilisé, le résultat suivant sera affiché:

{Rouge: 'Jason', Noir: 'Zack', Bleu: 'Billy', Jaune: 'Trini', Rose: 'Kimerberly', …}

Encore une fois, l'affichage est lisible, mais n'est pas optimal. Il est facile de croire à tord que le nom "Zack" est attribué à la propriété "Bleu". Grâce à console.table(rangers) il est possible d'avoir le résultat suivant ou chaque nom et propriétés sont facilement distingables.

(index)	Value
Rouge	'Jason'
Noir	'Zack'
Bleu	'Billy'
Jaune	'Trini'
Rose	'Kimerberly'
Vert	'Tommy'