Méthodes JavaScript et plus. Partie 9 du cours JavaScript de Débutant à Avancé en 10 articles de blog

Ceci est la partie 9 de la série d’articles de blog sur JavaScript qui vous fera passer de débutant à avancé. Cette fois, nous explorerons les sujets suivants : les méthodes JavaScript, les valeurs par défaut des paramètres, l’objet Date en JavaScript et la fonction fléchée. À la fin de cette série, vous connaîtrez toutes les bases nécessaires pour commencer à coder en JavaScript. Si vous n’avez pas lu l’article de blog précédent sur les objets JavaScript, vous pouvez le faire ici. Sans plus tarder, commençons avec le neuvième tutoriel.

Méthodes JavaScript et plus – table des matières :

1. Valeurs par défaut des paramètres
2. L’objet Date en JavaScript
3. Méthode Map()
4. Méthode Filter()
5. Fonction fléchée

Jusqu’à présent, nous avons vu de nombreux concepts et sujets en JavaScript, mais il y en a encore certains couramment utilisés que nous n’avons pas découverts. Dans ce tutoriel, nous allons voir de quoi il s’agit. Le premier est les valeurs par défaut des paramètres en JavaScript.

Valeurs par défaut des paramètres

Les fonctions sont utilisées extrêmement couramment en programmation, et lorsque quelque chose est utilisé aussi souvent, il n’y a pas seulement des frameworks comme React qui tirent parti des fonctions JavaScript, mais il existe même d’autres optimisations développées pour tirer encore plus parti des fonctions JavaScript. L’une des principales caractéristiques que nous avons dans les fonctions s’appelle les valeurs par défaut des paramètres. Les paramètres par défaut nous permettent d’écrire des codes plus sûrs qui peuvent faire des présomptions sûres sur l’entrée de l’utilisateur. Cela bénéficie également à l’utilisateur en lui fournissant un paramètre par défaut qui peut faciliter le choix parmi ses options. Voyons quelques exemples à ce sujet.

// supposons que vous développez un site web pour un café
// et que la plupart des gens veulent un americano de taille moyenne
// sachant cela, vous voulez faciliter la commande de leur café
// avec moins de tracas
function orderCoffee(typeOfCoffee="americano", sizeOfCoffee="medium", numberOfCoffee=1){
    return (numberOfCoffee + " " + sizeOfCoffee + " taille " + typeOfCoffee + " est en préparation. ");
}
console.log("Commande par défaut :");
console.log(orderCoffee());
// de cette façon, lorsqu'un client moyen commande en ligne, 
// il sera beaucoup plus facile pour lui de commander son café quotidien
// au point qu'il pourra le commander d'un simple bouton
// alternativement, les gens peuvent également personnaliser leur café
// en changeant les entrées
console.log("Commande personnalisée :");
console.log(orderCoffee("latte", "large", 2));
console.log("Une autre commande personnalisée :");
console.log(orderCoffee("macchiato", "small", 1));
// il est également possible de changer seulement une partie des entrées
// et de tirer parti des paramètres par défaut 
// pour le reste des champs d'entrée
console.log("Commande partiellement personnalisée :");
console.log(orderCoffee("iced coffee"));

Exécuter le code ci-dessus nous donne la sortie suivante :

L’objet Date en JavaScript

L’objet Date en JavaScript est assez couramment utilisé, surtout en développement web. Nous pouvons utiliser l’objet Date pour effectuer des fonctions sensibles au temps, telles que changer les paramètres d’affichage en mode sombre, mode clair ou tout autre mode que l’utilisateur pourrait préférer. Nous pouvons également utiliser les informations de date selon les besoins dans le projet sur lequel nous travaillons. Voici quelques exemples de l’objet Date en action :

// la première étape consiste à créer une instance d'objet date
// nous pouvons le faire en écrivant ce qui suit et 
// en le définissant à une variable ou constante de notre choix
let today = new Date();
console.log("Nous sommes en l'année : " + today.getFullYear());
console.log("Nous pouvons également obtenir le mois en nombre :");
console.log(today.getMonth());
console.log("Nous pouvons également obtenir l'heure de la journée comme ceci :");
console.log(today.getHours());
console.log("Nous pouvons également obtenir les minutes exactes ainsi que les secondes");
console.log(today.getMinutes());
console.log(today.getSeconds());
// une fois que nous avons ces nombres, nous pouvons les utiliser comme nous le souhaitons
// si nous voulons, nous pouvons les afficher ou prendre des décisions basées sur eux.
// si nous voulons afficher le mois avec un nom 
// plutôt qu'un nombre, nous pouvons également y parvenir
// avec ce qui suit
const months = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"];
console.log("Nous sommes au mois de " + months[today.getMonth()]);
// ce que nous venons de faire a été de créer un tableau pour stocker les noms des mois
// puis de choisir le mois correct en utilisant une valeur d'index
// fournie par la méthode .getMonth().
// si nous voulions activer le mode sombre après 20h,
// nous pourrions le faire avec le code suivant
// l'une des premières choses dont nous devrions nous souvenir est que
// les heures sont données au format 24 heures
// cela signifie que 20h correspondra à 20 en heures
// nous pouvons également utiliser une manière abrégée 
// et combiner la création de l'objet date avec
// la méthode get hours
let timeOfDay = new Date().getHours();
if (timeOfDay >= 20) {
    console.log("Activation du mode sombre...");
} else {
    console.log("Ne pas activer le mode sombre");
}
// puisque l'heure actuelle est après 20h,
// dans ce cas, nous nous attendons à activer le mode sombre.
// ce qui est également le résultat que nous obtenons comme nous pouvons le voir dans
// la sortie de la console.

