Quand utiliser une expression de fonction ou une déclaration de fonction

Il existe deux manières de créer des fonctions en JavaScript : les expressions de fonction et les déclarations de fonction. Dans cet article, nous verrons quand utiliser les expressions de fonction par rapport aux déclarations de fonction, et expliquerons les différences entre elles.

Les déclarations de fonction sont utilisées depuis longtemps, mais les expressions de fonction ont progressivement pris le dessus. De nombreux développeurs ne savent pas quand utiliser l’un ou l’autre, ils finissent donc par utiliser le mauvais.

Il existe quelques différences essentielles entre les expressions de fonction et les déclarations de fonction. Examinons de plus près ces différences et quand utiliser les expressions de fonction par rapport aux déclarations de fonction dans votre code.

function funcDeclaration() {
    return 'A function declaration';
}

let funcExpression = function () {
    return 'A function expression';
}

Que sont les déclarations de fonction ?

Les déclarations de fonction sont lorsque vous créez une fonction et lui donnez un nom. Vous déclarez le nom de la fonction lorsque vous écrivez le mot-clé function, suivi du nom de la fonction. Par example:

function myFunction() {
  
};

Comme vous pouvez le voir, le nom de la fonction (myFunction) est déclaré lors de la création de la fonction. Cela signifie que vous pouvez appeler la fonction avant qu’elle ne soit définie.

Voici un exemple de déclaration de fonction :

function add (a, b) {
  return a + b;
};

Que sont les expressions de fonction ?

Les expressions de fonction sont lorsque vous créez une fonction et l’affectez à une variable. La fonction est anonyme, ce qui signifie qu’elle n’a pas de nom. Par example:

let myFunction = function() {
  
};

Comme vous pouvez le voir, la fonction est affectée au myFunction variable. Cela signifie que vous devez définir la fonction avant de pouvoir l’appeler.

Voici un exemple d’expression de fonction :

let add = function (a, b) {
  return a + b;
};

Les différences entre les expressions de fonction et les déclarations

Il existe quelques différences essentielles entre les expressions de fonction et les déclarations de fonction :

• Les déclarations de fonction sont hissées, tandis que les expressions de fonction ne le sont pas. Cela signifie que vous pouvez appeler une déclaration de fonction avant qu’elle ne soit définie, mais vous ne pouvez pas le faire avec une expression de fonction.
• Avec les expressions de fonction, vous pouvez utiliser une fonction immédiatement après sa définition. Avec les déclarations de fonction, vous devez attendre que le script entier ait été analysé.
• Les expressions de fonction peuvent être utilisées comme argument d’une autre fonction, mais les déclarations de fonction ne le peuvent pas.
• Les expressions de fonction peuvent être anonymes, contrairement aux déclarations de fonction.

Comprendre la portée de votre expression de fonction : les différences de levage JavaScript

Semblable à la let instruction, déclarations de fonction sont hissés au sommet d’un autre code.

Les expressions de fonction ne sont pas hissées. Cela leur permet de conserver une copie des variables locales de la portée où elles ont été définies.

Normalement, vous pouvez utiliser les déclarations de fonction et les expressions de fonction de manière interchangeable. Mais il y a des moments où les expressions de fonction aboutissent à un code plus facile à comprendre sans avoir besoin d’un nom de fonction temporaire.

Comment choisir entre des expressions et des déclarations

Alors, quand devriez-vous utiliser des expressions de fonction plutôt que des déclarations de fonction ?

La réponse dépend de vos besoins. Si vous avez besoin d’une fonction plus flexible ou qui n’est pas hissée, une expression de fonction est la solution. Si vous avez besoin d’une fonction plus lisible et compréhensible, utilisez une déclaration de fonction.

Comme vous l’avez vu, les deux syntaxes sont similaires. La différence la plus évidente est que les expressions de fonction sont anonymes, tandis que les déclarations de fonction ont un nom.

Aujourd’hui, vous utiliseriez généralement une déclaration de fonction lorsque vous devez faire quelque chose que les expressions de fonction ne peuvent pas faire. Si vous n’avez pas besoin de faire quoi que ce soit qui ne peut être fait qu’avec une déclaration de fonction, il est généralement préférable d’utiliser une expression de fonction.

Utilisez des déclarations de fonction lorsque vous devez créer une fonction récursive ou lorsque vous devez appeler la fonction avant de la définir. En règle générale, utilisez des expressions de fonction pour un code plus propre lorsque vous n’avez pas besoin de faire l’une ou l’autre de ces choses.

Avantages des déclarations de fonction

L’utilisation des déclarations de fonction présente quelques avantages clés.

• Cela peut rendre votre code plus lisible. Si vous avez une longue fonction, lui donner un nom peut vous aider à garder une trace de ce qu’elle fait.
• Les déclarations de fonction sont hissées, ce qui signifie qu’ils sont disponibles avant d’être définis dans votre code. Cela aide si vous avez besoin d’utiliser la fonction avant qu’elle ne soit définie.

Avantages des expressions de fonction

Les expressions de fonction présentent également quelques avantages.

• Elles sont plus flexibles que les déclarations de fonction. Vous pouvez créer des expressions de fonction et les affecter à différentes variables, ce qui peut être utile lorsque vous devez utiliser la même fonction à différents endroits.
• Les expressions de fonction ne sont pas hissées, vous ne pouvez donc pas les utiliser avant qu’ils ne soient définis dans votre code. Cela aide si vous voulez vous assurer qu’une fonction n’est utilisée qu’après avoir été définie.

Quand choisir une déclaration de fonction ou une expression de fonction

Dans la plupart des cas, il est facile de déterminer quelle méthode de définition d’une fonction est la mieux adaptée à vos besoins. Ces lignes directrices vous aideront à prendre une décision rapide dans la plupart des situations.

