Premiers pas en JavaScript
11.1 Variables locales ou globales
cuy copyleft
  See You Why?  

 


Test sur les fonctions - appels réciproques (10.9) | | Exercices sur les variales locales ou globales (11.8)

Contenu

 

 

I. Portée des variables

J'imagine bien votre désarroi : d'une part, on vous annonce un chapitre concernant les variables locales ou globales et d'autre part, vous lisez le titre de cette séquence, à savoir "portée des variables".

En fait, il s'agit du même problème que celui qui vous a été annoncé dans le chapitre "les variables", dans la section "variables numériques". Nous y avions parlé de variables locales ou globales.
Ce n'est que maintenant, après avoir abordé la notion des fonctions, que nous pensons devoir revenir à cette notion. C'est en effet avec les fonctions que nait la différence et le bon usage des variables locales ou globales.

À condition d'avoir déclaré les variables de manière explicite, c'est-à-dire par le mot clé var, la variable sera locale si elle a été déclarée dans une fonction,
elle sera globale si elle a été déclarée hors fonction, c'est-à-dire dans le programme principal.

Si elle n'a pas été déclarée de façon explicite, c'est-à-dire sans l'emploi du mot clé var, la variable sera toujours considérée comme globale, peu importe qu'elle naisse dans une fonction ou hors fonction.

Locale ou globale, ce ne sont que des étiquettes, mais qu'est-ce qui change ?

Selon qu'elle soit locale ou globale (et donc selon l'endroit et/ou la façon de la déclarer), sa visibilité sera différente.
Locale, elle ne sera visible et utilisable que dans la fonction où elle a été créée ; on dira aussi que sa portée est limitée à cette seule fonction. On ne pourra donc pas l'utiliser ailleurs dans le script... ni dans le programme principal, ni dans une autre fonction ;
globale, elle sera visible et utilisable dans tout le script (principal ou fonction) qui lui a donné naissance. Cela signifie que lorsque la fonction aura été exécutée, la variable continue d'exister et risquera d'interférer avec le reste du programme.

