Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Explication sur syntaxe et déroulement d'un script


Sujet :

JavaScript

  1. #1
    Membre à l'essai
    Explication sur syntaxe et déroulement d'un script
    Bonjour
    je n arrive pas a comprendre la syntaxe du script comme le point d'esclamation avant la fonction ou l'utilisation des crochets
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    ! function(e) {
      //code
    }([function(e,b,y){
     //code
    }
    , function(e,b,y){
     //code
    }]);

    Merci de votre aide

  2. #2
    Membre à l'essai
    Ce message n'a pas pu être affiché car il comporte des erreurs.

  3. #3
    Membre expert
    (function () {})()
    Salut,

    Citation Envoyé par BrainError Voir le message

    Tel que je comprends la chose (sans être à 100% sûr) :
    +1... Hier j'avais compris de la même manière que toi (ou presque) mais je n'ai pas répondu car je pensais qu'il manquait des parenthèses :

    Citation Envoyé par BrainError Voir le message



    1. Tu as une fonction anonyme principale possédant 1 unique argument "e" :
    2. Tu appelles immédiatement cette fonction à l'aide des parenthèses "()" :
      ! function(e) { //code
      }([function(e,b,y){ //code } , function(e,b,y){ //code }]);

    Normalement quand on a une expression de fonction comme ça function () {} il ne suffit pas d'ajouter une paire de parenthèses comme cela : function () {}() pour que la fonction soit exécutée (ici on a une erreur de syntaxe)... En général pour avoir une IIFE on ajoute d'autres parenthèses (celles en bleu) : (function () {})()...

    Mais en fait pour que l'interpréteur traite ceci function () {} comme une expression l'usage des parenthèses en bleu n'est pas le seul moyen, l’opérateur ! permet aussi cela... Du coup avec cet opérateur et les parenthèses en rouge on peut aussi lancée l’exécution de la fonction comme cela : ! function () {}()...

    Je n'avais en tête que le premier moyen (celui des parenthèses) du coup je pensais qu'il y avait peut-être une erreur...



    Citation Envoyé par BrainError Voir le message
    Le résultat final est donc soit "true" soit "false".
    Dans l'exemple "le résultat final"* n'est pas récupéré... Il est donc possible que l'usage de l’opérateur ! ait seulement pour objectif l'auto-exécution (exécution immédiate) de la fonction...


    * Si la fonction ne retourne rien (pas de return ) le résultat finale sera toujours true...

  4. #4
    Membre expert
    Citation Envoyé par Beginner. Voir le message
    Il est donc possible que l'usage de l’opérateur ! ait seulement pour objectif l'auto-exécution (exécution immédiate) de la fonction...
    Il semblerait que l'usage de l’opérateur ! ait certains avantages (par rapport à l'usage classique des parenthèses) : https://github.com/airbnb/javascript/issues/44

  5. #5
    Membre à l'essai
    Hier en faisant des tests j'avais compris pour l'array de fonctions il me restait juste l'explication pour le point d'exclamation mais maintenant c'est bon merci de votre aide

  6. #6
    Expert confirmé
    Merci aussi pour le décryptage très pro de Brainerror;

    Je m'interroge quand même sur l'aspect "pratique" du code;

    dagbass63, tu aurais le contexte du script?

  7. #7
    Membre expert
    Citation Envoyé par dagbass63 Voir le message
    Hier en faisant des tests j'avais compris pour l'array de fonctions il me restait juste l'explication pour le point d'exclamation mais maintenant c'est bon merci de votre aide
    Ouais moi aussi j'avais compris le code comme l'a expliqué BrainError excepté concernant cet opérateur unaire !... Je ne pense pas que l'objectif de sa présence soit d'obtenir une négation logique de la valeur retournée surtout que le résultat de la négation n'est pas utilisé/récupéré... Il est donc plus probable que l'usage de l’opérateur ! ait seulement pour objectif de permettre l'auto-exécution (exécution immédiate) de la fonction par l'ajout des parenthèses (avec seulement ces dernières (sans l'opérateur !) on a une erreur de syntaxe).

    D'ailleurs on aurait pu utiliser un autre opérateur pour atteindre cet objectif (exécution immédiate)...

    En tous cas merci pour cette question, cela m'a poussé à faire une recherche concernant cet usage particulier...
    Comme quoi on peut apprendre des choses en essayant de répondre à une question...

    Citation Envoyé par javatwister Voir le message

    Je m'interroge quand même sur l'aspect "pratique" du code;
    C'est pas moi qui utiliserait cette syntaxe lol...
    Mais bon d'une manière générale les IIFE ont (ou avaient selon certains) leurs intérêts...

  8. #8
    Membre à l'essai
    c'est pour une extension firefox un script d'arriere-plan

  9. #9
    Rédacteur



    Un exemple fonctionnel permet de comprendre le code au premier regard à condition de connaître le truc du !, ce que j'ignorais.

    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    ! function (ar) {
        ar[0](2, 3, 5);
        ar[1](2, 3, 5);
    }(
        [
            function (a, b, c) {
                console.log(`addition = ${a + b + c}`);
            },
            function (a, b, c) {
                console.log(`multiplication = ${a * b * c}`);
            }
        ]
    );

  10. #10
    Membre expert
    Salut,

    Oui c'est vrai ton exemple aide bien...

    Le même avec les parenthèses :

    Code Javascript :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
     
     
    (function (ar) {
        ar[0](2, 3, 5);
        ar[1](2, 3, 5);
    })(
        [
            function (a, b, c) {
                console.log(`addition = ${a + b + c}`);
            },
            function (a, b, c) {
                console.log(`multiplication = ${a * b * c}`);
            }
        ]
    );

  11. #11
    Modérateur

    Bonjour,
    concernant le ! devant le mot function, d'autres opérateurs font également le travail, + (plus), - (moins), ~ (tilde), on peut même les combiner.

###raw>template_hook.ano_emploi###