Exécuter le code ci-dessus nous donnera les journaux de console suivants :

Méthode Map()

La méthode map est une méthode très utile qui peut vous faire économiser de nombreuses lignes de code, et selon la façon dont vous l’utilisez, elle peut rendre votre code beaucoup plus propre. Elle remplace essentiellement l’utilisation d’une boucle for lorsque vous l’utilisez pour parcourir un tableau. Voici quelques exemples de la méthode map().

// créons un tableau que nous utiliserons pour le mapping
let someNumbers = [1, 2, 3, 4, 5];
// créons également les fonctions que nous allons 
// fournir à la méthode map
function doubleNums(num1){
    return num1 * 2;
}
function squareNums(num1){
    return num1 * num1;
}
function add100(num1){
    return num1 + 100;
}
console.log("Tableau des nombres doublés :");
console.log(someNumbers.map(doubleNums));
console.log("Tableau des nombres au carré :");
console.log(someNumbers.map(squareNums));
console.log("100 ajoutés à chacun des éléments du tableau des nombres :");
console.log(someNumbers.map(add100));
// la méthode map() parcourra chacun des
// éléments d'un tableau donné et appliquera la 
// fonction fournie
// notez que nous n'incluons pas de parenthèses
// après les noms de fonction, cela appellerait la fonction
// au lieu de cela, nous passons le nom de la fonction, 
// et la méthode map() les appelle quand elle en a besoin

Exécuter le code ci-dessus nous donnera les journaux de console suivants :

Méthode Filter()

La méthode filter(), avec la méthode map() sont toutes deux des méthodes JavaScript assez courantes. Elles sont très similaires à la méthode map() que nous venons de voir. Avec la méthode map(), nous pouvons passer n’importe quelle fonction, et cette fonction est appliquée à chacun des éléments d’un tableau. Avec la méthode filter(), nous passerons un critère de filtrage et la méthode filter parcourra tous les éléments d’un tableau et renverra un nouveau tableau avec uniquement les éléments qui passent le critère. Voyons quelques exemples à ce sujet :

// créons d'abord un tableau 
// pour appliquer la méthode filter()
let someNumbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21];
function checkEven(num1){
    if (num1 % 2 == 0){
        return num1;
    }
}
function checkOdd(num1){
    if (num1 % 2 == 1){
        return num1;
    }
}
function over13(num1){
    if (num1 > 13){
        return num1;
    }
}
function divisibleByFive(num){
    if (num % 5 == 0){
        return num;
    }
}
console.log("Nombres pairs de la liste :");
console.log(someNumbers.filter(checkEven));
console.log("Nombres impairs de la liste :");
console.log(someNumbers.filter(checkOdd));
console.log("Nombres supérieurs à 13 du tableau :");
console.log(someNumbers.filter(over13));
console.log("Nombres divisibles par 5 du tableau :");
console.log(someNumbers.filter(divisibleByFive));

Exécuter le code ci-dessus nous donnera les journaux de console suivants :

Fonction fléchée

Rappelez-vous quand nous avons dit que les fonctions sont extrêmement courantes en JavaScript et qu’il y a de nombreuses optimisations qui leur sont apportées pour obtenir un code encore plus performant ou propre ? Eh bien, les fonctions fléchées en font partie. Les fonctions fléchées sont parfois également appelées la “grosse flèche”. Elles offrent essentiellement un moyen beaucoup plus court d’écrire vos fonctions. Elles sont également très couramment utilisées avec les méthodes JavaScript que nous venons de voir. Voyons-les avec quelques exemples :

// JavaScript offre plusieurs niveaux de 
// raccourcissement de code avec les fonctions fléchées selon votre code exact
// Essentiellement, la manière la plus longue d'écrire une fonction est 
// la façon dont nous les écrivons toujours sans utiliser les fonctions fléchées
// commençons par un tableau pour appliquer les fonctions fléchées
let someNumbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21];
console.log("Tableau original :");
console.log(someNumbers);
// dans les exemples précédents, nous avons appliqué de nombreuses fonctions
// après les avoir créées en tant que fonctions nommées régulières
// Dans cet exemple, nous appliquerons les transformations exactes
// afin que vous puissiez voir les deux extrêmes en longueur de code
// doubler chaque nombre dans le tableau :
console.log("Doubler chaque nombre dans le tableau :")
console.log(someNumbers.map(num => num * 2));
// élever chaque nombre dans le tableau au carré :
console.log("Élever chaque nombre dans le tableau au carré :")
console.log(someNumbers.map(num => num * num));
// ajouter 100 à chaque nombre dans le tableau :
console.log("Ajouter 100 à chaque nombre dans le tableau :")
console.log(someNumbers.map(num => num + 100));
// Ne garder que les nombres pairs dans le tableau :
console.log("Ne garder que les nombres pairs dans le tableau :")
console.log(someNumbers.filter(num => num % 2 == 0));
// Ne garder que les nombres impairs dans le tableau :
console.log("Ne garder que les nombres impairs dans le tableau :")
console.log(someNumbers.filter(num => num % 2 == 1));
// Ne garder que les nombres qui sont divisibles par 5 :
console.log("Ne garder que les nombres qui sont divisibles par 5 :")
console.log(someNumbers.filter(num => num % 5 == 0));
// Ne garder que les nombres qui sont supérieurs à 13 :
console.log("Ne garder que les nombres qui sont supérieurs à 13 :")
console.log(someNumbers.filter(num => num > 13));

Exécuter le code ci-dessus nous donnera les journaux de console suivants :

Dans le prochain tutoriel, nous ferons un aperçu de ce que nous avons vu et verrons ce qui est à venir.