Les variables statiques en JavaScript

Les variables statiques sont assez utiles dans certains cas et alors que d’autres langages dont il est très proche le permettent nativement, le JavaScript demande de tricher un peu pour obtenir cette fonctionnalité…

Revenons d’abord aux bases : une variable statique, c’est quoi et où est l’intérêt ? Lorsque l’on déclare une variable dans une fonction, la portée de cette variable ne dépasse pas celle de la fonction : en-dehors de cette dernière, la variable n’existe pas. Ainsi, à chaque appel de la fonction, la variable est déclarée à nouveau et ne conserve pas la valeur qu’elle a pu obtenir lors d’un précédent appel. Et c’est là toute la magie des variables statiques : une telle variable conserve sa valeur tout au long de l’exécution du programme. Voici ce que ça donne par exemple en C++ :

int incrementer() {
	static int i = 0;
	return ++i;
}

Que se passe-t-il si on appelle cette fonction ? La variable i est initialisée à 0 et renvoie la valeur incrémentée de cette même variable. incrementer() renvoie donc 1 au premier appel. Maintenant, qu’est-ce qu’il se passe si on appelle cette fonction une seconde fois ? Sans le mot-clé static, i serait une variable banale, rien ne serait changé : on aurait un i qui vaut 0 et qui serait incrémenté avant d’être retourné ; sans static, un second appel renverrait également 1. Sauf qu’ici, on a indiqué i comme étant statique, elle n’est donc initialisée qu’au premier appel : au second appel, elle conserve sa valeur précédente qui était donc 1 ; le second appel à la fonction incrementer() nous renvoie donc 2.

C’est un concept qui peut s’avérer utile dans pas mal de cas et, nativement, le JavaScript ne le gère pas. Il y a bien sûr la possibilité de passer par des variables globales mais ce n’est pas vraiment la meilleure façon de s’en sortir… Il faut en fait utiliser les closures.

Pour pouvoir utiliser les variables statiques, il faut également savoir qu’une fonction n’est qu’une variable comme une autre en JavaScript. Il est important que vous compreniez qu’on peut donc également créer une fonction comme ceci :

var maFonction = function() {
}

Ça peut paraître déroutant, mais c’est une forme d’écriture indispensable pour les variables statiques.

On a parlé de closures, commençons donc par la créer, cette closure :

var incrementer = (function() {
	var i = 0;

	return function() {
	};
})();

Le return function(){}; doit vous interpeller mais se comprend cependant assez facilement : notre fonction anonyme s’exécute aussitôt (comme on l’a vu dans le tutoriel sur les closures) mais elle a pour but de stocker une fonction dans la variable incrementer : il faut donc retourner la fonction que l’on veut stocker. Faites bien attention au point-virgule : on retourne une fonction mais le return nécessite toujours cette petite ponctuation.

Cette fonction retournée, c’est la fonction incrementer() : vous pouvez y mettre n’importe quoi, comme dans toute fonction. On peut donc réécrire la fonction vue en C++ plus haut :

var incrementer = (function() {
	var i = 0;

	return function() {
		i++;
		return i;
	};
})();

Et voila, aussi simple que ça : la variable i a le même comportement qu’une variable statique, elle conserve toujours sa valeur et n’est jamais réinitialisée et pourtant elle n’est pas globale et ne sera pas accessible en-dehors de la fonction.

Dernier détail : si vous voulez utiliser des variables statiques mais que votre fonction doit demander des arguments, comment faire ? Où demander ces arguments ? Dans la fonction retournée, bien sûr, car c’est bien celle-ci qui sera exécutée lors de l’appel à la fonction. Un exemple bidon pour vous montrer :

var incrementer = (function() {
	var i = 0;

	return function(j) {
		i++;
		return i + j;
	};
})();

Et voila, vous avez juste à l’appeler comme ceci par exemple : alert(incrementer(42));.