Type de fonctions en JavaScript


Fonctions de déclaration, d’expression, d’invocation immédiate (IIFE) et de flèche

Déclarations de fonction

Lorsque vous utilisez le function pour déclarer une fonction nommée et ne pas l’assigner à une autre variable, il s’agit d’une déclaration de fonction.

function greet(firstName = "new", lastName = "user") {
    return `Hello ${firstName} ${lastName}`;
}

console.log(greet("Parwinder", "Bhagat")); // Hello Parwinder Bhagat
console.log(greet()); // Hello new user

greet est un exemple de déclaration de fonction.

Vous voyez que dans ma première invocation de fonction, je transmets les arguments requis à la fonction. Cela fonctionne même sans ces arguments dans la deuxième invocation. C’est ce qu’on appelle valeurs par défaut. Vous le feriez lorsque l’interlocuteur de la fonction ne peut vous faire passer aucune valeur pour un argument. Lorsque cela se produit, la fonction se rabat sur les valeurs par défaut.

Expression de la fonction

Lorsqu’une fonction est attribuée à une variable nommée, on l’appelle une expression de fonction. Lorsqu’on utilise une expression de fonction, on utilise le plus souvent une fonction anonyme (pas de nom pour la fonction).

const greet = function (firstName = "new", lastName = "user") {
    return `Hello ${firstName} ${lastName}`;
}

console.log(greet("Parwinder", "Bhagat")); // Hello Parwinder Bhagat
console.log(greet()); // Hello new user

La déclaration de fonction et les expressions fonctionnent de manière presque identique dans la plupart des situations. Les décélérations de fonctions sont chargées avant l’exécution de tout code, tandis que les expressions ne sont chargées que lorsque l’interpréteur JavaScript atteint cette ligne de code. Cela se produit en raison du principe de hissage en JavaScript. C’est un sujet un peu avancé, et nous en parlerons dans un prochain billet de blog.

Expressions de fonctions immédiatement invoquées (IIFE)

IIFE est une fonction qui est déclarée et invoquée en même temps. Vous les créez en utilisant des fonctions anonymes et en mettant la fonction entre parenthèses rondes (). Vous pouvez alors les invoquer en appelant immédiatement l’expression par une paire de parenthèses rondes.

(function(name){ // function expression enclosed in ()
    console.log(`Hello ${name}`); // Hello Parwinder
})("Parwinder"); // Immediately called by using () in the end. Yes we can pass arguments

Fonctions des flèches

Une expression de fonction de flèche est une version compacte d’une expression de fonction régulière. Le nom vient du symbole => qui est utilisé dans les fonctions de flèches.

const hello = () => {
  return "Hello World!";
}

console.log(hello()); // Hello World

Vous pouvez voir que nous avons supprimé la function et a ajouté le mot-clé => symbole. Nous pouvons l’abréger davantage.

const hello = () => "Hello World!";
console.log(hello()); // Hello World

Nous avons omis la return mot-clé. C’est tout à fait acceptable, et nous pouvons le faire lorsqu’une fonction a une déclaration, et que cette déclaration renvoie une valeur.

Les fonctions de flèches peuvent également prendre des arguments.

const hello = (name) => `Hello ${name}`;
console.log(hello("Parwinder")); // Hello Parwinder

Si vous n’avez qu’un seul paramètre, les parenthèses qui l’entourent peuvent être supprimées.

const hello = name => `Hello ${name}`;
console.log(hello("Parwinder")); // Hello Parwinder

Les fonctions fléchées ne sont pas seulement des versions plus jolies/compactes des expressions de fonctions régulières, mais elles n’ont pas non plus leurs liens avec this, arguments, super ou new.target. Nous reviendrons sur ces principes de la justice sociale dans les prochains articles de blog.

Soyez le premier à commenter

Poster un Commentaire

Votre adresse de messagerie ne sera pas publiée.


*