Explication sur syntaxe et déroulement d'un script

Version imprimable

11/11/2019, 22h38
dagbass63

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:

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
12/11/2019, 14h54
BrainError
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" :
  
  Citation:
  
  ! 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 "()" :
  
  Citation:
  
  ! 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 :
  
  Citation:
  
  ! 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 :
  
  Citation:
  
  ! 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 :
  
  Citation:
  
  ! 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 :
  
  Citation:
  
  ! 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 "!" :
  
  Citation:
  
  ! function(e) { //code
  }([function(e,b,y){
  //code
  }
  , function(e,b,y){
  //code
  }]);
Le résultat final est donc soit "true" soit "false".
12/11/2019, 17h57
Beginner.

(function () {})()
Salut,

Citation:

Envoyé par BrainError

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

Tu as une fonction anonyme principale possédant 1 unique argument "e" :
Tu appelles immédiatement cette fonction à l'aide des parenthèses "()" :

Citation:

! 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

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...
12/11/2019, 18h11
Beginner.

Citation:

Envoyé par Beginner.

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
12/11/2019, 21h36
dagbass63

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
12/11/2019, 21h51
javatwister

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?
12/11/2019, 23h03
Beginner.

Citation:

Envoyé par dagbass63

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

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...
12/11/2019, 23h37
dagbass63

c'est pour une extension firefox un script d'arriere-plan

:salut:

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

Code:

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

Salut,

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

Le même avec les parenthèses :

Code:

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

14/11/2019, 10h49
NoSmoking

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