JavaScript - Portée des Variables

Bonjour là-bas, futurs magiciens JavaScript ! Aujourd'hui, nous allons entreprendre un voyage passionnant à travers le monde de la portée des variables. Ne vous inquiétez pas si vous êtes nouveau dans la programmation - je serai votre guide amical, et nous explorerons ce concept ensemble, étape par étape. Alors, prenez vos baguettes virtuelles (claviers), et plongons dedans !

Portée des Variables JavaScript

La portée des variables est comme un terrain de jeu où vos variables peuvent jouer. Elle détermine où dans votre code une variable est visible et peut être utilisée. Pensez-y comme la "portée de visibilité" de vos variables. Commençons par un exemple simple :

let globalVar = "Je suis visible partout !";

function sayHello() {
console.log(globalVar);
let localVar = "Je suis seulement visible dans cette fonction !";
console.log(localVar);
}

sayHello();
console.log(globalVar);  // Ça fonctionne
console.log(localVar);   // Ça va causer une erreur

Dans cet exemple, globalVar est comme le kid populaire à l'école - tout le monde le connaît et peut lui parler. Mais localVar est plus comme le kid timide qui ne sort que pendant les cours d'art (notre fonction sayHello).

Portée de Bloc JavaScript

Maintenant, parlons de la portée de bloc. En JavaScript, un bloc est défini par des accolades {}. Les variables déclarées avec let et const sont de portée de bloc, ce qui signifie qu'elles ne sont visibles que dans le bloc dans lequel elles sont déclarées.

if (true) {
let blockScopedVar = "Je suis seulement visible dans ce bloc !";
console.log(blockScopedVar);  // Ça fonctionne
}

console.log(blockScopedVar);  // Ça va causer une erreur

Pensez à la portée de bloc comme à une maison secrète. Seuls les kids cool (variables) à l'intérieur de la maison (bloc) connaissent le secret du poing (peuvent accéder aux variables).

Portée de Fonction JavaScript

La portée de fonction est comme une pièce privée pour vos variables. toute variable déclarée à l'intérieur d'une fonction n'est accessible que dans cette fonction. Voyons un exemple :

function outer() {
let outerVar = "Je suis dans la fonction externe !";

function inner() {
let innerVar = "Je suis dans la fonction interne !";
console.log(outerVar);  // Ça fonctionne
console.log(innerVar);  // Ça fonctionne
}

inner();
console.log(outerVar);  // Ça fonctionne
console.log(innerVar);  // Ça va causer une erreur
}

outer();

Ici, outerVar est comme un parent qui peut peek dans la chambre de leur enfant (inner fonction), mais les jouets de l'enfant (innerVar) restent dans la chambre de l'enfant.

Portée Locale JavaScript

La portée locale se réfère aux variables accessibles uniquement dans une partie spécifique de votre code. Cela peut être à l'intérieur d'une fonction (portée de fonction) ou d'un bloc (portée de bloc). Jetons un regard sur un exemple plus complexe :

let globalVar = "Je suis global !";

function outerFunction() {
let outerVar = "Je viens de la fonction externe !";

if (true) {
let blockVar = "Je viens du bloc !";
var functionVar = "Je suis visible dans toute la fonction !";

console.log(globalVar);    // Ça fonctionne
console.log(outerVar);     // Ça fonctionne
console.log(blockVar);     // Ça fonctionne
console.log(functionVar);  // Ça fonctionne
}

console.log(globalVar);    // Ça fonctionne
console.log(outerVar);     // Ça fonctionne
console.log(functionVar);  // Ça fonctionne
console.log(blockVar);     // Erreur !
}

outerFunction();
console.log(globalVar);    // Ça fonctionne
console.log(outerVar);     // Erreur !
console.log(functionVar);  // Erreur !
console.log(blockVar);     // Erreur !

Cet exemple est comme un grand rassemblement de famille. globalVar est le grand-parent que tout le monde connaît. outerVar est comme un parent, connu dans la famille outerFunction. blockVar est le cousin timide qui n'apparaît que dans une pièce (le bloc if). functionVar, déclaré avec var, est l'oncle bruyant que tout le monde dans la fonction peut entendre.

Maintenant, résumons les différents types de déclarations de variables et leurs portées dans un tableau pratique :

Déclaration	Portée	Hoisting	Peut être réassignée
var	Fonction	Oui	Oui
let	Bloc	Non	Oui
const	Bloc	Non	Non

Souvenez-vous, var est le kid old-school qui peut être un peu imprévisible. let et const sont les nouveaux kids sur le block qui jouent selon des règles plus strictes.

Comprendre la portée des variables est crucial en JavaScript. Cela vous aide à écrire un code plus propre et plus efficace, et à éviter des bugs ennuyeux. N'oubliez jamais de déclarer vos variables dans la portée appropriée, et soyez attentif à où vous essayez de les accéder.

Alors que nous terminons cette leçon, pensez à votre code comme une ville bien organisée. Les variables globales sont les parcs publics que tout le monde peut visiter. Les portées de fonction sont comme des bâtiments avec différents étages (blocs), chacun avec son propre ensemble de chambres (portées locales). En gardant vos variables dans leurs "maisons" properes, vous créerez une ville JavaScript harmonieuse et bien fonctionnelle !

Continuez à vous entraîner, et bientôt vous serez un maître de la portée des variables. Jusqu'à la prochaine fois, bon codage !

Credits: Image by storyset