JavaScript pour les Jedis, épisode I : au cœur des fonctions

Version imprimable

14/01/2015, 12h33
vermine

JavaScript pour les Jedis, épisode I : au cœur des fonctions

:salut:

Wassim Chegham est un fervent défenseur des technologies Web front et suit de près les versions ECMAScript. Aujourd'hui, il nous propose un article sur les fonctions JavaScript et leurs aspects parfois complexes.

Cet article parle de la boucle d'événements, du callback, des fonctions anonymes, etc.

:fleche: JavaScript pour les Jedis, épisode I : au cœur des fonctions

N'hésitez pas à lui faire part de vos remarques et commentaires.

:merci:
14/01/2015, 13h43
wchegham

Merci Xavier pour la pub :applo:
14/01/2015, 18h56
SylvainPV

Merci à toi pour l'article Wassim :)

Quand vous aurez tout lu attentivement, vérifiez vos connaissances avec le quiz sur les fonctions sorti récemment.

VIII-D-4. Invocation via apply() ou call()

Je trouve que "l'exemple plus intéressant" requiert une meilleure présentation.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
function forevery( list, callback ) {
    var i = 0,
        n = list.length;
 
    for ( i = 0; i < n; i++ ) {
 
        /*
         * Exécute fonction( index ) dans le
         * contexte de l'objet list.
         * argument : i
         */ 
        callback.call( list, i ); 
    };
}
 
forevery( [ 'a', 42, false, {} ], function( index ) {
 
    // console, touche F12
 
    console.log( "index = ", index );
    console.log( "this = ", this );
    console.log( "this[ index ] = ", this[ index ] );
    console.log( "this[ index + 1 ] = ", this[ index + 1 ] );
    console.log( "this[ index - 1 ] = ", this[ index - 1 ] );
 
    /*
     *  index =  0
     *  this =  ["a", 42, false, Object]
     *  this[ index ] =  a
     *  this[ index + 1 ] =  42
     *  this[ index - 1 ] =  undefined
     *  
     *  index =  1
     *  this =  ["a", 42, false, Object]
     *  this[ index ] =  42
     *  this[ index + 1 ] =  false
     *  this[ index - 1 ] =  a
     *  
     *  etc.
     */
});

15/01/2015, 09h46
Kaamo

Point VII. :

Citation:

la portée d'une variable existe depuis sa déclaration*, et ce jusqu'à la fin de la fonction dans laquelle elle a été déclarée, peu importe l'imbrication des blocs (variables declaration hoisting) ;

Peut-être préciser/insister * avec le mot clé var.

Beau boulot en tout cas. Par contre, je pense que ça permet de devenir un padawan pour le moment. Jedi quand assimilé les closures, tu auras :mrgreen:

Il me semble que c'est inexact. Une variable est utilisable dans sa portée de déclaration comme une fonction. C'est à dire même avant l'apparition de 'var' dans le source (variable declaration hoisting).
Code:

1 2 3 4 5 6 7 function foo () { a = 1; // ne crée pas de variable globale // parce que 'a' est déclaré dans la portée (la fonction) var a; // déclaration de 'a' } foo(); // ici la variable 'a' n'existe pas

15/01/2015, 10h44
wchegham

Merci messieurs pour vos remarques. Je vais regarder cela à tête reposée ce soir. :wink:

Citation:
Envoyé par lysandro
Il me semble que c'est inexact. Une variable est utilisable dans sa portée de déclaration comme une fonction. C'est à dire même avant l'apparition de 'var' dans le source (variable declaration hoisting).
Code:

1 2 3 4 5 6 7 function foo () { a = 1; // ne crée pas de variable globale // parce que 'a' est déclaré dans la portée (la fonction) var a; // déclaration de 'a' } foo(); // ici la variable 'a' n'existe pas
Cet exemple reste valide mais personnellement je ne recommande pas cette façon de faire.
Si je dois manipuler une variable locale (à une fonction) je la déclare en haut de la fonction. De toute façon c'est ce que fait l'interrupteur JavaScript.

15/01/2015, 12h24
lysandro

Bien sur, il ne s'agit pas du tout de recommander cette écriture. Mais d'éviter les incompréhensions que vous cherchez justement à lever et par là ne pas faire de différences entre variables et fonctions dans votre article en ce qui concerne la portée et la déclaration puisqu'il n'y en a pas :)
15/01/2015, 12h41
wchegham

Nous sommes d'accord alors. Je vais essayer de reformuler cette nuance.

Citation:
Envoyé par lysandro
Il me semble que c'est inexact. Une variable est utilisable dans sa portée de déclaration comme une fonction. C'est à dire même avant l'apparition de 'var' dans le source (variable declaration hoisting).
Code:

1 2 3 4 5 6 7 function foo () { a = 1; // ne crée pas de variable globale // parce que 'a' est déclaré dans la portée (la fonction) var a; // déclaration de 'a' } foo(); // ici la variable 'a' n'existe pas
Tu as quand même utilisé var . C'était mon propos. Elle doit être déclarée avec var pour ne pas être globale.

15/01/2015, 14h21
lysandro

Yep. Ce que à quoi je répondais c'est, dans l'article (où il utilise 'var')

Citation:

... la portée d'une variable existe depuis sa déclaration ...

et des bricoles après
15/01/2015, 14h32
wchegham

Citation:

Envoyé par lysandro

Yep. Ce que à quoi je répondais c'est, dans l'article (où il utilise 'var')
et des bricoles après

J'ai changé cette phrase par celle-ci :

Citation:

la portée d’une variable (incluant les expressions de fonction) existe depuis sa définition, et ce jusqu’à la fin de la fonction dans laquelle elle a été déclarée, peu importe l’imbrication des blocs.

Vous êtes d'accord ?

Non tu n'y es pas. Il n'y a pas de différence entre la portée d'une variable et la portée créée par la fonction dans laquelle cette variable est déclarée. La portée d'une variable locale est la portée locale, et ce peu importe à quel endroit la variable est déclarée.

On avait déjà abordé la question dans le topic de pré-publication, voilà pour rappel nos échanges:
Citation:
- Portée et contexte(s) d’une fonctionla portée d’une variable existe depuis sa déclaration et ce jusqu’à la fin de la fonction dans laquelle elle a été déclarée (peu importe l’imbrication des blocs) ;
la portée d’une fonction (non*anonyme) est globale à toute la fonction dans laquelle elle a été déclarée (on appelle cela hoisting, ou hissage en français).

SPV: En fait, les règles de portée sont les mêmes pour tous types de variable, y compris les fonctions. Le hoisting est également présent pour toutes les autres variables, donc la portée de la variable "c" est incorrecte. De même, le hoisting fonctionne pour les fonctions anonymes (à conditions d'être référencé par une variable bien entendu)
voir : https://developer.mozilla.org/en-US/...r#var_hoisting
WCH :
1) hoisting : [CITATION]«En fait, les règles de portée sont les mêmes pour tous types de variable, y compris les fonctions » [/CITATION]
Attention, ceci est vrai si la fonction est une expression de fonction, càd, qui a été déclarée avec le mot clé « var » (on parle alors du var hoisting, cf. lien var hoisting).
Une fonction déclarée avec le mot clé « function fn(){} » peut être invoquée avant sa déclaration ; on parle alors de hoisting de fonction (https://developer.mozilla.org/en-US/...ation_hoisting)
2) portée : l’exemple de la variable « c » est là pour démontrer qu’une variable est dispo dans la chaine de la portée, qu’à partir du moment de sa déclaration (avec ou sans le var). Voici un exemple de code qui permet d’illustrer mes propos :

SPV : il faut bien s’entendre sur les termes utilisés. Ici tu parles de portée et non d’affectation. Les règles de portée sont les mêmes pour toutes les variables :
Code:

1 2 3 4 5 6 7 function foo() { if (false) { var x = 1; } return; var y = 1; }
est interprété comme :
Code:

1 2 3 4 5 6 7 8 function foo() { var x, y; if (false) { x = 1; } return; y = 1; }
La difference pour les fonctions non déclarées avec var est que c’est l’ensemble du corps de la fonction qui est déplacé en haut de fonction. Mais toutes les variables ont la même portée au sein d’une fonction. C’est d’ailleurs pour ça qu’on appelle ça une « portée » (scope en anglais). La preuve avec ta fonction :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 function fonction1(){ console.log(a+b+c); // NaN console.log(a+b+d); // ReferenceError: d is not defined var a = 1; function fonction2(){ /**/ } var b = 2; if (a === 1) { var c = 3; } } fonction1();
WCH: Cette deuxième règle nous montre que, contrairement aux variables, les fonctions peuvent
être référencées avant leurs déclarations !
SPV: les variables aussi
WCH : référencer (appeler) une variable avant sa déclaration retournera « undefined » !
SPV : mais pas de ReferenceError. Donc elle est à portée, mais sa valeur ne lui a pas encore été affectée.
Je te laisse revoir ces quelques bouts de phrase pour mettre fin à tout malentendu :ccool:

21/01/2015, 09h02
Franck.H

:lahola:

Dans le VIII-E, cas #2, le commentaire devrait être "//=> this === foo" non ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
var Foo = function() {
 this.counter = 0;
 this.inc = function() {
 this.counter += 1;
 console.log(this);
 };
};
 
var foo = new Foo();
var element = document.querySelector('#foo');
 
// cas #1
element.addEventListener('click', foo.inc); //=> this === element
 
// cas #2
element.addEventListener('click', function(){ foo.inc(); }); //=> this === element
 
// cas #3
element.addEventListener('click', foo.inc.bind(foo)); //=> this === foo

02/02/2015, 12h19
n0-sheep

+1

Citation:

Envoyé par idiallo

Dans le VIII-E, cas #2, le commentaire devrait être "//=> this === foo" non ?

Il me semble aussi.
02/02/2015, 19h48
wchegham

Oops! Mauvais copié collé. Bien vu oeil de lynx :D