Utilisez une déclaration de fonction lorsque :

• vous avez besoin d’une fonction plus lisible et compréhensible (comme une fonction longue ou une fonction que vous devrez utiliser à différents endroits)
• une fonction anonyme ne conviendra pas à vos besoins
• il faut créer une fonction récursive
• vous devez appeler la fonction avant qu’elle ne soit définie

Utilisez une expression de fonction lorsque :

• vous avez besoin d’une fonction plus flexible
• vous avez besoin d’une fonction qui n’est pas hissée
• la fonction ne doit être utilisée que lorsqu’elle est définie
• la fonction est anonyme ou n’a pas besoin de nom pour une utilisation ultérieure
• vous souhaitez contrôler le moment où la fonction est exécutée, en utilisant des techniques telles que les expressions de fonction immédiatement appelées (IIFE)
• vous voulez passer la fonction comme argument à une autre fonction

Cela dit, il existe un certain nombre de cas où la flexibilité des expressions de fonction devient un atout puissant.

Déverrouiller l’expression de la fonction : différences de levage JavaScript

Les expressions de fonction deviennent plus utiles que les déclarations de fonction de différentes manières.

• Fermetures
• Arguments à d’autres fonctions
• Expressions de fonction appelées immédiatement (IIFE)

Création de fermetures avec des expressions de fonction

Les fermetures sont utilisées lorsque vous souhaitez donner des paramètres à une fonction avant que cette fonction ne soit exécutée. Un bon exemple de la façon dont cela peut vous être bénéfique est lorsque vous parcourez une boucle NodeList.

Une fermeture vous permet de conserver d’autres informations telles que l’index, dans les situations où ces informations ne sont pas disponibles une fois la fonction exécutée.

function tabsHandler(index) {
    return function tabClickEvent(evt) {
        
        
    };
}

let tabs = document.querySelectorAll('.tab'),
    i;

for (i = 0; i < tabs.length; i += 1) {
    tabs[i].onclick = tabsHandler(i);
}

Les gestionnaires d’événements attachés sont exécutés ultérieurement (une fois la boucle terminée), une fermeture est donc nécessaire pour conserver la valeur appropriée de for boucle.

let i;

for (i = 0; i < list.length; i += 1) {
    document.querySelector('#item' + i).onclick = function doSomething(evt) {
        
        
    }
}

Il est plus facile de comprendre pourquoi le problème survient en extrayant le doSomething() fonctionner à l’intérieur du for boucle.

let list = document.querySelectorAll('.item'),
    i,
    doSomething = function (evt) {
        
        
    };

for (i = 0; i < list.length; i += 1) {
    item[i].onclick = doSomething;
}

La solution ici consiste à passer l’index en tant qu’argument de fonction à une fonction externe afin qu’elle puisse transmettre cette valeur à une fonction interne. Vous verrez généralement des fonctions de gestionnaire utilisées pour organiser les informations dont une fonction de retour interne a besoin.

let list = ['item1', 'item2', 'item3'],
    i,
    doSomethingHandler = function (itemIndex) {
        return function doSomething(evt) {
            
            
            
            console.log('Doing something with ' + list[itemIndex]);
        };
    };

for (i = 0; i < list.length; i += 1) {
    list[i].onclick = doSomethingHandler(i);
}

En savoir plus sur fermetures et leur utilisation.

Passage d’expressions de fonction en tant qu’arguments

Les expressions de fonction peuvent être transmises directement aux fonctions sans avoir à être affectées à une variable temporaire intermédiaire.

Vous les verrez le plus souvent sous la forme d’une fonction anonyme. Voici un exemple d’expression de fonction jQuery familier :

$(document).ready(function () {
    console.log('An anonymous function');
});

Une expression de fonction est également utilisée pour gérer les éléments du tableau lors de l’utilisation de méthodes telles que forEach().

Il n’est pas non plus nécessaire qu’il s’agisse de fonctions anonymes sans nom. C’est une bonne idée de nommer l’expression de la fonction pour aider à exprimer ce que la fonction est censée faire et pour faciliter le débogage :

let productIds = ['12356', '13771', '15492'];

productIds.forEach(function showProduct(productId) {
    ...
});

Expressions de fonction appelées immédiatement (IIFE)

Les IIFE aident à empêcher vos fonctions et vos variables d’affecter la portée globale.

Toutes les propriétés à l’intérieur entrent dans la portée de la fonction anonyme. Il s’agit d’un modèle de conception courant utilisé pour empêcher votre code d’avoir des effets secondaires indésirables ou indésirables ailleurs.

Il est également utilisé comme modèle de module pour contenir des blocs de code dans des sections faciles à gérer. Nous les examinons plus en détail dans Démystifier les fermetures JavaScript, les rappels et les IIFE.

Voici un exemple simple d’IIFE :

(function () {
    
}());

… qui, lorsqu’il est utilisé en tant que module, peut se traduire par une maintenabilité facile à réaliser pour votre code.

let myModule = (function () {
    let privateMethod = function () {
        console.log('A private method');
    },
    someMethod = function () {
        console.log('A public method');
    },
    anotherMethod = function () {
        console.log('Another public method');
    };

    return {
        someMethod: someMethod,
        anotherMethod: anotherMethod
    };
}());

Conclusion

Comme nous l’avons vu, les expressions de fonction ne sont pas radicalement différentes des déclarations de fonction, mais elles peuvent souvent aboutir à un code plus propre et plus lisible.

Leur utilisation généralisée en fait un élément essentiel de la boîte à outils de chaque développeur. Utilisez-vous des expressions de fonction dans votre code d’une manière intéressante que je n’ai pas mentionnée ci-dessus ? Commentez et tenez moi au courant!