Informatique


const, var et let

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!


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 !