Trois fondamentaux de JavaScript

La portée, c'est ce que voit l'interpréteur à un moment donné de l'exécution du code. Ouvrez un fichier JavaScript, tapez le mot-clé debugger; où bon vous semble, démarrez Firebug (ou votre outil préféré) et cherchez l'onglet « Espions » ou « Watch ».

La règle pour comprendre comment est créée une portée est très simple :

1 fonction = 1 portée

Concrètement vous avez la portée globale où tout se trouve (dans un navigateur, c'est window), puis à chaque fonction que vous créez, vous créez une nouvelle portée, et celles-ci peuvent s'imbriquer à l'infini. Chaque fois que vous précédez une assignation par le mot-clé var, la variable n'est visible qu'à partir de cette portée.

test1 = function() {
    var x = 1;
    test2 = function() {
        var x = 2;
        test3 = function() {
            var x = 3;
            console.log(x); // 3
        }();
    }();
    console.log(x); // 1
}();
console.log(x); // undefined

Si vous exécutez le code précédent dans votre console JavaScript, vous constaterez trois choses :

• le console.log le plus profond affiche bien sûr la dernière valeur de x, à savoir 3 : dans ce troisième niveau, on a écrasé les valeurs précédentes de x ;
• malgré cet écrasement à un niveau inférieur, le deuxième console.log (qui affiche 1) montre bien que les nouvelles valeurs de x ne sont pas visibles depuis la première fonction ;
• enfin le dernier console.log est fait au niveau global, en dehors des définitions de fonction : ici x n'existe même pas.

Nous avons vu comment le couple var + function permet de définir une portée et empêche le code en dehors de la portée de voir certaines variables. Pourquoi ne pas tout mettre au niveau global ? Pour des raisons d'organisation du code et de maintenabilité ! Imaginez le code suivant :

function genericFunctionName() {
    for(i = 0; i < myArray.length; i++) {
        console.log(i);
    }
}
for(i = 0; i < 10; i++) {
    genericFunctionName();
}

Nous avons simplement une fonction qui parcourt un tableau fictif, puis nous appelons cette fonction 10 fois. N'exécutez surtout pas cela dans votre navigateur, car c'est une boucle infinie !

En fait les deux boucles for utilisent le même nom de variable (i) pour compter les tours. C'est un nom extrêmement commun et ça ne poserait pas de problème si les deux boucles ne pointaient pas sur la même variable ! Fixons cela.

function genericFunctionName() {
    for( var i = 0; i < myArray.length; i++) {
        console.log(i);
    }
}
for(i = 0; i < 10; i++) {
    genericFunctionName();
}

Dans la fonction, nous avons rajouté le mot-clévar pour spécifier que la variable n'appartenait qu'à cette fonction. Les deux bouclent ne pointent plus sur la même variable même si leurs noms sont les mêmes. C'est très important pour le développeur de savoir qu'il est le seul maître sur les variables qu'il crée pour créer un code particulier. Ceci nous donne la première application concrète des portées.

En tant que développeur, vous allez créer ou modifier du code sur des pages dont vous ne maîtrisez pas l'environnement. Entre l'historique du code, vos collègues et les publicités ou les widgets, beaucoup de variables sont créées ou écrasées au niveau global sans que vous puissiez le prévoir. Au milieu de cette tourmente, je vous propose de vous créer un petit havre de paix :

(function() { 
}())

Je vous conseille de démarrer tout fichier JavaScript ou tout code entre balises <script> par la première ligne et de toujours terminer par la dernière. Ce bout de code vous permet de poser les bases de votre portée et de créer des variables qui n'appartiennent qu'à vous, sans pour autant s'isoler du reste du monde.

(function() {
    var privateVariable = true;
    window.init = function() {
        console.log( privateVariable );
    }
}())
init(); // true
console.log(privateVariable); // undefined

Exécutez ce code, et vous verrez que privateVariable n'est pas accessible de l'extérieur, mais que le code défini à l'intérieur permet d'y accéder. Très pratique en environnement hostile. Vous remarquerez aussi que l'on rattache la fonction init directement à la portée globale, afin qu'elle soit elle aussi visible de l'extérieur.

Il est facile de créer une fonction et de l'exécuter. Les syntaxes que vous utilisez au quotidien sont celles-ci :

// création v1
function action() {}
// création v2
action = function() {};
// exécution
action();

Simple non ?

Au fait quelle est la différence entre les deux manières de déclarer une fonction ? Pour la première (function nom()) le compilateur JavaScript extrait toutes les définitions et les met à disposition au niveau global AVANT de commencer l'exécution. Concrètement vous pouvez même exécuter la fonction avant qu'elle ne soit créée dans la source.

// exécution avant la définition !
action();
// création
function action() {}

Cool ? Pas vraiment : c'est systématiquement la dernière déclaration dans la source qui est prise en compte par les interpréteurs JS. Vous ne pouvez pas conditionner la définition des fonctions.

Par exemple le code suivant ne va pas s'exécuter comme vous pourriez le penser :

if( 1 == 1 ) {
    // l'exécution du code passe ici ...
    function action() {
        console.log('a == 1');
    }
    } else {
        // ... pourtant le compilateur se souvient de cette fonction
        function action() {
        console.log('a != 1');
    }
}
action(); // a != 1

Lors de l'exécution, l'interpréteur passe bien dans le premier if et pourtant c'est la seconde définition qui est retenue, uniquement parce qu'elle arrive en dernier dans la source.

Et malgré cela, contrairement à d'autres langages, la déclaration d'une fonction n'est valable que pour la portée en cours et ses descendantes. Dans le code suivant, la fonction action n'est pas visible au niveau global :

(function() {
	function action() {
		console.log('action');
	}
}())
action(); // undefined

La manière traditionnelle de déclarer les fonctions est donc assez trompeuse et de ce fait tombe doucement en désuétude. Pour des débutants on utilisera plutôt la seconde méthode qui a le mérite de pouvoir explicitement choisir la portée de ses fonctions, au même titre qu'une variable

var action = function() {};

En ce qui concerne le compilateur, cette syntaxe est une variable avec pointeur sur une fonction anonyme. Le désavantage est que lorsque vous utilisez un débogueur pas à pas, la pile d'appels (call stack) ne vous affiche pas le nom des fonctions (l'anonymat sur Internet existe donc). Vous pouvez retrouver le nom de la variable assignée simplement en cliquant sur la fonction et en regardant dans la source.

