Var, let, const en JS : Quelles différences ?

Vincent Bocquet
Jul 25, 2017 · 4 min read

Ces trois déclarations peuvent sembler similaires mais elles ont des utilisations bien distinctes.

On va donc faire un tour rapide des 3 manières de déclarer une variable / constante en Javascript, sans trop rentrer dans les détails, juste pour comprendre les différences majeurs entre les 3 instructions :

L’instruction let :

Elle permet de déclarer une variable d’une manière simple :

let maVar = true;

Il n’est pas obligatoire de déclarer une variable avec sa valeur initiale. Cela peut-être fait ensuite. Par exemple :

let maVar;

Comme c’est une variable, on peut modifier sa valeur après sa déclaration :

let maVar = 0;
console.log(maVar)
// Retourne 0;
maVar = 12;
console.log(maVar)
// Retourne 12

Sa principale caractéristique est sa portée : elle est limité à celle du bloc courant. Pour rappel, un bloc en Javascript, c’est ce qu’on retrouve entre accolades : une comparaison en if, une boucle while etc…

function test(){
if( 1 === 1 ){
let maVar = true;
console.log(maVar);
// Retourne true
}
console.log(maVar);
// Retourne une erreur, let n'existe pas hors du bloc "if"
}

L’instruction const :

Cette instruction permet de déclarer une constante disponible uniquement en lecture.

A l’inverse de let, const a besoin d’être déclaré avec une valeur initiale.

const CONFIG;
// Retourne une erreur, il manque la valeur

La bonne déclaration est donc :

const CONFIG = 'maConfig';

La portée de const est celle du bloc, comme la déclaration let. Pour la rendre globale, il faut simplement la définir hors de toute fonction.

function test(){
if( 2 === 2 ){
const CONFIG = 12;
console.log(CONFIG);
// Retourne 12
}
console.log(CONFIG);
// Retourne une erreur, config n'existe que dans le bloc courant
}

Comme const déclare une constante, on ne peut pas en re-déclarer une qui partage le même nom, dans la même portée :

const CONFIG = true;const CONFIG = false;
// Retourne une erreur, on ne peut pas déclarer une autre constante avec le même nom
let CONFIG = false;
// Retourne aussi une erreur, cela ne fonctionne pas non plus en déclarant une variable avec le même nom

De la même manière, on ne peut pas changer sa valeur après déclaration :

const CONFIG = true;
CONFIG = false;
// Retourne une erreur car ne peut pas changer la valeur d'une constante

Ce dernier point est à nuancer : c’est plutôt la référence à la valeur qui ne peut pas être changée. On peut très bien ajouter un élément à un tableau déclaré via const (dans ce cas, on ne fait que changer la valeur référencée) :

const CONFIG = [];
CONFIG.push(12);
console.log(CONFIG);
// Retourne [12], car je peux ajouter un élément à mon tableau.
CONFIG = true;
// Retourne une erreur, je ne peux pas changer la valeur de CONFIG

L’instruction var :

C’est la plus connue, celle qui existe depuis Javascript 1.0. On peut résumer, même si c’est plus subtile que ça, que var est similaire à let, mais avec une portée de fonction (là ou let a une portée de bloc).

Pour déclarer une variable, il suffit d’écrire :

var maVar = 'valeur';

Comme let, on peut aussi ne pas définir de valeur initiale, la variable aura donc une valeur undefined.

var maVariable;
console.log(maVariable);
// Retourne undefined

La portée de la variable est celle du contexte dans lequel elle est déclarée :

- Si elle est déclarée dans une fonction, la portée est celle de la fonction, qu’importe le bloc dans lequel elle se trouve.

- Si elle est déclarée hors d’une fonction, la portée sera celle du contexte global.

La déclaration sans instruction var (exemple : maVar = ‘test’) revient à écrire var maVar = ‘test’ dans un contexte global. La variable devient donc une propriété de l’objet global (Objet window en javascript).

function test(){
maVar = 'valeur';
}
test();
console.log(maVar);
// Retourne 'valeur'
console.log(window.maVar);
// Retourne 'valeur'

Pour conclure

En 2017, on retrouve plus souvent const et let que var. Ca ne veut pas dire que var est une mauvaise pratique, mais let et const sont maintenant préférés à var grâce à leurs portées par bloc, plus subtile.

Vous pouvez toujours utiliser var si vous êtes dans un environnement qui n’est pas en ES2015 ou que vous n’utilisez pas de transpileur type Babel.js.

Bien-sûr, cet article ne se veut pas exhaustif et je vous conseille de vous tourner vers la documentation pour des détails plus poussés sur ces 3 instructions (Temporal Dead Zone, hoisting…)

En tout cas, j’espère avoir pu vous aider à clarifier tout ça !

Vincent Bocquet

Written by

Développeur Full-Stack (React, Javascript, PHP, Ruby On Rails, WordPress)

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade