Bonjour à tous,

j'ai récemment regardé le tutoriel Javascrit "Promise, Async & Await". Tout est parfaitement clair pour moi, mais j'ai néanmoins une question.

Dans sa vidéo, Grafikart déclare ses fonctions en stockant une fonction anonyme dans une variable, ex :

var foo = function(){
    console.log('something');
}

Ma question est la suivante, y a t-il une raison particulière à préférer cette syntaxe à la syntaxe :

function foo(){
    console.log('something');
}

4 réponses


Bonjour.
Si tu veux en savoir plus sur les déclarations de fonction ou plus généralement sur les fonctions, il y a Formation Javascript » Les fonctions.

skiiks
Auteur

Je connaissais déjà les différentes méthodes d'assignation/déclaration de fonction et comment le hoisting peut impacter l'appel d'une fonction. Mais merci quand même.

Je voulais surtout savoir si il y avait une petite subtilité, autre qu'une préférence personnelle (j'écris mes appel à la fin ou au début), qui ferait préférer telle ou telle méthode?

Source OPENCLASSROOM

Enregistrer une fonction dans... une variable ?!

Nous avons, dans les chapitres précédents, étudié séparément les variables et les fonctions.
Mais en fait, une fonction, ce n'est pas si différent que ça d'une variable...

Rappel

Histoire de vous rafraîchir un peu la mémoire, je vous rappelle qu'une fonction se déclare dans l'en-tête de la page, de cette manière :

function toto(arg1, arg2)
{
// code
return valeur;
}
Quelques explications succinctes pour se remettre dans le bain :

Le mot-clé function indique... qu'on déclare une fonction ;)
toto est le nom de notre fonction
arg1 et arg2 sont les arguments de cette fonction, séparés par une virgule, et mis entre des parenthèses qui sont obligatoires (même s'il n'y a aucun argument).
On place le code de la fonction dans un bloc d'instructions, délimité par des accolades.
On renvoie éventuellement une valeur (c'est la valeur que "prendra" la fonction quand on l'appellera).
Créer une fonction dans une variable

Eh bien figurez-vous qu'il existe une autre manière de créer une fonction, en utilisant une variable.
Voyez plutôt :

var toto = function(arg1, arg2)
{
// code
}
Cette fonction est exactement la même que celle au dessus (à l'exception du return valeur;).
Cette fois-ci :

  • On a déclaré notre variable, à l'aide du mot-clé var (comme nous avons vu dans le chapitre à ce sujet).
  • On a donné à notre variable le nom de toto.
  • On lui a affecté(on lui a donné pour valeur) une fonction, prenant deux paramètres nommés arg1 et arg2, et exécutant le code entre les accolades.
    Mais alors, si ce sont les mêmes fonctions, quel est l'intérêt d'utiliser cette nouvelle méthode plutôt que l'ancienne ?
    C'est en fait un autre point de vue, assez différent : en déclarant une fonction de cette manière, on voit clairement qu'on enregistre notre fonction dans une variable.

On peut donc très facilement :

  • créer une fonction locale ou globale
  • re-déclarer une fonction (autrement dit, modifier son code), simplement en modifiant la variable
  • créer des tableaux de fonctions
    etc.

bonjour
je me permet une petite précision
mais il me semble que les navigateurs n'interprete pas la chose de la même façcon

lorsque le navigateur interprete le javascript il réorganise le code
il fait remonter tout en haut la déclaration des variables, puis la déclaration des fonctions et enfin l'assignement des valeur aux variables
ainsi si on teste le code suivant

    toto1();
    toto2();
    var a = 12;

    function toto1(){
        console.log(a);
    }

    var toto2 = function(){
        console.log(a);
    }

on voit que l'appel à toto1 renvoie undefined, alors que l'appel à toto2 renvoie un erreur
en faite voici ce que voit l'interpreteur

    var a;
    var toto2;

    function toto1(){
        console.log(a);
    }

    toto1();
    toto2();
    a = 12;

    toto2 = function(){
        console.log(a);
    }

on comprend pourquoi toto1 renvoie undefined, et pas une erreur puis que la variable a est déclarée mais n'a pas de valeur
on comprend pourquoi l'appel à toto2 renvoie une erreur puisque toto2 est déclaré mais n'est pas encore une fonction

a+