Expressions et déclarations de fonction: distinguer les constructions javascript

Lorsque vous travaillez avec JavaScript, les développeurs rencontrent souvent deux constructions: expressions de fonction et déclarations. Bien que similaires dans les fonctionnalités, ils diffèrent dans leur manipulation par le navigateur et leur comportement de chargement dans le contexte d'exécution.

Expressions de fonction

Les expressions de fonction, également appelées fonctions anonymes, sont des fonctions anonymes attribuées à une variable. Ils sont définis à l'aide de la syntaxe suivante:

var foo = function() { return 5; }

Fonctions déclarées

Les déclarations de fonctions, d'autre part, sont des fonctions nommées qui sont explicitement déclarées en utilisant le mot clé de la fonction. Leur syntaxe est:

function foo() { return 5; }

Comportement de chargement

La différence clé entre ces constructions réside dans leur comportement de chargement. Les déclarations de fonction sont hissées en haut du contexte d'exécution et sont disponibles avant que tout code ne soit exécuté. Cela leur permet d'être appelés avant d'être déclarés, et ils peuvent être accessibles n'importe où dans la portée actuelle, même avant leur déclaration.

Les expressions de fonction, cependant, ne sont chargées que lorsque l'interprète atteint cette ligne de code. Cela signifie que si vous essayez d'appeler une expression de fonction avant sa déclaration, vous rencontrerez une erreur. Les expressions de fonction ne sont accessibles que dans la portée dans laquelle elles ont été déclarées.

Exemple

Considérez l'exemple suivant:

alert(foo()); // This will cause an error

var foo = function() { return 5; }

Dans cet exemple, l'expression de fonction foo n'est pas disponible avant sa déclaration, d'où l'erreur lors de la tentative d'expressions de fonctions nommées. 5; }

Bien que cette syntaxe soit historiquement sujette à des erreurs dans Safari, il fonctionne maintenant comme prévu dans les navigateurs modernes.

var foo = function foo() { return 5; }