L'éloquent JavaScript et les fonctions

Bonsoir à tous,

Il y a de nombreux mois, j'ai voulu revoir en détails les bases du JS et, sur le channel IRC http://irc.lc/freenode/javascript , on m'a conseillé trois lectures :

1. Eloquent JavaScript, qui apparemment est une référence disponible gratuitement ici : http://eloquentjavascript.net/ (il existe une version française mais j'ai constaté quelques petites incohérences de traduction, je préfère clairement l'original en anglais et je me base sur cette version) ;

2. Programming JavaScript Applications ( http://t1.gstatic.com/images?q=tbn:ANd9GcScsPtvBAmWFjKn6nKBdtxrIAdi3IedQZfGhrJQ_hBmRc4AX4i2 ) ;

3. Enfin, http://robotlolita.me/2011/10/09/understanding-javascript-oop.html (traite de l'orienté objets).

J'ai enfin ( ) commencé la lecture de Eloquent JavaScript (L'éloquent JavaScript) et quelque chose me chiffonne un peu. J'espère que vous saurez éclairer ma lanterne.

Questions

1. L'auteur affirme qu'une "expression" produit une valeur (toute valeur est une expression, une expression peut être constituée d'une autre expression séparée par un opérateur binaire, ou encore encadrée par des parenthèses, etc.). En particulier, une fonction est une expression lorsqu'elle retourne une valeur (page 28).

2. Page 12 : une fonction est une valeur. Un objet est une valeur. Un nombre en est une également, etc.

3. L'auteur affirme, page 27, que alert est une variable qui possède une fonction.

4. Toujours page 27, il indique qu'un appel à une fonction se fait en ajoutant des parenthèses après une expression qui produit une fonction.

5. Même page : "Un appel à une fonction qui retourne une valeur peut être utilisé au sein d’une expression, puisqu’une fonction qui retourne une valeur est une expression.".

6. Bon je saute plusieurs pages, pour aller au "Résumé" du chapitre "Fonctions" ! (page 55). Il est écrit : le mot-clé function, quand il est utilisé en tant qu'expression, peut créer une valeur de type fonction. Quand utilisé comme une instruction, il peut être utilisé pour déclarer une variable et lui donner une fonction comme valeur. (traduction littérale)

En complément de ça (ie. : de la puce n°6), l'auteur donne ce code :

1
2
3
4
5

// Create a function value f
var f = function(a) { console.log(a + 2); };

// Declare g to be a function
function g(a, b) { return a*b*3.5; }

Questions

1. Que l'auteur ait dit qu'une fonction est une variable, puis qu'ailleurs il ait expliqué que c'est une valeur ou encore une expression : peu importe, ça ne me choque pas. En effet, ces trois mots sont presque toujours synonymes. Bien qu'une valeur puisse ne pas être une variable, un nom de variable est toujours une valeur. Une valeur et un nom de variable sont toujours une expression, bien qu'une expression puisse ne pas être une variable. Une expression est toujours une valeur. Bref on voit bien que ces mots sont en effet presque toujours interchangeables/synonymes.

2. Par contre, là où j'ai quelques doutes, c'est déjà que l'auteur semble faire une grande différence entre initialiser une variable en lui donnant une fonction, et déclarer une fonction sans la mettre explicitement dans une variable (puce n°6). Pour moi, ces deux façons d'utiliser le mot-clé function sont strictement identiques : dans les deux cas une variable est utilisée. var f = function(a)... ici la variable f. Et dans function g(a, b)..., ici c'est la variable g (selon les propres dires de l'auteur). Donc dans l'une ou l'autre façon de faire, la fonction est bien une valeur (ici pas de contradiction avec la puce n°6 hein). La "contradiction", si c'en est une, c'est que l'auteur semble réellement différencier ces deux façons de faire, et je ne comprends pas pourquoi.

3. Enfin, j'aimerais parler des puces n°4 et n°5. Si j'ai bien compris, l'auteur considère qu'ici : g(3.2);, il y a en tout deux expressions : g puisque c'est une variable qui contient la fonction et 3.2. Est-ce bien cela ? Seulement, par définition d'une expression, on pourrait donc avoir : (g + 56)(3.2); : en effet, une expression peut être l'application d'un opérateur binaire entre deux expressions ! Or ça ne fonctionne pas : on voit bien que l'auteur a manqué de rigueur en disant qu'un appel de fonction consiste en l'utilisation de parenthèses après une expression. Non ? Concernant la puce n°5, l'auteur semble dire que si la fonction retourne une valeur, alors on peut considérer non seulement que son nom est une variable/une expression, MAIS AUSSI que son APPEL en est une ! Je trouve ça cohérent, mais l'auteur ne l'a pas dit mot pour mot, j'aimerais bien avoir votre avis là-dessus : pensez-vous que foo() est une expression ? Si oui, de combien d'expressions est-elle constituée ? 1 : foo ? Un appel serait donc une catégorie particulière d'expressions (à cause des parenthèses). 2 : foo et () ?