JavaScript a rajouté plusieurs particularités aux fonctions qui les rendent terriblement puissantes et flexibles. En fait toutes les constructions de code un peu élaborées telles que l'orientation objet ou l'application de design pattern se basent sur ces spécificités. Nous entrons donc dans le cœur de JavaScript.

Auto-exécution▲

var autoInit = function() {
    console.log('hello world');
}();
// hello world

Classe ou fonction ?▲

var myFunction = function() {};
console.log( myFunction.prototype ); // Object

// cette innocente fonction devient un constructeur
var myClass = function () {
    this.publicVariable = 0;
};
// accès au prototype
myClass.prototype = {
    decrement:function() {
        console.log( --this.publicVariable );
    },
    increment:function() {
        console.log( ++this.publicVariable );
    }
};

myObject = new myClass();
myObject.decrement(); // -1
myObject.decrement(); // -2

myObject2 = new myClass();
myObject2.increment(); // 1
myObject2.increment(); // 2

Orienté objet ?▲

mySubClass = function() {
    // maintenant on part de 10 au lieu de 0
    this.publicVariable = 10;
};
mySubClass.prototype = myClass.prototype;
mySubClass.prototype.constructor = mySubClass;

myObject2 = new mySubClass();
myObject2.increment(); // 11
myObject2.increment(); // 12

Slip ou caleçon ?▲

myClass = function () {
    // variable privée !
    var privateVariable = 0;
    // méthodes publiques
    return { 
        decrement:function() {
            console.log( --privateVariable );
        },
        increment:function() {
            console.log( ++privateVariable );
        }
    }
};
myObject = myClass();
myObject.decrement(); // -1
myObject.decrement(); // -2
myObject2 = myClass();
myObject2.increment(); // 1
myObject2.increment(); // 2

La première méthode est native à JavaScript et utilise la fonction .call(). Ici seule la dernière ligne a changé :

myClass = function() {
    this.id = 'myClass';
}
myClass.prototype = {
    action:function() {
        console.log(this.id);
    }
};
myObject = new myClass();
myEvent = {
    id:'myEvent'
};
myEvent.onfire = myObject.action;
myEvent.onfire.call( myObject ); // myClass

Le premier argument de la fonction .call() est l'objet qui sera utilisé pour this. Ici on redonne à onfire l'objet d'origine de la fonction action.

Le problème avec cette solution, c'est qu'il faudrait que vous soyez certain que TOUS les endroits où votre fonction peut être appelée vont rectifier le contexte d'exécution. Or ne serait-ce que pour les événements natifs du DOM cela n'est pas possible, sauf si vous utilisez une bibliothèque de manière systématique. Donc faire confiance à this n'est raisonnable que si vous maîtrisez parfaitement tout le code qui sera écrit.

Pour éviter ces problèmes de maintenance, la solution en vogue est de tout simplement ne jamais utiliser this directement et de préférer utiliser la syntaxe closure et une variable privée pour définir ses classes.

myClass = function() {
    this.id = 'myClass';
    // capture du contexte
    var me = this;
    return {
        action:function() {
            console.log( me.id );
        }
    }
};
myObject = myClass();
document.body.onclick = myObject.action;
// 'myClass'

On voit donc ici :

• dans le constructeur, on capture le contexte avec une variable privée : var me = this ;
• dans la fonction action on n'utilise plus this mais me.

Peu importe l'endroit d'où est lancée la fonction (ici au clic sur la page), et peu importe la valeur réelle de this, on est maintenant certain que l'on aura toujours un accès à l'objet originel grâce à une variable privée. Bien sûr this reste utilisable normalement, notamment si vous avez besoin de retrouver l'objet DOM cliqué par exemple.

Pour encore plus de souplesse avec les fonctions de JavaScript, allez voir la deuxième partie de cet article.