La portée des variables

Bien, vous savez créer une fonction basique mais pour le moment vous ne pouvez rien faire de bien transcendant. Pour commencer à faire des fonctions vraiment utiles il vous faut apprendre à utiliser les arguments et les valeurs de retour mais nous allons tout d'abord devoir passer par une étude barbante des fonctions :

La portée des variables

Derrière ce titre se cache un concept assez simple à comprendre mais pas forcément simple à mettre en pratique car il est facile d'être induit en erreur si on ne fait pas attention. Tout d'abord, nous allons commencer par faire un constat assez flagrant à l'aide de deux exemples :

Code : JavaScript - Sélectionner

var ohai = 'Hello world !';

function sayHello() {

alert(ohai);

}

sayHello();

Ici, pas de problème, on déclare une variable dans laquelle on stocke du texte puis on crée une fonction qui se charge de l'afficher à l'écran et enfin on exécute cette dernière. Maintenant, nous allons légèrement modifier l'ordre des instructions mais l'effet devrait normalement rester le même :

Code : JavaScript

function sayHello() {

var ohai = 'Hello world !';

}

sayHello();

alert(ohai);

Alors ? Aucun résultat ? Ce n'est pas surprenant ! Il s'est produit ce que l'on appelle une erreur : en clair, le code s'est arrêté car il n'est pas capable d'exécuter ce que vous lui avez demandé. L'erreur en question (nous allons revenir sur l'affichage de cette erreur dans un instant) nous indique que la variable ohai n'existe pas au moment de son affichage avec la fonction alert() alors que nous avons pourtant bien déclaré cette variable dans la fonction sayHello().

Et si je déclare la variable ohai en-dehors de la fonction ?

Là, ça fonctionnera ! Voilà tout le concept de la portée des variables : toute variable déclarée dans une fonction n'est utilisable que dans cette même fonction ! Ces variables spécifiques à une seule fonction ont un nom : les variables locales.

Comme je vous le disais, une erreur s'est déclenchée, mais comment avons-nous pu le savoir ? Nous avons en fait utilisé ce qui s'appelle un débogueur !

Les variables globales

À l'inverse des variables locales, celles déclarées en-dehors d'une fonction sont nommées les variables globales car elles sont accessibles partout dans votre code, y compris à l'intérieur de vos fonctions.

À ce propos, qu'est-ce qui se produirait si je créais une variable globale nommée message et une variable locale du même nom ? Essayons !

Code : JavaScript

var message = 'Ici la variable globale !';

function showMsg() {

var message = 'Ici la variable locale !';

alert(message);

}

showMsg();

alert(message);

Comme vous pouvez le constater, quand on exécute la fonction, la variable locale prend le dessus sur la variable globale de même nom pendant tout le temps de l'exécution de la fonction. Mais une fois la fonction terminée (et donc, la variable locale détruite) c'est la variable globale qui reprend ses droits.
Il existe une solution pour utiliser la variable globale dans une fonction malgré la création d'une variable locale de même nom, mais nous étudierons cela bien plus tard car ce n'est actuellement pas de votre niveau.

À noter que, dans l'ensemble, il est plutôt déconseillé de créer des variables globales et locales de même nom, cela est souvent source de confusion.

Les variables globales ? Avec modération !

Maintenant que vous savez faire la différence entre les variables globales et locales, il vous faut savoir quand est-ce qu'il est bon d'utiliser l'une ou l'autre. Car malgré le sens pratique des variables globales (vu qu'elles sont accessibles partout) elles sont parfois à proscrire car elles peuvent rapidement vous perdre dans votre code (et engendrer des problèmes si vous souhaitez partager votre code, mais vous découvrirez cela par vous-même). Voici un exemple de ce qu'il ne faut pas faire :

Code : JavaScript

var var1 = 2, var2 = 3;

function calculate() {

alert(var1 * var2); // Affiche : « 6 » (sans blague ?!)

}

calculate();

Dans ce code, vous pouvez voir que les variables var1 et var2 ne sont utilisées que pour la fonction calculate() et pour rien d'autre, or ce sont ici des variables globales. Par principe, cette façon de faire est stupide : vu que ces variables ne servent qu'à la fonctioncalculate(), autant les déclarer dans la fonction de la manière suivante :

Code : JavaScript

function calculate() {

var var1 = 2, var2 = 3;

alert(var1 * var2);

}

calculate();

Ainsi, ces variables n'iront pas interférer avec d'autres fonctions qui peuvent utiliser des variables de même nom. Et surtout, cela reste quand même plus logique !

Juste un petit avertissement : beaucoup de personnes râlent sous prétexte que certains codes contiennent des variables globales. Les variables globales ne sont pas un mal, elles peuvent être utiles dans certains cas, il suffit juste de savoir s'en servir à bon escient. Et pour que vous arriviez à vous en servir correctement, il vous faut pratiquer.

Bien, vous avez terminé la partie concernant la portée des variables. Faites bien attention ! Cela peut vous paraître simple au premier abord mais il est facile de se faire piéger, je vous conseille de faire tous les tests qui vous passent par la tête afin de bien explorer toutes les possibilités et les éventuels pièges.

Créé avec HelpNDoc Personal Edition: Outil de création d'aide complet