4. Question plus générale : cette vision des fonctions, qui seraient des valeurs/variables voire expressions est-elle propre à l'auteur ? Ou est-ce communément admis par les informaticiens ? N'est-ce d'ailleurs pas ce que l'on appelle "fonctions valuées" ?

Il y a deux différences majeurs :

• la 1ère est défini à l'execution, càd que tu ne peux pas l'appeler avant la ligne 2. Tu peux donc la déclarer dans des conditions, boucles (même si non recommandé), etc.
• la 1ère est une fonction anonyme associé à une variable. Elle n'a pas de nom.

1
2
3
4
5
6
7
8

foo() // erreur
bar() // pas d'erreur

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

foo.name === ''
bar.name === 'bar'

On peut aussi modifier le scope de la première en utilisant let ou en enlevant le var (global).

Comme pour toute question de programmation, StackOverflow à des réponses complètes.

• la 1ère est défini à l'execution, càd que tu ne peux pas l'appeler avant la ligne 2. Tu peux donc la déclarer dans des conditions, boucles (même si non recommandé), etc.
• la 1ère est une fonction anonyme associé à une variable. Elle n'a pas de nom.

1 2 3 4 5 6 7 8

foo() // erreur bar() // pas d'erreur var foo = function() { console.log('foo') } function bar() { console.log('bar') } foo.name === '' bar.name === 'bar'

Non. Elles sont toutes deux définies à l'exécution ou à la compilation, sans différence d'"instant" auquel elles sont définies. C'est une question de scope, pas de temps. La différence est que function bar( ... sera hoisté, là où var foo = function le var foo sera hoisté mais pas la valeur contenue dans foo, donc la fonction.

Le fait qu'ici foo contienne une fonction anonyme n'est pas intéressant. C'est même une mauvaise pratique. On fait généralement plutôt var foo = function foo() { console.log('foo'); }.

Si cette question de hoisting avec var n'est pas claire, regarde ceci:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

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

   b = function b() {
      console.log('b');
   }

   a(); // prints 'a'
   b(); // prints 'b'

   var b;
}());

try {
   a(); // prints 'a'
   b(); // b is not defined
} catch (e) {
   console.log(e);
}

On peut, en JS les fonctions sont d'ordre supérieur, donc on peut par exemple faire cette fonction qui prend en argument deux fonctions f et g et retourne une fonction composée f.g :

1
2
3
4
5
6

function compose(f, g) {
    return x => f(g(x));
}

let h = compose(Math.log, Math.exp);
let result = h(42); // result = 42

Petit précision pour l'OP : je ne sais pas si le livre Eloquent JavaScript est à jour sur JavaScript ES6, mais dans ma fonction compose j'utilise la syntaxe "fat-arrow" pour que ce soit plus lisible, donc la fonction x => f(x) est la même chose que function (x){ return f(x); }.

J'aurais pu donc écrire le code comme ceci :

1
2
3

function compose(f, g) {
    return function(x){ return f(g(x)); };
}

Si ton navigateur est à jour, il y aura le support de cette syntaxe à coup sûr.

En plus idiomatique on ferait

1

const compose = (f, g) => (x) => f(g(x));

Généralement on évite "return" quand le corps n'est qu'une expression.

OMG ! Merci les gars !

J'avais cherché pourtant.

Eloquent JavaScript ne parle malheureusement pas d'hoisting, je trouve ça dommage car finalement c'est uniquement cette notion qui différencie clairement l'utilisation de function en tant qu'instruction et celle en tant que valeur assignée à une variable.

Non ?

C'est vrai ! Du coup en effet, y a a priori pas de contradiction de la part de l'auteur.

Eloquent JavaScript se limite à JS 5, je n'ai vu qu'une seule allusion au standard ECMAScript 6 (let).

Sinon on parlait très précisément de la possibilité d'utiliser une expression à gauche des parenthèses, grammaticalement parlant (ie. : l'utilisation de fonctions pour le permettre ne nous intéresse pas).

Questions

Sinon, j'aimerais savoir ce que vous pensez précisément de ce qui suit s'il vous plaît =/

