Var, const et let

Bonjour,
Pourrait-on m'expliquer calmement et avec des termes simples la différence entre var, const et let et aussi quand ne pas utiliser de mot-clé avant ?
Merci !

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)

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)