Informatique


var, let et const

Principe

  • pour les variables, dont la valeur est immuable dans le temps, toujours utiliser const
  • pour les variables, dont la valeur évolue dans le temps, toujours utiliser let ou var
  • pour les tableaux et les objets, toujours utiliser const est préférable (mais pas obligatoire!)


Les constantes

Le mot clé const permet de créer une constante, celle-ci est accessible uniquement en lecture.

  • Une constante doit être initialisée au moment de sa création
  • La valeur de la constante est immuable (il est interdit de la réaffectée et donc de l'écrasée avec une autre valeur)
    Par contre, si la constante est un objet ou un tableau, elle peut évoluer aux desiderata du programmeur car ces types de variables sont représentés par leur adresse et non par leur valeur!
  • Une constante ne peut pas être redéclarée
  • une variable déclarée avec var ou let peut porter le même nom qu'une constante appartenant au même bloc ou à la même fonction

On crée une constante:

Syntaxe
	const maconst=valeur1;
	

On crée plusieurs constantes:

Syntaxe
	const maconstA=valeur1, maconstB=valeur2, maconstC=valeur3; 
	

Démo
	const maconstA= 36;
	console.log(maconstA);
	/*Les lignes suivantes lèvent une erreur
	maconstA=72;
	console.log(maconstA);

	const maconstA=89;
	console.log(maconstA);*/

var

var permet de déclarer une variable et éventuellement d'initialiser sa valeur.

Syntaxe
	var v1[= valeur1], v2[= valeur2], v3[= valeur3],...,vn[= valeurn]; 
	

let

let permet de déclarer une variable dont la portée est celle du bloc courant, éventuellement en initialisant sa valeur. La variable est détruite à la sortie du scope du bloc d'instructions.

Syntaxe
	let v1[= valeur1], v2[= valeur2], v3[= valeur3],...,vn[= valeurn]; 
	
Démo
	let val = 1;
	if (val === 1) {
	  let val = 2;
	  console.log(val);	  // renvoie: 2
	}
	console.log(val);	// renvoie: 1
Démo
	{
	let val1 = 1;
	{
		let val2 = 2;
		console.log(val1);// renvoie: 1
		console.log(val2); // renvoie: 2
		{
			let val3=3;
				console.log(val1);// renvoie: 1
				console.log(val2); // renvoie: 2
				console.log(val3); // renvoie: 3
		}
	}
console.log(val1);// renvoie: 1	
console.log(val2);// renvoie Referencerror
console.log(val3);// renvoie Referencerror
}


var ou let

Démo
	for(var i=0;i<10;i++){
		setTimeout(function(){document.write(i)},1000);
	}

JS est asynchrone, c'est l'interpréteur qui ordonne les instructions à effectuer afin que l'exécution des instructions soit la plus rapide: il incrémente d'abord le compteur i et exécute ensuite 10 fois l'affichage (après 1sec) avec la valeur 10!

Démo
	for(let i=0;i<10;i++){
		setTimeout(function(){document.write(i)},1000);
	}

C'est la même chose avec let, à un détail près: la variable i est détruite à la fin de chaque tour de boucle, ce qui n'est pas le cas avec var (sauf si var est utilisé dans une fonction!).
L'interpréteur est donc obligé de mémoriser l'état de i à chaque tour pour ensuite exécuté 10 fois l'affichage!


Les types primitifs

Il en existe 3:

  • String
  • Number
  • Boolean

Une variable peut changer de type dynamiquement, il suffit de lui réaffecter une valeur d'un autre type, on dit que JavaScript est faiblement typé.

Les types primitifs sont des types qui sont systématiquement passés par valeur où que l'on se trouve dans le code

Exemple: passage par valeur

Démo
<h2>Affectation en créant une instance d'objet</h2>
<script>
	var cours1, cours2;
	cours1="Logique";
	cours2 = cours1;
	document.write(cours2); //Affiche Logique
	cours1="PHP";
	document.write(cours1); //Affiche PHP
	document.write(cours2); //Affiche Logique
</script>

On constate:

  • on affecte cours1 avec "Logique" et ensuite on affecte cour1 à cours2 en faisant cours2=cours1
    De manière assez attendue on constate par le document.write que les 2 variables contiennent "Logique"
  • Si je réaffecte cours1 avec "PHP", il est tout aussi normal (car je n'ai pas fais une deuxième fois cours2 = cours1) que cours 1 contienne "PHP" et cours2 "Logique"
  • on a passé la variable cours1 à cours2 par valeur, lorsque la variable cours1 change de valeur cours2 n'est pas affecté de cette nouvelle valeur

Le passage par valeur est la copie d'une valeur primitive d'une variable dans une autre variable par une opération d'affectation


Les variables de types String, Number et Boolean restent primitives mêmes si elles ont été déclarées au moyen des constructeurs String(), Number() et Boolean()


Les types objets

Tous les autres types sont des objets:

  • Array
  • Date
  • Object
  • function (...et oui les fonctions sont aussi des objets en JS)

Exemple: passage par référence

Démo
<h2>Affectation par un objet</h2>
<script>
	var cours1, cours2;
	cours1={nom:"Logique"};
	cours2 = cours1;
	document.write(cours2.nom); //Affiche Logique
	cours1.nom="PHP";
	document.write(cours1.nom); //Affiche PHP
	document.write(cours2.nom); //Affiche PHP
</script>

On constate:

  • cette fois-ci on charge un objet dans cours2
  • on affecte cours1.nom avec "Logique" et ensuite on affecte cour1 à cours2
    De manière assez attendue on constate par le document.write que les 2 propriétés nom des variables cours1 et cours2 contiennent "Logique"
  • Si je réaffecte cours1.nom avec "PHP", on constate que cours1.nom et cours2.nom contiennent "PHP" !!!
  • or, on a absolument pas fait soit cours2=cours1 ou cours2.nom="PHP"
  • alors pourquoi?
  • car lorsqu'on affecte un objet à une variable cette objet n'est pas passé par valeur mais par référence
  • la référence est un pointeur, c'est-à-dire une adresse, c'est comme si au moment de l'affectation on avait dit à cours2: "quand on t'utilise va prendre l'information dans cours1"
  • au moment où on fait l'affectation cours2=cours1 on affecte l'adresse de la variable cours 1 à la variable cours2

Le passage par référence est la copie d'une adresse de variable dans une autre variable par une opération d'affectation


Pour déclarer un tableau ou un objet

const permet de protéger les variables de type Array() ou object en empêchant le risque d'écrasement de leur référence.
D'autre part, comme les tableaux et les objets sont passés par référence et pas par valeur, on peut modifier le tableau ou l'objet comme on veut car on ne touche pas à sa référence.
Il y a donc 2 très bonnes raisons de déclarer les tableaux et les objets avec const.

Les tableaux et les objets sont passés par référence (par adresse), il est donc très important de veiller à ce que ces références (ou adresses) soient protégées et donc qu'elles ne risquent pas d'être écrasées pendant le déroulement du script.
On pourra donc toujours faire évoluer le tableau ou l'objet mais on ne risquera pas de supprimer sa référence par erreur.

Démo
	const eleve=["Desproges"];
	//On fait évoluer eleve
	eleve.push("Perret","Neymar","balathazar");
	console.log(eleve);
	//On tente d'écraser la référence eleve
	eleve=["plouc"];

La dernière instruction de l'exemple provoque une erreur car on tente d'écraser la référence de la constante eleve.


Quiz

Clique-moi pour générer un questionnaire !