1. Quand on a function truc() {...}, est-ce que truc est vraiment une variable ? D'après l'auteur oui. De même quand on a var a = function() {} (la variable ici est a). Ici, Victor a également écrit : var a = function b() {} : donc il y a deux variables (a et b) ? Et dooonc, la fonction alert de JavaScript est en fait une variable fournie dans l'environnement par défaut de JavaScript, non ? (c'est ce qu'affirme stricto sensus l'auteur, encore une fois)

2. Dans ma puce n°6, l'auteur indique que le mot-clé function peut être utilisé soit comme une expression (pour initialiser une variable : var a = function () {}), soit comme une instruction. Pourtant, il dit aussi qu'en tant qu'instruction (function calculer(){}), function va initialiser une variable (qui est le nom de la fonction, calculer). Donc même là, on a bien une expression… L'auteur se contredit-il ?

En fait je me rends compte que mes questions sont très pointilleuses et portent surtout sur du vocabulaire, sur de la grammaire. Je trouve très regrettable que l'auteur n'ait pas fourni la grammaire du JavaScript, ce qui m'aurait évité de me poser toutes ces questions…

J'ai l'impression de me prendre la tête pour rien, mais tant que tout ça n'est pas clairement défini à 100% je ne vais pas pouvoir passer à autre chose, je me connais… -_-'

J'ai relu le chapitre sur les fonctions, et en fait l'auteur parle bien de l'hoisting. Sauf qu'il n'a pas nommé ce mécanisme (il n'a pas écrit "hoisting"), et il s'est contenté de dire que function utilisé en tant qu'instruction (pas en tant que valeur de variable) permet de faire un appel n'importe quand. En revanche, il n'a pas du tout mis en valeur le fait que tout appel doit se faire après ce mot-clé si ce dernier est utilisé en tant que valeur de variable. Donc voilà il aurait dû insister un peu plus

Par contre je me demande toujours si le mot-clé function ne désigne pas systématiquement une expression, qu'il soit utilisé en tant qu'instruction ou en tant que valeur : dans le premier cas, c'est le nom de la fonction qui serait une variable (donc la fonction est une valeur, donc une expression ! et le nom de la fonction est aussi une expression, par définition d'"expression") ; dans le second cas, évidemment la fonction est bien une expression (valeur de variable).

EDIT :

