Function Expression vs Declaration : que choisir en JavaScript ?

Pourquoi cette question tourmente même les développeurs expérimentés ?

Si vous avez déjà écrit en JavaScript, vous avez sûrement rencontré ces deux façons de déclarer des fonctions. Elles se ressemblent, mais se comportent de manière totalement différente. Sur Stack Overflow, cette question a rassemblé des milliers de vues et des dizaines de pages de discussions. Pourquoi ? Parce que ne pas comprendre la différence entre var functionName = function() {} et function functionName() {} entraîne des bugs difficiles à détecter.

Aujourd'hui, nous allons une fois pour toutes clarifier ce sujet. Vous découvrirez ce qu'est une function declaration et une function expression, comment fonctionne le hoisting, et quand utiliser chaque méthode. C'est parti !

Que se cache-t-il derrière la syntaxe ?

Commençons par les bases. La première option est une Function Declaration (déclaration de fonction) :

function greet() {\n    console.log('Bonjour !');\n}

La seconde est une Function Expression (expression de fonction) :

const greet = function() {\n    console.log('Bonjour !');\n};

Remarquez : dans le premier cas, la fonction a un nom et se trouve en début de ligne. Dans le second, nous assignons une fonction anonyme à la variable greet. Mais le plus intéressant commence quand on observe comment JavaScript traite ces déclarations.

La différence principale : le Hoisting (remontée)

Hoisting est un mécanisme de JavaScript par lequel les déclarations de variables et de fonctions sont déplacées en haut de leur portée avant l'exécution du code. Mais il fonctionne différemment pour les déclarations et les expressions.

La Function Declaration est remontée entièrement

Lorsque vous utilisez function functionName() {}, JavaScript « remonte » toute la déclaration de la fonction en haut. Cela signifie que vous pouvez appeler la fonction avant même qu'elle ne soit déclarée dans le code :

sayHello(); // "Bonjour !"\n\nfunction sayHello() {\n    console.log('Bonjour !');\n}

Le code s'exécutera sans erreur. C'est pratique, mais cela peut dérouter les débutants.

La Function Expression n'est pas remontée

Avec var functionName = function() {}, l'histoire est différente. Seule la déclaration de la variable est remontée, pas sa valeur. La fonction reste à sa place :

sayHello(); // TypeError: sayHello is not a function\n\nvar sayHello = function() {\n    console.log('Bonjour !');\n};

Pourquoi cela ? Parce que var remonte la déclaration de la variable sayHello (avec la valeur undefined), et l'affectation de la fonction ne se produit qu'à la ligne de l'expression. Donc, avant cette ligne, sayHello est undefined, et tenter de l'appeler comme une fonction provoque une erreur.

D'ailleurs, si vous remplacez var par let ou const, l'erreur sera différente — ReferenceError: Cannot access 'sayHello' before initialization. Cela est dû au fait que let et const ne sont pas initialisés avant le moment de la déclaration (ce qu'on appelle la « zone morte temporaire »).

La portée : une autre pierre d'achoppement

La function declaration et la function expression obéissent toutes deux aux règles de portée. Mais il y a une nuance.

La Function Declaration est visible dans les limites du bloc

Bien que la function declaration soit remontée, sa portée est limitée au bloc (en mode strict) :

'use strict';\nif (true) {\n    function greet() {\n        console.log('À l'intérieur du bloc');\n    }\n    greet(); // "À l'intérieur du bloc"\n}\ngreet(); // ReferenceError: greet is not defined (en mode strict)

En mode non strict, une telle déclaration « sortira » du bloc, mais il ne faut pas compter là-dessus.

La Function Expression vit dans sa variable

Avec la function expression, tout est prévisible : la fonction n'est accessible que là où la variable est accessible. Si le déplacement