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)

 

 

Merci de votre visite à partir de :

Vous êtes sur :
https://cuy.be/cours/jvs/jvs_110_var_locale_globale.html

partager sur FaceBook...           consulter sur FaceBook...

 

copyleft
Des liens ne fonctionnent plus ?
Avez-vous des suggestions ?
des commentaires, des corrections, un encouragement... ?
Pour info : Non, il n'y a pas de version papier ou DOC, PDF, etc. de ces notes.


Envoyez-moi un E-Mail (cuy(point)w(at)skynet(point)be)

Attention (at) signifie @ et (point) signifie .

Accueil CUY = See you why?

Compteur gratuitEasyCounter     BelStat Monitored by BelStat - Your Site Counts
La 1 000 000e page a été visitée le 21 mai 2010.
La 2 000 000e page a été visitée ce 18 mars 2012, vers midi.
La 3 000 000e page a été visitée ce 7 janvier 2014 entre 18 h et 18 h 45,
La 4 000 000e page a été visitée ce 5 juin 2015 entre 15 h 49 et 15 h 52,
La 5 000 000e page a été visitée ce 29 aout 2017 après 23 h 30,
Et la 6 000 000e page visitée, trop tôt pour y penser ?
 
et, d'après BelStat, CUY est visité surtout en semaine, peu le weekend...
moins et irrégulièrement pendant les vacances :

visites sur 3 mois, de la mi octobre 2013 à la mi janvier 2014.
 
La 3 333 333e page visitée a eu lieu ce mardi 10 juin 2014, en début d'après midi...
La 3 666 666e page visitée a eu lieu ce dimanche 28 decembre 2014, vers 16 h...
Un tiers de million de pages visitées en 154 jours cela fait une moyenne de 2165 pages visitées par jour...
Deux tiers de million de pages visitées en 355 jours soit une moyenne de 1878 pages visitées par jour...
et seulement 1195 pages visitées quotidiennement pendant les vacances estivales
de la mi juin à la mi septembre 2014

Vous voulez lire quelques messages reçus ?
quelques encouragements ?
Cliquez ici


Fin septembre 2009, installation de ce compteur
qui ne compte chaque nouvel ordinateur visiteur qu'une seule fois
free counter
 
m-à-j du 22/11/2021 :

Depuis cette fin septembre 2009, parmi les 210 pays (sur 274 drapeaux connus) qui nous ont visité,
voici les 100 pays qui nous visitent le plus, 
Nos petits visiteurs, classés par date de visite, où un seul ordi nous a visité, sont :
199. Turkmenistan (TM May 10, 2017) ; 200. Lesotho (LS March 1, 2017) ;
201. Turks and Caicos Island (TC January 18, 2016
202. Cook Islands (CK September 19, 2015)  203. Faroe Islands (FO January 27, 2015
204. Virgin Islands American (VI November 12, 2014) ;
205. Belize (BZ September 29, 2014) ;206. Eswatini - Swaziland (SZ July 21, 2014) ;
207. Grenada (GD April 3, 2014) ; 208. Timor-Leste (TI March 29, 2014) ;
209. American Samoa (AS December 26, 2012) ; 210. Guyana (GY November 5, 2010).