Il nous paraît important de rappeler les conséquences de cette option sur la mobilisation de la mémoire de votre ordinateur (surtout celui de l'internaute qui visite votre site) :
* puisqu'une variable locale n'est disponible que dans la fonction qui l'a créée, la mobilisation en mémoire de l'emploi de cette variable sera faible,
* quant à une variable globale, qui peut être utilisée aussi bien dans la fonction que dans le programme principal (voire même dans une autre fonction), la possibilité de pouvoir l'utiliser n'importe où dans la programmation en cours, mobilisera une grande quantité de mémoire.

En débutant en programmation, on a souvent tendance à oublier la possibilité d'utiliser des variables locales ; on pourrait en effet n'écrire que des variables globales. C'est une mauvaise habitude...

Efforcez vous d'utiliser ces variables locales ! C'est important
pour éviter un surplus de variables globales,
pour éviter une trop grande mobilisation de la mémoire,
pour rendre le code plus lisible,
pour éviter des conflits de noms,
pour des tas de bonnes raisons...

Une variable doit être locale si elle n'est utile que dans le corps de la fonction, et en tout cas que rien ne justifie de garder en mémoire la valeur de cette variable après son utilisation dans le corps de la fonction.

 

 

A. variable locale

Comme déjà signalé plus haut, une variable locale est une variable définie à l'intérieur d'une fonction par le mot clé var, suivi du nom de la variable.
De plus, si une variable globale est redéfinie comme locale, son aspect local prime son aspect global.

Les variables locales sont accessibles et modifiables uniquement à l’intérieur de la fonction dans laquelle elles sont déclarées. Pour les déclarer, il suffit de le faire avec var à l’intérieur de la fonction.
Elles seront automatiquement détruite à la fin de l’exécution de la fonction. Ce type de variable est utile pour les algorithmes propres à la fonction. Ça évite d’exposer le fonctionnement interne d’une fonction au reste du monde afin d’aider à la modularité du code.
Aussi, les variables locales évitent une surpopulation de variables qui pourrait entrainer des collisions de noms de variables.

L'exemple qui suit illustre bien l'aspect local de la variable. Cette première fonction f_cube() fait appel à une variable a qui existait déjà dans le script principal (voir 2e ligne), suivons donc ce cours programme à la trace :
1. a et b sont déclarées comme variables globales, valant "bonjour" et 4 ;
2. une fonction f_cube est déclarée, avec un paramètre b (qui pour l'instant n'a aucune valeur attribuée, car c'est l'appel de la fonction qui 'instancie' la variable b ;
3. dans la fonction f_cube, on définit une variable locale a, qui sera le cube du paramètre envoyé (lors de l'appel de la fonction),
dans cette fonction, on affiche "ici, a vaut " suivie de la valeur (locale) de a (qui sera dépendant de la valeur du paramètre reçu) ;
4. hors fonction, donc dans le script principal, on appelle la fonction f_cube avec le paramètre b (de valeur 4 connue, puisque globale [notre commentaire, ligne 1]) ;
5. on affiche à l'écran "Le cube de 4 est 64" (b et f_cube(b) sont connus) ;
6. hors fonction, donc dans le script principal, on donne à la variable globale a une nouvelle valeur 5 et on appelle une seconde fois la fonction f_cube avec le paramètre b (de valeur 5 connue, puisque globale) ;
7. on affiche à l'écran "Le cube de 5 est 125" (b et f_cube(b) sont connus) ;
8. on affiche à l'écran "La valeur de a est maintenant" suivie de la valeur globale de a, c'est-à-dire "bonjour".

<SCRIPT language="Javascript">
var a = "bonjour";
var b = 4;
function f_cube(b) {
      var a = b * b * b;
      document.write("<br>ici, intérieur de la fonction, a vaut ",a);

      return a;
}
document.write(" <br>Le cube de ",b," est ",f_cube(b));
b = 5;
document.write(" <br>Le cube de ",b," est ",f_cube(b));
document.write(" <br>La valeur de a est maintenant : ",a);

</SCRIPT>

Cet exemple illustre bien que la variable a, globalement vaut "bonjour", mais qu'à l'intérieur de la fonction, elle est redéfinie et prend la valeur du cube du paramètre numérique reçu.

Évidemment, vous conviendrez que le mélange de variables globales et locales peut s'avérer très délicat et qu'il est bon d'une part, d'éviter les variables globales, et d'autre part, de donner un nom précis à vos variables.

 

B. variable globale

Les variables globales sont accessibles et modifiables de partout dans le code. On n’a pas à les passer en paramètre pour les lire ou modifier à l’intérieur de fonctions. Pour déclarer des variables globales, on n’a qu’à la déclarer avec var en dehors d’une fonction.
Sinon, on peut aussi la déclarer sans var à l’intérieur d’une fonction. Sans vouloir trop pousser, nous croyons qu'il vaut mieux de toujours déclarer les variables avec var. Il faudrait donc s’assurer de déclarer la variable en dehors de toute fonction avant de l’utiliser de manière globale dans une fonction.

Le même exemple plus haut, montre que la variable b est définie globalement et donc connue tout au long du script, comme valant "4"... et que l'appel de la fonction se fait avec un paramètre de valeur connue, à savoir
4 la 1re fois, qui élévé au cube vaudra 64 (4*4*4),
et 5 la 2e fois, qui élevé au cube vaudra 125 (5*5*5).

La variable a est globale et vaut "bonjour", sauf dans la fonction où elle est redéfinie provisoirement comme locale (le cube du paramètre reçu).
 

Exemple

<html>
<head><title>variable locale ou globale</title></head>
<body>
<script type="text/javascript">

var a = "bonjour";
var b = 4;
function f_cube(b) {
      var a = b * b * b;
      document.write("<br>ici, intérieur de la fonction, a vaut ",a);
      return a;
}
document.write(" <br>Le cube de ",b," est ",f_cube(b));
b = 5;
document.write(" <br>Le cube de ",b," est ",f_cube(b));
document.write(" <br>La valeur de a est maintenant : ",a);
 
</script>
</body>
</html>


Un conseil:
comme dans la plupart des langages de programmation qui eux l'exigent,
- déclarez vos variables globales en début du script principal et
- déclarez toutes vos variables locales en début de chaque fonction.
Ainsi, si par hasard vous utilisez un même nom de variable dans différentes fonctions, la confusion sera réduite... autant éviter les complications difficiles à retrouver si on ne prend pas de bonnes habitudes.

 

C. Pour les puristes, variable globale ou locale...

D'une part, nous ne voudrions pas donner de fausses informations et d'autre part, nous ne souhaitons pas faire fuir les nouveaux venus dans le langage JS. C'est pourquoi, cette section est destinée à un public averti et rigoureux. Que les autres ne s'inquiètent pas, la distinction faite ci-avant respecte toutes les autres conventions de JS.

L'instanciation directe que nous avons aussi appelée déclaration implicite (sans mot-clé var) d'un objet avec un identificateur donne souvent l'impression de créer une variable globale. En réalité, la notion de "variable globale" n'existe pas en JavaScript.
Toutes les variables sont, sauf quand on les déclare avec var, des propriétés d'un objet.
Rappelons-nous que JS est un langage orienté objet et que les objets peuvent avoir des méthodes ou propriétés qui leur sont propres.
Par défaut, cet objet est implicitement l'objet window (et non, window n'est pas une variable globale qui ferait exception à la règle car il est une de ses propres propriétés, c'est-à-dire que window est une propriété de l'objet window).
Comme nous avions déjà découvert l'objet document, associé à la méthode write, dans l'instruction document.write(), window reste l'objet implicite la plupart du temps, une variable créée ainsi pourra être employée comme si elle était globale.

 

Exemple

<html>
<head><title>variable locale ou globale</title></head>
<body>
<script type="text/javascript">

var abc = 8;
    // variable globale

alert("abc: " + abc);
    // affiche "abc: 8" (globale)

f_Une();
    // affiche "abc: 11" et "def: 10" (globale)

alert("abc: " + abc);
    // affiche "abc: 11" (globale)

alert("def: " + def);
    // erreur, def n'existe pas ici (locale)

f_Deux();
    // affiche "abc: 12" (locale)

alert("abc: " + abc);
    // affiche "abc: 11"

function f_Une(){
    abc = 11;
    // (globale)
    alert("abc: " + abc);
    // (globale)
    var def = 10;
    // (locale)
    alert("def: " + def);
    // (locale)
}

function f_Deux(){
    var abc = 12;
    // variable locale
    // la version locale sera utilisée
    // la version globale reste intouchée
    alert("abc: " + abc);
}
</script>
</body>
</html>


 

 

Vous voilà prêt pour la suite du cours... Les fonctions à paramètres multiples ou unique, avec instruction RETURN ou sans, les variables locales et globales n'ont plus de secrets pour vous. Il ne vous reste qu'à faire un petit détour par les opérateurs mathématiques avant d'aborder le vrai début de la programmation : les conditions.

D. Pour les puristes, pas de variable statique en JS...

Quel est ce nouveau type de variable ? Les programmeurs familiers avec d’autres langages pourraient s’attendre aux variables statiques. Ces variables sont comme les variables locales, c'est-à-dire disponibles uniquement à l’intérieur de la fonction, mais leur valeur ne se perd pas entre chaque appel de la fonction. Ce type de portée n’existe pas en JavaScript.

 

VIII. Exercices relatifs aux variables locales et/ou globales

voir suite >>>

 

 

IX. Test relatif aux variables locales et/ou globales

voir suite >>>

 

 


Test sur les fonctions - appels réciproques (10.9) | | Exercices sur les variales locales ou globales (11.8)