Var, const et let

Et l'eau

OUI JE VAIS T'EXPLIQUER CALMEMENT ?

quelles sont les différences entre let et var ?
C'est la portée de ta variable. C'est quelque chose d'essentielle afin de coder proprement. Plus tu limites la portée mieux c'est ! plus loin, je vais t'expliquer pourquoi.

Prenons cet exemple :

var a = 1;
function une_fonction(){
    var b = 2;
    a = a + b
    console.log(a + b)
}

une_fonction();
console.log(a);
console.log(b); //erreur !!

la var "a" est visible dnas la fonction puisque que sa portée est au niveau parent. (Tel que j'ai écrit, c'est dégueulasse, mais ça fonctionne. Pourquoi c'est déguelasse, on ne joue pas sur la portée sur une déclaration de fonction ou méthode. C'est très dangereux. Un jour, j'ai eu à déboguer ce genre de cas et je peux te dire que le code qui en ressortait était in maintenable ==> un code bien opaque et monolithique.)
En revanche, puisque "b" est déclaré dans la fonction, elle n'est pas accessible à l'extérieur.
Tu remarqueras que j'ai bien spécifié le mot var. C'est très important pour effectuer une portée restreinte.

En ce qui concerne "let". La portée est encore plus restreinte. Ça se cantonne au bloc de déclaration de la variable. exemple :

function foo(){
    let a = 1;
    let b = 2; 
    let c = 3;

    if(a === 1){
        let d = 4;
        if(b === 2){
            console.log(d);
        }
    }
    console.log(d); // erruer !! 
}

foo()

* "d" à l'extérieur du bloc ne sera pas accessible.
ou

for(let i = 0; i < 5; i++){
    console.log(i);
}

console.log(i);//erreur !!

Qu'est ce qu'une constante?

C'est un type de donnée qui est lecture seule. Une fois que la constante à une donnée, tu ne peux pas lui changer sa valeur directement (je ne parle pas des bêtises récurrentes que je vois (attribuer à une constante un objet statique). const est très vieux et ne vient pas de l'es6 comme on pourrait le croire. C'est la même chose pour let aussi de mémoire. Ce sont des concepts vieux mais qui ont mis du temps pour ses implémentations dans les navigateurs.

exemple d'une constante :

const TVA = 5.5;

La portée d'une constante en Javascript est la même que var. Ne pas confondre avec le php où la portée est global. Dans beaucoup de langage le nom de la constante doit être écrite en majuscule. Ce n'est pas obligatoire mais c'est une convention de nomage. Par contre, en javascript, tu n'as pas cette convention. Cela dit, en lisant un code, tu peux facilement identifier une constante d'une variable var/let.

Qu'en est il si on déclare une variable sans le mot var/const/let ? Cette variable est dite de type globale. Ce qui veut dire accessible de partout. Le gros inconvénient, si dans un script tu as une variable dont le nom est le même, il va y avoir une collision. Et donc, paye ton bug qui sera extrêmement difficile à résoudre (surtout si ce nom de variable est déclarée dans un script externe et dont le code n'est pas accessible facilement) (d'où ma recommandation de limiter au mieux le scope de ta variable.).

EST CE QUE MON EXPLICATION AU CALME EST CORRECTE ?
Modifié par niuxe (24 Mar 2021 - 20:36)

Bonjour,

En gros, +1 avec ce que dit niuxe, mais je voudrais préciser un point qui est souvent mal compris.

niuxe a écrit :
Qu'en est il si on déclare une variable sans le mot var/const/let ?

Cela dépend du navigateur.

1) il y a des navigateurs qui peuvent générer une erreur (mais ces navigateurs sont rares),
2) pour la plupart des navigateurs, lorsqu'ils rencontrent une variable non déclarée, tout se passe comme si la variable avait été déclarée avec le mot clé var au moment de cette rencontre,
EDIT: j'avais aussi écrit précédemment que l'absence de déclaration ne transforme pas la variable en variable globale. C'est faux dans le cas général. Mea culpa.

Ceci étant, comme le dit niuxe, c'est une mauvaise pratique de ne pas déclarer explicitement les variables. On ne devrait jamais utiliser une variable non déclarée.

Sinon voici mon résumé :

