Méthodes JavaScript et plus encore. Partie 9 Cours JavaScript de débutant à avancé en 10 articles de blog

Il s'agit de la partie 9 de la série d'articles de blog JavaScript qui vous mènera du débutant à l'avancé. Cette fois, nous allons explorer les sujets suivants : les méthodes JavaScript, les valeurs de paramètre par défaut, l'objet Date en JavaScript et la fonction de flèche. À la fin de cette série, vous connaîtrez toutes les bases dont vous avez besoin 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 par le neuvième tutoriel.

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

1. Valeurs de paramètre par défaut
2. L'objet Date en JavaScript
3. Méthode Map()
4. Méthode Filter()
5. Fonction flèche

Jusqu'à présent, nous avons vu de nombreux concepts et sujets en JavaScript, mais il en reste encore quelques-uns 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 de paramètre par défaut en JavaScript.

Valeurs de paramètre par défaut

Les fonctions sont utilisées extrêmement couramment dans la programmation, et lorsque quelque chose est utilisé, il n'y a pas seulement des frameworks comme React qui exploitent les fonctions JavaScript, mais il y a encore d'autres optimisations développées pour tirer le meilleur parti des fonctions JavaScript. L'une des principales fonctionnalités que nous avons dans les fonctions est appelée valeurs de paramètre par défaut. Les paramètres par défaut nous permettent d'écrire des codes plus sûrs qui peuvent faire des hypothèses sûres sur l'entrée de l'utilisateur. Cela profite également à l'utilisateur en lui fournissant un paramètre par défaut qui peut également faciliter le choix de ses options. Voyons quelques exemples à cela.

// assume you are developing a website for a coffee shop
// and most people want to get a medium size americano
// knowing this you want to make it easir for people to
// order their coffee with less hustle
function orderCoffee(typeOfCoffee="americano", sizeOfCoffee="medium", numberOfCoffee=1){
    return (numberOfCoffee + " " + sizeOfCoffee + " size " + typeOfCoffee + " is being prepared. ");
}
console.log("Default order:");
console.log(orderCoffee());
// this way, when an average customer orders online, 
// it will be much easier for them to order their daily coffee
// so much so that they will be able to order it with a single button
// alternatively people can also customize their coffee
// by changing the inputs
console.log("Custom order:");
console.log(orderCoffee("latte", "large", 2));
console.log("Another custom order:");
console.log(orderCoffee("macchiato", "small", 1));
// it is also possible to change only part of the inputs
// and leverage the default parameters 
// for the rest of the input fields
console.log("Partially customized order:");
console.log(orderCoffee("iced coffee"));

L'exécution du code ci-dessus nous donne le résultat suivant :

L'objet Date en JavaScript

L'objet Date en JavaScript est assez couramment utilisé, en particulier dans le développement Web. Nous pouvons utiliser l'objet Date pour exécuter des fonctions sensibles au temps telles que la modification des paramètres d'affichage en mode sombre, en 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 :

// the first step is to create a date object instance
// we cna do this by writing the following and 
// setting it to a variable or constant of our choice
let today = new Date();
console.log("We are at year: " + today.getFullYear());
console.log("We can also get month in number:");
console.log(today.getMonth());
console.log("Also we can get the hour of the day like this:");
console.log(today.getHours());
console.log("We can also get the exact minutes along with the seconds");
console.log(today.getMinutes());
console.log(today.getSeconds());
// once we have these numbers we can use them as we like
// if we want we can display them or make decisions based on them.
// if we want to display month with a name 
// rather than a number, we can also achieve that
// with the following
const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
console.log("We are at the month of " + months[today.getMonth()]);
// what we just did was to create an array to store month names
// and then choose the correct month using an index value
// provided by the .getMonth() method.
// if we wanted to turn on dark mode after 8 pm,
// we could do that with the following code
// one of the first thing we should remember is that
// hours are given in the 24 hour format
// that means 8pm will mean 20 as hours
// we can also use a short hand way 
// and combine the new date object creation
// with the get hours method
let timeOfDay = new Date().getHours();
if (timeOfDay >= 20) {
    console.log("Turning on Dark Mode...");
} else {
    console.log("Do not turn on the Dark Mode");
}
// since current time is over 8pm,
// in this case we expect to get turn on Dark Mode.
// which is also the reuslt we get as we can see from
// the console output.

L'exécution du 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, peut rendre votre code beaucoup plus propre. Il remplace essentiellement l'utilisation d'une boucle for lorsque vous l'utilisez pour boucler sur un tableau. Voici quelques exemples de la méthode map().

