Subtilités des expressions fonctionnelles en JavaScript

Le nom Function Expression n'est pas donné au hasard. Il signifie vraiment ceci - que ces fonctions font partie d'une expression quelconque.

Par exemple, nous pouvons concaténer une chaîne de caractères et une fonction anonyme :

javascriptlet str = 'str' + function() {return 3;};
console.log(str); // affichera 'strfunction() {return 3;}'

Pourquoi voyons-nous un résultat aussi étrange, et non le nombre 3 ? Parce que le second terme - ce n'est pas le résultat de l'exécution de la fonction, mais son code source (puisque nous n'avons pas appelé cette fonction, nous l'avons simplement écrite).

Ainsi, le nom expression fonctionnelle désigne le fait qu'une telle fonction participe à une expression quelconque.

L'assignation à une variable est aussi une expression :

javascriptlet func = function() {
  console.log('!');
};

On peut aussi, par exemple, passer une fonction en tant que paramètre à console.log et celui-ci affichera son code source dans la console - cela sera aussi considéré comme une expression :

javascriptconsole.log(function() {return 3;});

Pourquoi est-ce important : parce que la différence entre Function Declaration et Function Expression n'est pas du tout que la première fonction est créée avec un nom, et que la seconde n'a initialement pas de nom. Ce n'est pas le cas.

Exemple. Voici une fonction sans nom, mais qui ne participe à aucune expression (c'est-à-dire qu'aucune action n'est effectuée avec elle, pour parler simplement) :

javascript/*
  Cette fonction sera une Function Declaration,
  mais avec une erreur syntaxique :
*/
function() {
  console.log('!');
}

Un tel code produira simplement une erreur ! Pourquoi : puisque la fonction ne participe à aucune expression, le navigateur la considère comme une Function Declaration, mais ne trouve pas son nom et génère une erreur.

Pour que l'erreur disparaisse, il faut forcer la fonction à faire partie d'une expression quelconque. Par exemple, écrivons l'opération + devant elle :

javascript+function() { // un tel code est correct
  console.log('!');
};

Comment cela fonctionne : l'opération + en elle-même ne fait rien, c'est comme si on écrivait au lieu du nombre 3 le nombre +3 - c'est acceptable, mais ne change rien.

Mais dans le cas d'une fonction - cela change. Maintenant, notre fonction n'est plus simplement écrite, elle participe à une expression. C'est pourquoi il n'y aura plus d'erreur. Il n'y aura pas non plus de résultat de l'exécution de la fonction, puisque nous l'avons simplement écrite, mais pas appelée.

Au lieu de +, on peut écrire n'importe quoi. Par exemple :

javascript-function() { // un tel code est correct
  console.log('!');
};

!function() { // un tel code est correct
  console.log('!');
};

On peut aussi mettre notre fonction entre parenthèses, dans ce cas, elle deviendra également une expression fonctionnelle :

javascript(function() { // un tel code est correct
  console.log('!');
});

javascriptfunction func() {
  console.log('!');
}

javascriptlet func = function() {
  console.log('!');
}

javascript+function() {
  console.log('!');
}

javascript!function func() {
  console.log('!');
}

javascript-function func() {
  console.log('!');
}

javascript1 + function func() {
  console.log('!');
}

javascript(function func() {
  console.log('!');
})

javascriptconsole.log(
  function() {
    console.log('!');
  }
);