Principale différence en pratique entre var et let : une variable déclarée avec let n'est visible que dans le bloc, sous blocs et fonctions déclarées dans ces blocs contrairement à une variable déclarée avec var (tout le reste est du détail)

if(1)
{
	var a;
	let b;
	a=1;
	b=2;
}
console.log(a); // a existe et vaut 1
console.log(b); // b n'existe pas et une erreur est générée

Principale différence en pratique entre var, let et const : une constante déclarée avec const ne peut pas être modifiée contrairement à une variable déclarée avec var ou let (tout le reste est du détail)

var a=1;
const b=2;
a=3; // pas d'erreur générée
b=4; // erreur générée

Détails :

1) Variables : elles sont déclarées avec let ou var. Elles peuvent être modifiées.

Si une variable déclarée avec var est utilisée avant d'être déclarée, aucune erreur n'est générée. Ceci est dû plus ou moins au fait qu'une variable non déclarée est supposée avoir été déclarée avec var.

Si une variable déclarée avec let est utilisée dans un bloc de code avant d'avoir été déclarée (dans ce bloc ou l'un des blocs qui le contiennent), une erreur est générée.

Une variable déclarée avec var au niveau global est visible partout. Une variable déclarée avec var dans une fonction est visible partout dans cette fonction, y compris les éventuelles fonctions déclarées dans cette fonction.

Une variable déclarée avec let est visible partout dans le bloc où elle a été déclarée, ainsi que dans les sous-blocs de ce bloc et fonctions définies à l'intérieur de ces blocs.

Note : ne pas confondre fonction utilisée dans un bloc ou une autre fonction, avec fonction déclarée dans un bloc ou une autre fonction.

2) Constantes: elles sont déclarées avec le mot clé const. Elles ne peuvent pas être modifiées sinon cela génère une erreur. Elles doivent recevoir une valeur au moment de la déclaration sinon cela génère une erreur. Elles ne peuvent pas être utilisées avant leur déclaration sinon cela génère une erreur.

Elles sont visibles comme le sont les variables déclarées avec var.

Attention, si la constante est un tableau ou un objet, les éléments du tableau ou les propriétés de l'objet peuvent être modifiés. Ce n'est que "l'adresse" du tableau ou de l'objet qui ne peut pas être modifiée.

Amicalement,

PS: j'ai quelques millions de lignes au compteur et je n'ai quasi jamais utilisé le mot clé const.
Modifié par parsimonhi (25 Mar 2021 - 10:59)

Bonjour,
Merci beaucoup à vous deux ! J'ai presque tout compris...

a écrit :
PS: j'ai quelques millions de lignes au compteur et je n'ai quasi jamais utilisé le mot clé const.

C'est bien ce que je me disais...


Jusqu'à là, j'utilisais seulement "var", en prenant à ne jamais mettre le même nom. Du coup, faut-il des fois que j'utilise let au lieu au de var ? Dans quels genres de cas ?

Merci !

D'accord ! Un grand merci !

Donc, "var" et "const" ne servent à rien, s'il est préférable d'utiliser "let" à la place de "var" et que "const" n'est jamais utilisé ?

Merci pour ces explications limpides !

parsimonhi a écrit :
Certains vont te dire qu'il faut utiliser "const" dans les cas où tu ne modifies jamais la donnée. Ça te signale d'éventuelles étourderies...

Je suis dans ce cas de figure

Notons que const n'est pas tout a fait une variable de constante "gelée" : un tableau ou un objet définit avec const pourra être modifié : on pourra y ajouter et supprimer des valeurs. Dans ce cas-là, c'est le type de la variable (en l'occurrence ici le tableau) qui ne pourra être modifié.

La seule manière que je connaisse pour vraiment fixer la variable afin d'en faire une constante non modifiable quel qu'en soit le type est d'utiliser Object.freeze() :

// pour un objet (ressource MDN) :
const obj = { prop: 42 };
Object.freeze(obj);
obj.prop = 33; // Throws an error in strict mode
console.log(obj.prop); // expected output: 42

// ça marche aussi pour un tableau (ressource Stackoverflow) :
const arr = [1, 2, 3, 4];
Object.freeze(arr);
//Object.isFrozen(arr); // true
arr.push(5); // -> erreur
arr.pop(); // -> erreur
console.log(arr);

Modifié par Olivier C (28 Mar 2021 - 11:33)