// lets create an array we will use for mapping
let someNumbers = [1, 2, 3, 4, 5];
// lets also create the functions we will 
// provide to the map method
function doubleNums(num1){
    return num1 * 2;
}
function squareNums(num1){
    return num1 * num1;
}
function add100(num1){
    return num1 + 100;
}
console.log("Doubled numbers array:");
console.log(someNumbers.map(doubleNums));
console.log("Squared numbers array:");
console.log(someNumbers.map(squareNums));
console.log("100 added to each of the element in the umbers array:");
console.log(someNumbers.map(add100));
// map() method will loop over each of the
// items in a given array and apply the 
// provided function
// note that we do not include paranthesis
// after the function names, this would call the function
// instead we pass the function name, 
// and map() method calls them when it needs to

L'exécution du code ci-dessus nous donnera les journaux de console suivants :

Méthode Filter()

La méthode filter(), ainsi que la méthode map() sont deux méthodes JavaScript assez courantes. Elles ressemblent beaucoup à la méthode map() que nous venons de voir. Avec la méthode map(), nous pouvons transmettre n'importe quelle fonction, et cette fonction est appliquée à chacun des éléments d'un tableau. Avec la méthode filter(), nous transmettrons un critère de filtre et la méthode filter bouclera sur tous les éléments d'un tableau et renverra un nouveau tableau avec uniquement les éléments qui satisfont aux critères. Voyons quelques exemples à cela :

// lets first create an array 
// to apply the filter() method
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("Even numbers from the list:");
console.log(someNumbers.filter(checkEven));
console.log("Odd numbers from the list:");
console.log(someNumbers.filter(checkOdd));
console.log("Numbers over 13 from the array:");
console.log(someNumbers.filter(over13));
console.log("Numbers divisible by 5 from the array:");
console.log(someNumbers.filter(divisibleByFive));

L'exécution du code ci-dessus nous donnera les journaux de console suivants :

Fonction flèche

Vous vous souvenez quand nous avons dit que les fonctions sont extrêmement courantes en JavaScript et que de nombreuses optimisations leur sont apportées pour même obtenir un code plus performant ou plus propre ? Eh bien, les fonctions fléchées en font partie. Les fonctions fléchées sont parfois également appelées flèche grasse. Ils fournissent essentiellement un moyen beaucoup plus court d'écrire vos fonctions. Ils sont aussi très couramment utilisés avec les méthodes JavaScript que nous venons de voir. Voyons-les avec quelques exemples :

// JavaScript provides multiple levels of 
// code shortening with arrow functions depending on your exact code
// Essantially the longest way we can write a function is 
// the way we always write them without using the arrow functions
// lets start with an array to apply the arrow functions
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("Original Array:");
console.log(someNumbers);
// in the previous examples we have applied many functions
// after creating them as regular named functions
// In this example we will apply the exact transformations
// so that you can see the both extremes in code lenght
// double every number in the array:
console.log("Double every number in the array:")
console.log(someNumbers.map(num => num * 2));
// square every number in the array:
console.log("Square every number in the array:")
console.log(someNumbers.map(num => num * num));
// add 100 to every number in the array:
console.log("Add 100 to every number in the array:")
console.log(someNumbers.map(num => num + 100));
// Only keep the even numbers in the array:
console.log("Only keep the even numbers in the array:")
console.log(someNumbers.filter(num => num % 2 == 0));
// Only keep the odd numbers in the array:
console.log("Only keep the odd numbers in the array:")
console.log(someNumbers.filter(num => num % 2 == 1));
// Only keep the numbers that are evenly divisible by 5:
console.log("Only keep the numbers that are evenly divisible by 5:")
console.log(someNumbers.filter(num => num % 5 == 0));
// Only keep the numbers that are over 13:
console.log("Only keep the numbers that are over 13:")
console.log(someNumbers.filter(num => num > 13));

L'exécution du code ci-dessus nous donnera les journaux de console suivants :

Dans le prochain tutoriel, nous aurons un aperçu de ce que nous avons vu et verrons ce qui va suivre.

Cours JavaScript de débutant à avancé en 10 articles de blog :

1. Comment commencer à coder en JavaScript ?
2. Principes de base de JavaScript
3. Variables et différents types de données en JavaScript
4. Extraits de code et structures de contrôle
5. Boucles While et boucles for
6. Tableau Java
7. Fonctions JavaScript
8. Objets JavaScript
9. Méthodes JavaScript et plus
10. Résumé du cours JavaScript