L'auteur semble également distinguer la déclaration de fonction (function en tant qu'instruction), de la définition de fonction (function en tant qu'initialisation de variable).

Pourtant dans d'autres langages, la déclaration d'une fonction c'est l'écriture de sa signature. Et la définition, l'écriture de son corps. Donc en JavaScript, on utiliserait un vocabulaire différent ? :o

b n'est pas une variable, c'est le nom de la fonction. Il est local au corps de a.

On peut parler de corps pour une variable ou tu t'es autorisé un petit abus de langage ?

Du coup dans le cas de alert, on pourrait dire que ce mot est une variable si JavaScript implémente comme suit cette fonction : var alert = function() {...} ou encore var alert = function truc() {...}, ou juste comme étant un nom de fonction si on a : funtion alert(){...}.

C'est bien ça ?

Je ne comprends pas pourquoi Eloquent JavaScript utilise plusieurs fois le terme de "variable" si au final c'en n'est pas une…

Ca pose une question plus profonde (du coup, la troisième de ce message) : concrètement, qu'est-ce qu'un nom de fonction ? C'est juste un identificateur d'une portion de code, ce n'est pas une variable comme tu l'as dit ?

alert est un membre de l'objet global window. Il n'est pas dans l'objet global de node, global.

Je ne connaissais pas global.

Du coup quand l'auteur dit que alert est une variable, c'est le cas ou pas ? =/

Après j'avoue avoir du mal à peser "le pour et le contre" de ce que dit l'auteur, c'est assez frustrant. Par exemple, je ne comprends toujours pas si dans function truc() {} , truc est une expression ou pas…

Ok merci !

J'ai juste une touuute petite question, la dernière.

Peu importe comment tu créées ta fonction, déclaration ou expression, il sera possible de l'assigner à une variable.

Quand on écrit une fonction en tant qu'expression, celle-ci est donc enregistrée dans une variable : elle est la valeur de cette dernière.

Que se passe-t-il quand on écrit une fonction en la déclarant (donc sans la placer dans une variable) ? Est-elle une valeur, accessible grâce à la métadonnée "nom de la fonction" dont tu parles ?

Oyez, oyez !

J'ai du nouveau !

var foo0 = function() {} et var foo1 = function foo2(){} sont, cela a déjà été dit, des instructions dans lesquelles une expression de fonction est écrite dans une variable. Cette expression de fonction est une valeur, et cette valeur est égale à la fonction (je ne sais pas encore en détails ce que ça veut dire mais au pire c'est pas très important )

La véritable nouveauté arrive !

function foo3() {} est une déclaration de fonction. Et contrairement à ce qui a été dit ici, une variable contenant cette fonction est vraiment créée. Et cette variable porte un nom… C'est foo3. Source : http://stackoverflow.com/questions/39540317/what-precisely-is-a-function-value/39540491?noredirect=1#comment66395703_39540491

Bon après ça pose la question de savoir si cette variable EST la fonction, ou si on a vraiment 2 foo3 : d'une part le nom de la fonction, et d'autre celui de la variable créée.

Je vais demander ça dans ma question Stackoverflow.

Le nom de la fonction est un identifiant qui désigne la fonction.

Ce sont 2 choses différentes, mais qui sont très proches dans l'idée voir dans la plus part des cas indissociables.

Comme en C ou on a un identifiant pour une variable. En C un identifiant est unique par variable mais l'identifiant et la variable sont deux concepts séparer. En C++ la notion est encore plus importante car on peut avoir 2 identifiants pour une même variable.

Je m'avance peut-être en disant que c'est pareil en JS, mais je ne vois pas pourquoi ce serait différent.

Quand on écrit une fonction expression, elle n'est pas "enregistrée" où que ce soit. Une fonction expression est une valeur. Comme je le disais, cette valeur est un objet de première classe. On peut assigner cette valeur à une variable.

Bein elle est bien la valeur d'une variable, donc elle est écrite/enregistrée dedans non ?

Quand tu déclares une fonction, ça ne produit pas de valeur. L'identifiant devient accessible, c'est ça la variable.

Ah d'accord, mais cette variable contient quoi du coup ? La fonction non ? Donc il y a bien production d'une valeur (qui est la fonction) ?

Si tu pensais à quand je disais que le nom de la fonction n'est pas une variable, je parlais de named function expression. const a = function b() {}, b n'est pas une variable dans le scope où est déclaré a. C'est une variable mais elle est locale au corps de a.

Ah d'acc d'acc !

Du coup tout ce que tu dis, à savoir que le nom d'une fonction est en réalité le nom de la variable contenant cette fonction, c'est valable qu'en JS ou pour tout langage ? Mes profs ne m'ont jamais parlé de ça en fait.

EDIT : du coup en effet, il n'y a pas de contradiction avec ce que dit le gars de Stackoverflow.

D'acc d'acc, bein écoute merci

Je vais mettre le topic en résolu !

Y a juste une toute petite chose que j'aimerais éclaircir : var foo = function b() {} : est-ce que par hasard, la variable foo prendrait pour valeur la variable b, qui a pour valeur la fonction ?

J'ai posé la question sur Stackoverflow et apparemment, contrairement à dans une déclaration de fonction funtion dede() {} , il n'y a pas création de variable dans une expression de fonction nommée ! Donc a priori, dans ce que je t'ai montré au paragraphe précédent, il n'y a que foo comme variable, b n'en serait pas une et servirait UNIQUEMENT au déboggage.

Après j'ai bien conscience que toutes mes questions, mises à part celles qui ont fait intervenir l'hoisting, sont inutiles puisqu'elles s'intéressent au fonctionnement interne de JS qui est caché au dév. Mais je suis juste curieux.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

> var foo = function bar() {}
undefined
> foo
[Function: bar]
> bar
ReferenceError: bar is not defined
    at repl:1:1
    at REPLServer.defaultEval (repl.js:272:27)
    at bound (domain.js:280:14)
    at REPLServer.runBound [as eval] (domain.js:293:12)
    at REPLServer.<anonymous> (repl.js:441:10)
    at emitOne (events.js:101:20)
    at REPLServer.emit (events.js:188:7)
    at REPLServer.Interface._onLine (readline.js:219:10)
    at REPLServer.Interface._line (readline.js:561:8)
    at REPLServer.Interface._ttyWrite (readline.js:838:14)

Dans la fonction, foo === bar mais nommer ses fonctions est utile quand c'est des closures qu'on n'assigne pas à une variable (qu'on passe en paramètre par exemple) et qu'on veut manipuler (pour de la recursivité par exemple).

Pourquoi as-tu un undefined 2è ligne ?

De ce que je comprends de ton code, aucune variable bar n'est créée. Dis-moi si je me trompe ?