ES3 en détail

Une déclaration de fonction (dont la forme abrégée sera FD pour « function declaration ») est une fonction :

• dont le nom est obligatoire ;
• dont le code source se trouve au niveau Programme ou directement dans le corps d'une autre fonction en dehors d'une position attendant une expression ;
• qui est créée lors de la phase d'entrée dans le contexte ;
• qui influence l'objet des variables ;
• et qui se déclare de la façon suivante :

function upTop() {
    /* ... */
}

La fonctionnalité principale de ce type de fonctions est qu'il est le seul à influencer l'objet des variables (car les variables sont stockées dans l'objet des variables des contextes). Cette fonctionnalité définit le second point important : la fonction est déjà disponible lors de la phase d'exécution du code (car les déclarations de fonction sont stockées dans l'objet des variables lors de la phase d'entrée dans le contexte, avant que l'exécution ne commence).

Une fonction peut donc être appelée avant sa déclaration :

upTop(); // `"Monde d'en haut"`

function upTop() {
    console.log("Monde d'en haut");
}

Ce qu'il est également important de noter, c'est que ces fonctions ne peuvent être définies dans une instruction qu'en dehors de toutes expressions (comme nous allons le décrire ci-dessous) :

// une déclaration de fonction peut-être faite :

// 1) directement dans le contexte global
function upTop() {

    // 2) ou à l'intérieur du corps
    // d'une autre fonction
    function eden() {}
}

Elles ne peuvent être définies qu'à ces deux types d'endroits et nulle part ailleurs (c'est-à-dire. qu'il est impossible de déclarer une fonction à une position attendant une expression ou dans une structure de contrôle if, for, etc.).

Il existe une alternative à la déclaration de fonction qui est appelée l'expression de fonction, c'est ce dont nous allons parler à présent.

Une expression de fonction (dont la forme abrégée sera FE pour « function expression ») est une fonction :

• qui peut seulement être définie à une position attendant une expression :
• dont le nom est facultatif ;
• dont la définition n'a aucun effet sur l'objet des variables ;
• qui est créée lors de la phase d'exécution du code.

La fonctionnalité principale de ce type de fonctions est qu'elle se trouvera toujours dans une expression. Voici ici un exemple avec expression d'affectation :

var downBelow = function () {
    /* ... */
};

Cet exemple montre comment une expression de fonction anonyme est affectée à la variable downBelow. Après cela, la fonction sera disponible via l'identifiant downBelow et pourra être appelée (activée) avec downBelow().

Il est possible également pour les expressions de fonction de posséder un nom, mais celui-ci est facultatif :

var downBelow = function lowerWorld() {
    /* ... */
};

Ce qu'il est important de noter ici c'est que depuis l'extérieur, l'expression de fonction de l'exemple ci-dessus peut être accédé via la variable downBelow (et appelée avec downBelow()) alors que depuis l'intérieur de la fonction (dans le cas d'un appel récursif par exemple), il est aussi possible d'utiliser le nom lowerWorld (et d'appeler lowerWorld()).

Quand un nom est assigné à une expression de fonction, il devient difficile de la distinguer d'une déclaration de fonction pour un œil non averti. Cependant, si vous connaissez bien la définition, il est simple de les distinguer : les expressions de fonction se trouvent toujours dans des expressions. Dans les exemples suivants, nous pouvons voir que toutes ces fonctions sont des expressions de fonction, car elles se trouvent dans des expressions :

// entre des parenthèses (opérateur de groupement) on ne peut placer que des expressions
(function downBelow() {});

// dans des initialiseurs de tableau il ne peut aussi y avoir que des expressions
[function lowerWorld() {}];

// l'opérateur virgule ne se trouve que dans des expressions (à ne pas confondre avec le séparateur d'instructions `;`)
1, function poorSide() {};

Une expression de fonction n'est créée que pendant la phase d'exécution du code et n'est donc pas stockée dans l'objet des variables. Voyons un exemple induit par ce comportement :

// L'expression de fonction n'est pas disponible avant sa déclaration
// (car elle est créée lors de la phase d'exécution du code),

console.log(downBelow); // « erreur : `downBelow` n'est pas défini(e) »

(function downBelow() {});

// ni après (car elle n'est pas dans l'objet des variables)

console.log(downBelow);  // « erreur : `downBelow` n'est pas défini(e) »

La question logique est maintenant : « pourquoi avons-nous besoin de ce type de fonctions ? »

La réponse la plus simple est que c'est lui qui permet au JavaScript de passer des fonctions à travers les paramètres des fonctions et qui permet l'utilisation des fonctions de rappel (« callback »). Sans elles, on aurait bien du mal à gérer le caractère asynchrone du JavaScript. Voyez plutôt :

// Déclaration de fonction ajoutée à l'objet des variables
function downBelow(callback) {
    callback();
}

// Expression de fonction...
downBelow(function adam() {
    console.log('downBelow.adam');
});
// ...et exécution du downBelow avec cette `FE` en paramètre,
// aussitôt « oubliée » après l'exécution.

// Nouvelle expression de fonction
downBelow(function bob() {
    console.log('downBelow.bob');
});

De plus ainsi, adam et bob ne polluent pas inutilement l'objet des variables.

Dans le cas où une expression de fonction est affectée à une variable, la fonction reste accessible en mémoire et peut être utilisée ultérieurement via ce nom de variable (car les variables influencent l'objet des variables) :

// Cette expression de fonction est affectée à `downBelow`
// qui elle est ajoutée à l'objet des variables.
var downBelow = function () {
    console.log("Monde d'en bas");
};

// Ce qui permet plus tard d'appeler la fonction anonyme ci-dessus.
downBelow();

Un autre exemple est la création de portée encapsulée pour masquer aux contextes extérieurs les données utilisées pour la création d'une fonction (dans cet exemple, l'expression de fonction utilisée est appelée aussitôt qu'elle est créée) :

var downBelow = {};

(function prepare() {

    var upMaterial = 10;

    downBelow.adam = function () {
        console.log(upMaterial);
    };

})();

downBelow.adam(); // `10`;

console.log(upMaterial); // « erreur : `upMaterial` n'est pas défini(e) »

Nous voyons que la fonction downBelow.adam (via sa propriété [[Scope]]) a accès à la variable upMaterial de l'expression de fonction prepare. D'un autre côté, cette variable upMaterial n'est pas accessible directement depuis l'extérieur. Cette stratégie est utilisée dans beaucoup de bibliothèques pour créer des données « privées » et masquer les éléments de construction. Souvent dans ce motif, le nom facultatif de la fonction est omis :

(function () {

    // Portée d'initialisation

})();

Voici encore un autre exemple d'expression de fonction créée conditionnellement à l'exécution et qui ne pollue pas l'objet des variables :

var upMaterial = 10;

var goOrStay = (upMaterial > 5
    ? function () { console.log("Aller dans le monde d'en haut !"); }
    : function () { console.log("Rester dans le monde d'en bas..."); }
);

goOrStay(); // `"Aller dans le monde d'en haut !"`

var eternalLove = function () {
    return this.love;
}.bind({ love: true });

eternalLove(); // `true`
eternalLove.call({ love: false }); // toujours `true`

Revenons donc à notre question du début d'article qui était « pourquoi dans l'appel ci-dessous, la fonction est entourée avec des parenthèses ? » :

(function () {
    /* ... */
})();

ou encore « pourquoi avons-nous besoin de ces parenthèses autour d'une fonction si nous voulons l'exécuter juste après sa définition. Voici la réponse : c'est pour permettre à l'instruction d'être à « une position attendant une expression » qui est la condition requise pour créer une expression de fonction.

D'après le standard, une instruction interprétée en tant qu'expression ne peut pas commencer par l'accolade ouvrante {, car on ne pourrait la distinguer d'une structure de contrôle et de la même manière, elle ne peut commencer par le mot-clé function, car on ne pourrait la distinguer d'une déclaration de fonction. c'est-à-dire que si nous essayons de définir une fonction immédiatement appelée (qui ne peut l'être que si elle est de type expression de fonction) de cette manière (en commençant par le mot-clé function) :

function () {
    /* ... */
}();

// ou même avec un nom

function dualGravity() {
    /* ... */
}();

cela va entrer en conflit avec la manière dont les déclarations de fonction sont créées. Les raisons de ce conflit varient.

Si nous prenons le cas d'un code global (c'est-à-dire au niveau Programme), l'analyseur va traiter la fonction comme une déclaration, car l'instruction commence par le mot-clé function.

Dans le premier cas, nous obtiendrons une SyntaxError, car la fonction n'a pas de nom (une déclaration de fonction doit obligatoirement avoir un nom qui représente son identifiant dans l'objet des variables).

Dans le second cas, puisque nous avons un nom (dualGravity) la déclaration de fonction est créée normalement. Mais nous avons de nouveau une erreur de syntaxe, car nous avons un opérateur de groupement sans expression à l'intérieur. Notez bien que dans ce cas nous avons un opérateur de groupement qui suit la déclaration de fonction, mais pas des parenthèses d'appel de fonction ! Aussi si nous avions la source suivante :

// `dualGravity` est une déclaration de fonction
// et est créée à l'entrée dans le contexte

console.log(dualGravity); // `function dualGravity(world) { console.log(world); }`

function dualGravity(world) {
    console.log(world);
}('Upside Down'); // et ceci est juste un opérateur de groupement, pas un appel !

dualGravity('Upside Down'); // et ceci est un appel qui retourne `'Upside Down'`

Tout se déroule bien ici, car nous avons deux syntaxes valides — une déclaration de fonction et un opérateur de groupement contenant une expression composée de l'opérande 'Upside Down' de type chaîne de caractères. L'exemple ci-dessous est donc identique !

// déclaration de fonction
function dualGravity(world) {
    console.log(world);
}

// un opérateur de groupement
// avec une expression
('Upside Down');

// un autre opérateur de groupement
// avec une expression (de fonction)
(function () {});

// ceci est aussi un opérateur de groupement
// avec une expression composée d'un opérande
// de type nombre
(1);

// etc.

Dans le cas d'une définition à l'intérieur d'une structure de contrôle à cause d'une ambiguïté nous aurons également une erreur de syntaxe :

if (true) function dualGravity() { console.log('Upside Down'); }

La construction ci-dessus en accord avec les spécifications est syntaxiquement incorrecte (une expression ne peut commencer avec un mot-clé function), mais comme nous le verrons plus bas, chaque implémentation gérera ce cas de figure de sa propre manière (au lieu de renvoyer une erreur comme le voudrait la spécification).

Sachant tout cela, le meilleur moyen d'explicitement faire comprendre au moteur que nous souhaitons une expression de fonction et non une déclaration de fonction est d'utiliser un opérateur de groupement (car à l'intérieur de celui-ci, il y a obligatoirement une expression). Ainsi, l'analyseur distingue le code comme une expression de fonction et il n'y a aucune ambiguïté. La fonction va être créée pendant la phase d'exécution du code, puis exécutée, puis retirée (car il n'y a plus de référence sur elle).

(function dualGravity(world) {
    console.log(world);
})('Upside Down'); // OK, c'est un appel avec en premier paramètre la valeur `'Upside Down'` et pas un opérateur de groupement.

Dans l'exemple ci-dessus, les parenthèses de fin exécutent le retour de l'expression (à savoir une fonction) en lui passant un paramètre.

Notons que dans l'exemple suivant, l'exécution immédiate de la fonction associée comme valeur de adam ne requiert pas de parenthèses, car le code de la fonction est déjà dans un endroit réservé pour une expression et l'analyseur sait qu'à ce niveau il ne peut s'agir que d'une expression de fonction qui sera créée lors de la phase d'exécution du code :

var downBelow = {

    adam: function (love) {
        return love ? 'oui' : 'non';
    }(true)

};

console.log(downBelow.adam); // `'oui'`

downBelow.adam est donc une chaîne de caractères et non une fonction comme nous pourrions nous y attendre à première vue. La fonction est utilisée ici uniquement comme initialiseur de propriété (dépendant d'un paramètre conditionnel) et est créée et exécutée juste après cela (puis perdue).

Donc la réponse complète à propos des parenthèses est la suivante :

les parenthèses de l'opérateur de groupement sont requises quand une fonction ne se trouve pas à une position attendant une expression si vous souhaitez appeler immédiatement la fonction après sa création. Dans ce cas-là nous transformons juste manuellement une déclaration de fonction en expression de fonction.

Dans le cas où l'analyseur sait déjà résoudre cette fonction comme une expression de fonction c'est-à-dire que la fonction est déjà à une position attendant une expression, les parenthèses ne sont pas obligatoires.

Comme l'opérateur de groupement n'est qu'un moyen d'indiquer à l'analyseur que le code en cours doit être analysé comme une expression, il est possible d'utiliser tous les autres moyens pour transformer une instruction en une position nécessitant une expression pour créer une expression de fonction. Par exemple :

// Ceci indique que nous manipulons une expression de fonction
(function () {
    console.log("La gravité partagée");
}());

//, mais ceci aussi
1, function () {
    console.log("Le monde d'en haut");
}();

// ainsi que ceci
!function () {
     console.log("Le monde d'en bas");
}();

// et n'importe quelles autres
// transformations manuelles

/* ... */

C'est juste que l'opérateur de groupement est la méthode la plus élégante et répandue.

Au passage vous aurez peut-être remarqué que les parenthèses de groupement peuvent être placées autour de la déclaration de la fonction (sans inclure ses parenthèses appelantes) ou bien autour de la totalité, dans tous les cas l'instruction sera reconnue comme une expression de fonction que l'on souhaite appeler immédiatement.

// Deux expressions de fonction tout aussi valides
(function () {})();
(function () {}());

Dans le premier cas, nous utilisons un opérateur de groupement pour indiquer que nous créons une expression de fonction (function () {}). Cette opération retourne à la syntaxe suivante sa référence. Puis nous utilisons les parenthèses d'appel () qui appliquées à la référence retournée exécutent le code (car une paire de parenthèses suivant une référence demandent un appel).

Dans le second cas, nous utilisons un opérateur de groupement pour indiquer que nous créons une expression de fonction que l'on exécute immédiatement (function () {}()).

II-C-1. Implémentation : déclaration de fonction conditionnelle▲

if (true) {

    function dualGravity() {
        console.log(0);
    }

} else {

    function dualGravity() {
        console.log(1);
    }

}

dualGravity(); // `1` ou `0` ?

II-C-2. Fonctionnalité : l'expression de fonction nommée▲

(function edenAndAdam(love) {

    if (love) {
        return;
    }

    edenAndAdam(true); // le nom `edenAndAdam` est disponible

})();

// mais depuis l'extérieur ce n'est pas possible

edenAndAdam(); // « erreur : `edenAndAdam` n'est pas défini(e) »

__specialObject = {};

Scope.unshift(__specialObject) // ajout en amont

foo = new FunctionExpression()

foo.[[Scope]] = [].concat(Scope) // copie

foo.[[Scope]][0].foo = foo // {DontDelete}, {ReadOnly}

Scope.shift() // retrait en amont

Object.prototype.side = 2;

(function () {
    console.log(side); // `2`
})();

Object.prototype.side = 3;

function upSideDown() {

    var side = 2;

    // déclaration de fonction

    function upTop() {
        console.log(side);
    }

    upTop(); // `2`, depuis `AO(<upSideDown>)`

    // la même chose avec une expression de fonction anonyme

    (function () {
        console.log(side); // `2`, aussi de `AO(<upSideDown>)`
    })();

}

upSideDown();

AO(<bar>) // rien, puis
AO(<bar>).[[Prototype]] // trouvée, et vaut `3`. On s'arrête.

AO(anonymous) // rien, puis
AO(anonymous).[[Prototype]] // trouvée, et vaut `3`. On s'arrête.

Object.prototype.side = 3;

function upTop() {

    var side = 2;

    (function downBelow() {

        console.log(side); // `3`, et non `2`, car AO(<upTop>) n'est jamais atteint.

        // `side` est résolue ainsi :
        // __specialObject(<downBelow>) // rien puis
        // __specialObject(<downBelow>).[[Prototype]] // trouvée, et vaut 3. On s'arrête.

    })();
}

upTop();

// Une expression de fonction est disponible dans l'objet des variables
// via un nom optionnel
// c'est une définition comme dans une déclaration de fonction
upSideDown(); // `"Le monde inversé"`

(function upSideDown() {
    console.log("Le monde inversé");
});

// elle est aussi disponible après sa définition
// comme pour les déclarations de fonction ; le nom optionnel
// se trouve dans l'objet des variables
upSideDown(); // `"Le monde inversé"`

var upTop = function downBelow() {
    console.log('upSideDown');
};

// L'expression de fonction est toujours dans l'objet des variables - première erreur.

console.log(typeof downBelow); // `function downBelow() { console.log('upSideDown'); }`

//, mais, ceci est encore plus intéressant
console.log(upTop === downBelow); // `false` !

upTop.side = 1;
console.log(downBelow.side); // `undefined`

//, mais les deux fonctions
// font la même chose

upTop(); // `'upSideDown'`
downBelow(); // `'upSideDown'`

(function downBelow() {});

var upTop = downBelow;

console.log(upTop === downBelow); // `true`

upTop.side = 1;
console.log(downBelow.side); // `1`

var upTop = function downBelow() {

    console.log([
        arguments.callee === downBelow,
        arguments.callee === upTop
    ]);

};

downBelow(); // `[true, false]`
upTop(); // `[false, true]`

var upTop = function downBelow() {
    console.log(1);
};

if (false) {

    upTop = function downBelow() {
        console.log(2);
    };

}
downBelow(); // `2`
upTop(); // `1`

(function () {

    // sans le mot-clé `var` ce n'est pas une variable du
    // contexte local, mais une propriété de l'objet globale

    upTop = function upTop() {};

})();

// cependant de l'extérieur
// l'expression de fonction nommée `upTop`
// est indisponible

console.log(typeof upTop); // `undefined`

Ce troisième type de fonctions est traité séparément des déclarations de fonction et des expressions de fonction, car il a également ses propres fonctionnalités. Sa fonctionnalité principale est que sa propriété [[Scope]] ne contient que l'objet global :

var adam = true;

function upTop() {

    var adam = false;
    var eden = true;

    var transWorld = new Function('console.log(adam); console.log(eden);');

    transWorld(); // `true`, « erreur : `eden` n'est pas défini(e) »

}

Nous pouvons voir que la propriété interne [[Scope]] de la fonction transWorld ne contient pas l'objet d'activation du contexte de upTop. La variable eden n'est pas accessible et la variable adam est résolue depuis le contexte global. En passant, vous pouvez remarquer que le constructeur Function peut être utilisé avec ou sans le mot-clé new de la même manière.

L'autre particularité de ce type de fonctions est liée aux productions de grammaires identiques (« equated grammar productions ») et aux objets joints (« joined objects »). Ce mécanisme est fourni par la spécification comme une suggestion d'optimisation (qui ne reste donc qu'une suggestion, non une obligation du standard). Par exemple, si vous avez un tableau de 100 éléments qui sont assignés dans une boucle depuis une expression de fonction, le mécanisme des objets joints sera utilisé :

var transWorld = [];

for (var floor = 0; floor < 100; floor++) {
    transWorld[floor] = function () {}; // les objets joints peuvent être utilisés (même fonction pour les 100 objets)
}

Mais les fonctions créées via le constructeur Function ne sont jamais jointes (même sans new) :

var transWorld = [];

for (var floor = 0; floor < 100; floor++) {
    transWorld[floor] = Function(''); // 100 fonctions différentes en mémoire
}

Encore un autre exemple avec les objets joints :

function world() {

    function dualGravity(gravity) {
        return gravity * gravity;
    }

    return dualGravity;
}

var x = world();
var y = world();

Ici les implémentations peuvent utiliser la méthode des objets joints pour x et y (et utiliser la même objet de fonction), car les fonctions (ainsi que leur propriété [[Scope]]) retournées par world() ne peuvent être distinguées. Encore une fois, si les fonctions sont créées avec le constructeur Function, cela demande plus de ressources mémoire.