Approfondir les bases [Utiliser les documentations JavaScript]

contenu
navigation

Approfondir les bases

Objectif

Reprendre des parties du cours avec l'aide du MDN.

Mise en situation

Un langage de programmation tel que le JavaScript est simple à prendre en main mais il n'est pas possible de tout connaître dans les moindres détails. De plus il arrive régulièrement d'avoir besoin d'utiliser, pour la première fois, des fonctionnalités très précises du langage, même après plusieurs années de pratique. Pour cela des sites comme MDN sont très intéressants et les ressources mises à disposition permettent d'approfondir ses connaissances et ainsi que de mieux comprendre le langage que l'on utilise.

Conseil :

MDN permet d'approfondir certaines notions afin de découvrir de nouveaux cas d'utilisations ou pour répondre à un problème spécifique. Il est recommandé de parcourir la documentation pour compléter ses connaissances.

Exemple : Modification des constantes

Il est possible de déclarer des constantes avec le mot-clé const.

const pi = { value: 3.1415, description: "Pi est  le rapport constant de la circonférence d'un cercle à son diamètre dans un plan euclidien" }
pi = { value: 3.1416, description: "Pi, appelé parfois constante d'Archimède, est  le rapport constant de la circonférence d'un cercle à son diamètre dans un plan euclidien" }

const pi = { value: 3.1415, description: "Pi est  le rapport constant de la circonférence d'un cercle à son diamètre dans un plan euclidien" }
pi = { value: 3.1416, description: "Pi, appelé parfois constante d'Archimède, est  le rapport constant de la circonférence d'un cercle à son diamètre dans un plan euclidien" }

Le code ci-dessus renvoie l'erreur TypeError: Assignment to constant variable car pi est protégé par const.

Cependant, la page Types et grammaire du MDN nous apprend que les valeurs d'un objet, même déclaré avec const ne sont pas protégées.

const pi = { value: 3.1415, description: "Pi est  le rapport constant de la circonférence d'un cercle à son diamètre dans un plan euclidien" }
pi.value = 3.1416

const pi = { value: 3.1415, description: "Pi est  le rapport constant de la circonférence d'un cercle à son diamètre dans un plan euclidien" }
pi.value = 3.1416

Ainsi, ce code ne renvoie pas d'erreur et une valeur présente dans un objet déclaré avec const a été modifiée.

Exemple : Paramètre par défaut des fonctions

En JavaScript, il faut préciser quand une fonction a besoin de paramètres. Cette page du MDN montre que l'on peut donner des valeurs par défaut aux paramètres de fonction.

/** Cette fonction ajoute un utilisateur à la base de données
  si cette fonction est appelée sans argument "nickname",
  c'est la chaîne de caractère "JohnDoe" qui est donnée par défaut
*/
function addUser (database, id, nickname = 'JohnDoe') {
  database.push([id, nickname])
  console.log('Ajout de ' + id + ' à la base de données.')
  return database
}
let db = [[1, 'Alice']] // Pour l'exemple, "db" remplace une base de données distante.
db = addUser(db, 2, 'Bob')
db = addUser(db, 3)
console.log(db)

/** Cette fonction ajoute un utilisateur à la base de données
  si cette fonction est appelée sans argument "nickname",
  c'est la chaîne de caractère "JohnDoe" qui est donnée par défaut
*/
function addUser (database, id, nickname = 'JohnDoe') {
  database.push([id, nickname])
  console.log('Ajout de ' + id + ' à la base de données.')
  return database
}

let db = [[1, 'Alice']] // Pour l'exemple, "db" remplace une base de données distante.
db = addUser(db, 2, 'Bob')
db = addUser(db, 3)
console.log(db)

Exemple : Heure UTC

Un développeur qui souhaite retenir les heures d'inscriptions à son site web va vite se retrouver face à des problèmes d'incohérences de fuseaux horaires si ses utilisateurs sont dans différentes régions du monde.

