IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
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
    Nouveau membre du Club
    Homme Profil pro
    Analyse système
    Inscrit en
    Mai 2019
    Messages
    22
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Analyse système

    Informations forums :
    Inscription : Mai 2019
    Messages : 22
    Points : 25
    Points
    25
    Par défaut 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
    Homme Profil pro
    Autre
    Inscrit en
    Décembre 2017
    Messages
    10
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 30
    Localisation : France, Seine et Marne (Île de France)

    Informations professionnelles :
    Activité : Autre
    Secteur : Industrie

    Informations forums :
    Inscription : Décembre 2017
    Messages : 10
    Points : 22
    Points
    22
    Par défaut
    Salut,

    Tel que je comprends la chose (sans être à 100% sûr) :


    1. Tu as une fonction anonyme principale possédant 1 unique argument "e" :
      ! function(e) { //code
      }
      ([function(e,b,y){
      //code
      }
      , function(e,b,y){
      //code
      }]);
    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
      }]);
    3. L'argument "e" de cet appel à pour valeur un array créé avec les crochets :
      ! function(e) { //code
      }([function(e,b,y){
      //code
      }
      , function(e,b,y){
      //code
      }]);
    4. Cet array comporte 2 valeurs séparées par une virgule :
      ! function(e) { //code
      }([function(e,b,y){
      //code
      }
      , function(e,b,y){
      //code
      }]);
    5. La première valeur de cet array est une fonction anonyme possédant 3 arguments ("e", "b" et "y"). Attention, il s'agit de la fonction et non pas de son résultat, puisqu'elle n'est pas appelée :
      ! function(e) { //code
      }([function(e,b,y){
      //code
      }

      , function(e,b,y){
      //code
      }]);
    6. La seconde valeur de cet array est une autre fonction selon le même principe :
      ! function(e) { //code
      }([function(e,b,y){
      //code
      }
      , function(e,b,y){
      //code
      }
      ]);
    7. Une fois le résultat de la fonction anonyme principale rendu, il est négativé par le point d'exclamation "!" :
      ! function(e) { //code
      }([function(e,b,y){
      //code
      }
      , function(e,b,y){
      //code
      }]);


    Le résultat final est donc soit "true" soit "false".

  3. #3
    Membre expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 872
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 872
    Points : 3 716
    Points
    3 716
    Par défaut (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
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 872
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 872
    Points : 3 716
    Points
    3 716
    Par défaut
    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
    Nouveau membre du Club
    Homme Profil pro
    Analyse système
    Inscrit en
    Mai 2019
    Messages
    22
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Analyse système

    Informations forums :
    Inscription : Mai 2019
    Messages : 22
    Points : 25
    Points
    25
    Par défaut
    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é
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    Août 2003
    Messages
    3 681
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : Août 2003
    Messages : 3 681
    Points : 5 221
    Points
    5 221
    Par défaut
    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
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 872
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 872
    Points : 3 716
    Points
    3 716
    Par défaut
    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
    Nouveau membre du Club
    Homme Profil pro
    Analyse système
    Inscrit en
    Mai 2019
    Messages
    22
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Analyse système

    Informations forums :
    Inscription : Mai 2019
    Messages : 22
    Points : 25
    Points
    25
    Par défaut
    c'est pour une extension firefox un script d'arriere-plan

  9. #9
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Points : 22 933
    Points
    22 933
    Billets dans le blog
    125
    Par défaut


    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}`);
            }
        ]
    );

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  10. #10
    Membre expert
    Homme Profil pro
    Inscrit en
    Octobre 2011
    Messages
    2 872
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : Octobre 2011
    Messages : 2 872
    Points : 3 716
    Points
    3 716
    Par défaut
    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

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 109
    Points
    44 109
    Par défaut
    Bonjour,
    concernant le ! devant le mot function, d'autres opérateurs font également le travail, + (plus), - (moins), ~ (tilde), on peut même les combiner.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Explication sur tout petit script
    Par Fluxy dans le forum Langage
    Réponses: 8
    Dernier message: 23/07/2007, 09h29
  2. Quelques explications sur un script shell
    Par Olivier Regnier dans le forum Shell et commandes GNU
    Réponses: 14
    Dernier message: 03/07/2007, 20h54
  3. Explication sur un script
    Par donny dans le forum Linux
    Réponses: 6
    Dernier message: 29/06/2006, 12h33
  4. Explication sur un script
    Par Krispy dans le forum Linux
    Réponses: 1
    Dernier message: 22/03/2006, 13h17
  5. Explications sur la syntaxe iptables
    Par Nightfall dans le forum Sécurité
    Réponses: 4
    Dernier message: 11/05/2005, 02h33

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo