Discussion :

[vermine]

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.

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

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

[wchegham]

Merci Xavier pour la pub

[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.

[danielhagnoul]

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


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

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
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.
     */
});

[Kaamo]

Point VII. :

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

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[wchegham]

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

[wchegham]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[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

[wchegham]

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

[Kaamo]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[lysandro]

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

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

et des bricoles après

[wchegham]

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 :

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 ?

[SylvainPV]

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:

- 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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
function foo() { 
   if (false) {
     var x = 1;
  }
  return;
  var y = 1;
}

est interprété comme :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Franck.H]

[idiallo]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[n0-sheep]

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

Il me semble aussi.

[wchegham]

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