La portée des variables en JavaScript ou JS

Lorsque vous commencez à apprendre JavaScript, l’une des notions les plus importantes à saisir est la portée des variables. Comprendre comment les variables sont accessibles dans différentes parties de votre code est essentiel pour écrire du code efficace et sans erreur. Dans cet article, nous allons découvrir ce qu’est la portée des variables en JavaScript et comment elle fonctionne.

Qu’est-ce que la portée des variables ?

La portée des variables en JavaScript fait référence à l’accessibilité des variables dans différentes parties de votre code. En d’autres termes, il s’agit de savoir où une variable est déclarée et où elle peut être utilisée. Il existe principalement deux types de portées de variables en JavaScript : la portée locale et la portée globale.

La portée locale

Une variable déclarée à l’intérieur d’une fonction est appelée une variable locale. Ces variables ne sont accessibles que dans la fonction où elles sont déclarées. Elles sont créées lorsque la fonction est appelée et détruites lorsque la fonction se termine :

function maFonction() {
    var x = 10; // Variable locale
    console.log(x); // Affiche 10
}

maFonction();

console.log(x); 
// Erreur ! x n'est pas défini en dehors de la fonction

Dans cet exemple, la variable x est déclarée à l’intérieur de la fonction maFonction(), donc elle est accessible uniquement à l’intérieur de cette fonction. Essayer d’accéder à x en dehors de la fonction générera une erreur car elle est en dehors de sa portée.

La portée globale

Une variable déclarée en dehors de toutes fonctions est appelée une variable globale. Ces variables sont accessibles de n’importe où dans votre code, que ce soit à l’intérieur ou à l’extérieur des fonctions :

var y = 20; // Variable globale

function uneAutreFonction() {
    console.log(y); // Affiche 20
}

uneAutreFonction();
console.log(y); // Affiche 20

Dans cet exemple, la variable y est déclarée en dehors de toutes les fonctions, ce qui la rend accessible de partout dans le code.

Précautions

Bien que les variables globales puissent sembler pratiques, il est généralement recommandé d’éviter autant que possible leur utilisation excessive. Les variables globales peuvent entraîner des conflits, des erreurs difficiles à déboguer et une mauvaise organisation du code. Il est souvent préférable de limiter la portée des variables en les déclarant localement chaque fois que cela est possible.

En gardant à l’esprit la différence entre les variables locales et globales, ainsi que les précautions à prendre lors de la déclaration de variables, vous pourrez écrire un code plus propre et mieux organisé.

Différences entre var, let et const

En JavaScript, il existe plusieurs façons de déclarer des variables, dont les plus courantes sont var, let et const. Chacun de ces mots-clés a ses propres caractéristiques et utilise différents types de portée et de réassignation.

var

var était le seul moyen de déclarer des variables avant l’introduction de let et const. Les variables déclarées avec var ont une portée de fonction ou globale. Cela signifie qu’elles sont accessibles à l’intérieur de la fonction où elles sont déclarées, ou bien, si elles sont déclarées en dehors de toute fonction, elles sont globales.

var x = 10;
function maFonction() {
    var y = 20;
    console.log(x); // Affiche 10
    console.log(y); // Affiche 20
}

maFonction();
console.log(x); // Affiche 10

console.log(y); 
// Erreur ! y n'est pas défini en dehors de la fonction

let

let a été introduit dans ECMAScript 6 (ES6) pour offrir une alternative à var avec une portée de bloc. Les variables déclarées avec let ont une portée limitée au bloc dans lequel elles sont déclarées. Cela signifie qu’elles ne sont accessibles qu’à l’intérieur de ce bloc, comme une boucle for ou un bloc if.

let x = 10;
if (true) {
    let y = 20;
    console.log(x); // Affiche 10
    console.log(y); // Affiche 20
}

console.log(x); // Affiche 10

console.log(y); 
// Erreur ! y n'est pas défini en dehors du bloc if

const

const est également apparu dans ECMAScript 6 et est utilisé pour déclarer des variables avec une valeur qui ne peut pas être réassignée. Cependant, cela ne signifie pas que la valeur est immuable. Si la valeur est un objet ou un tableau, ses propriétés ou ses éléments peuvent être modifiés, mais la variable elle-même ne peut pas être réassignée à une nouvelle valeur.

const x = 10;

x = 20; 
// Erreur ! Impossible de réassigner une constante

const tableau = [1, 2, 3];
tableau.push(4); // OK
console.log(tableau); // Affiche [1, 2, 3, 4]

En résumé :

var a une portée de fonction ou globale
let a une portée de bloc et permet la réassignation
const a une portée de bloc et ne permet pas la réassignation de la variable elle-même (mais peut permettre la modification de ses propriétés ou éléments pour les objets et les tableaux)

Il est recommandé d’utiliser let et const plutôt que var dans le code moderne JavaScript, car cela permet un meilleur contrôle sur la portée et le comportement des variables.