Il pourrait être intéressant de stocker, dans la base de données, uniquement l'heure UTC et le fuseau horaire de l'utilisateur.

Pour cela, un nouveau tour sur la page des dates du MDN nous indique qu'il existe une méthode getTimezoneOffset qui retourne la différence en minutes entre l'heure locale de l'utilisateur et l'heure UTC.

/** Cette fonction ajoute un message à une base de données */
function logMessage (database, msg, user, time) {
  database.push([msg, user, time.getTime() + time.getTimezoneOffset() * 60, time.getTimezoneOffset()])
  console.log('Message ajouté à la base de données')
  return database
}
let db = [] // Pour l'exemple, "db" remplace une base de données distante.
db = logMessage(db, 'Un message de Alice', 'Alice', new Date())
console.log(db)

/** Cette fonction ajoute un message à une base de données */
function logMessage (database, msg, user, time) {
  database.push([msg, user, time.getTime() + time.getTimezoneOffset() * 60, time.getTimezoneOffset()])
  console.log('Message ajouté à la base de données')
  return database
}

let db = [] // Pour l'exemple, "db" remplace une base de données distante.
db = logMessage(db, 'Un message de Alice', 'Alice', new Date())
console.log(db)

Dans l'exemple ci-dessus, on imagine un service de messagerie qui aurait besoin de stocker les messages d'un utilisateur à une base de données.

La fonction database.push() prend en argument un tableau contenant le message, l'utilisateur, l'heure d'envoi sommé à la différence de minutes à l'heure UTC pour obtenir l'heure UTC et en dernier argument le fuseau horaire.

Ici, getTimezoneOffset() est multiplié par 600 pour obtenir des secondes car time.getTime() est en millisecondes.

Exemple : Les BigInt

JavaScript, contrairement à un grand nombre de langages de programmation, possède un type unique pour les entiers et les flottants. Le MDN nous apprend sur la page Structures de données que le type Number permet en réalité de représenter les nombres de -(2^53 - 1) à 2^53 - 1.

En dehors de cet intervalle, JavaScript ne renvoie pas d'erreur mais ne représente plus les nombres de manière sure. C'est-à-dire qu'ils deviennent des approximations qui peuvent créer des bugs difficiles à corriger.

Sur cette même page, on apprend qu'il existe le type BigInt qui permet justement de représenter les entiers en dehors de l'intervalle de Number. Un BigInt se reconnaît par un « n » à la fin du nombre.

/** Cette variable contient le nombre de lignes
  d'une table de base de données.
  Ici, on imagine 1000000.
*/
let numberOfRows = 2 ** 50
/** On souhaite stocker ce nombre de ligne
  avec le bon type (number/bigint) afin
  de le manipuler ailleurs dans le code
  sans avoir de problèmes.
*/
if (numberOfRows >= Number.MAX_SAFE_INTEGER) {
  numberOfRows = BigInt(numberOfRows)
}
/** On peut désormais continuer ce code sans problème
  de type entre Number et BigInt.
*/
console.log(typeof (numberOfRows))

/** Cette variable contient le nombre de lignes
  d'une table de base de données.
  Ici, on imagine 1000000.
*/
let numberOfRows = 2 ** 50

/** On souhaite stocker ce nombre de ligne
  avec le bon type (number/bigint) afin
  de le manipuler ailleurs dans le code
  sans avoir de problèmes.
*/
if (numberOfRows >= Number.MAX_SAFE_INTEGER) {
  numberOfRows = BigInt(numberOfRows)
}

/** On peut désormais continuer ce code sans problème
  de type entre Number et BigInt.
*/

console.log(typeof (numberOfRows))

À retenir

Il est primordial de s'instruire sur les pages du MDN pour approfondir ses connaissances et éviter les erreurs que nous avons vu.
Le modificateur const ne protège pas les valeurs des objets et des tableaux.
BigInt est à privilégier avec de très grands entiers.

Stéphane Crozat, Youssef El Saadany