Quand utiliser une déclaration de fonction par rapport à une expression de fonction

Série Tech Jargon

Il est probable que vous sachiez déjà comment écrire des fonctions de ces deux manières. function doStuff() {}et () =>{} sont des caractères que nous tapons toute la journée. Mais en quoi sont-ils différents et pourquoi utiliser l'un sur l'autre?

Remarque: des exemples sont donnés en JavaScript. Y notre M ileage M ay V Ary avec d' autres langues.

La première différence: un nom

Lorsque vous créez une fonction avec un nom , il s'agit d'une déclaration de fonction . Le nom peut être omis dans les expressions de fonction , ce qui rend cette fonction «anonyme».

Déclaration de fonction:

function doStuff() {};

Expression de fonction:

const doStuff = function() {}

Nous voyons souvent des fonctions anonymes utilisées avec la syntaxe ES6 comme ceci:

const doStuff = () => {}

Levage

Le levage fait référence à la disponibilité des fonctions et des variables «en haut» de votre code, par opposition à seulement après leur création. Les objets sont initialisés au moment de la compilation et disponibles n'importe où dans votre fichier.

Les déclarations de fonction sont hissées mais les expressions de fonction ne le sont pas.

C'est facile à comprendre avec un exemple:

doStuff();
function doStuff() {};

Ce qui précède ne génère pas d'erreur, mais ceci:

doStuff();
const doStuff = () => {};

Le cas des expressions de fonction

Il peut sembler que les déclarations de fonction, avec leurs puissantes propriétés de levage, vont éliminer les expressions de fonction pour leur utilité. Mais choisir l'un plutôt que l'autre nécessite de réfléchir au moment et à l'endroit où la fonction est nécessaire . En gros, qui a besoin d'en savoir plus?

Les expressions de fonction sont appelées pour éviter de polluer la portée globale . Au lieu que votre programme soit conscient de nombreuses fonctions différentes, lorsque vous les gardez anonymes, elles sont immédiatement utilisées et oubliées.

IIFE

Le nom - expressions de fonction immédiatement appelées - dit à peu près tout ici. Lorsqu'une fonction est créée en même temps qu'elle est appelée, vous pouvez utiliser un IIFE, qui ressemble à ceci:

(function() => {})()

ou:

(() => {})()

Pour un examen approfondi des IIFE, consultez cet article complet.

Rappels

Une fonction passée à une autre fonction est souvent appelée «rappel» en JavaScript. Voici un exemple:

function mapAction(item) { // do stuff to an item } array.map(mapAction)
array.map(mapAction)

Le problème ici est qu'il mapActionsera disponible pour l'ensemble de votre application - ce n'est pas nécessaire. Si ce rappel est une expression de fonction, il ne sera pas disponible en dehors de la fonction qui l'utilise:

array.map(item => { //do stuff to an item })

ou

const mapAction = function(item) { // do stuff to an item } array.map(mapAction)
array.map(mapAction)

cependant mapActionsera disponible pour coder en dessous de son initialisation.

Sommaire

En bref, utilisez des déclarations de fonction lorsque vous souhaitez créer une fonction sur la portée globale et la rendre disponible dans tout votre code. Utilisez des expressions de fonction pour limiter où la fonction est disponible, garder votre portée globale légère et maintenir une syntaxe propre.

Références

  • Déclaration de fonction, documentation MDN.
  • Expression de fonction, documentation MDN.
  • Levage, glossaire MDN.

La série Tech Jargon

Il y a tellement de phrases qui sont lancées lors des rencontres et des conférences technologiques, en supposant que tout le monde est déjà au courant du jargon. Je ne suis souvent pas en panne avec le jargon. Il est courant que les développeurs agissent avec étonnement que je manque de connaissances.

La vérité est que je ne connais souvent pas le mot juste pour cela. En tant qu'humains, mais surtout en tant qu'humains de développement, nous aimons rejeter ceux qui ne «parlent pas», donc cette série vise à acquérir une solide compréhension des concepts de programmation que l'on «devrait connaître».

Ceci est le deuxième article de la série. Le premier était les fonctions d'ordre supérieur. Cherchez-en plus lorsque je vais à des rencontres et à des conférences et que je fais semblant de savoir de quoi mes collègues techniciens parlent, mais que je dois ensuite rentrer chez moi et Google.