Chargement...

Portée des variables

Vous savez déclarer des variables, écrire des fonctions et renvoyer des valeurs. Une autre règle décide si un nom est accessible : la portée (scope). Elle répond : « depuis ici, quels noms ai-je le droit d’utiliser ? »

Ce que signifie la portée

La portée est la zone du programme où un nom existe. En dehors, la même orthographe peut être invisible — ou pointer vers une autre liaison. Pensez à des pièces : une étiquette sur le mur de la cuisine se voit dans la cuisine ; pas automatiquement dans la rue.

Trois types du quotidien

📊 Portée globale, de fonction et de bloc

Type Où vit le nom Outils typiques Visible où ?
globale hors de toute fonction let / const / var au niveau supérieur dans tout le script (même page)
fonction (locale) dans le corps de la fonction paramètres et locales seulement dans cette fonction
bloc dans { } comme if ou boucle let et const seulement dans ce bloc

Ces trois couvrent la plupart du code débutant. Les locales de fonction restent privées. Les liaisons de bloc avec let et const restent entre accolades. Les globales sont partagées — utiles pour un compteur commun, risquées si tout devient global.

Un nom global

javascript 
let city = "Tehran";
function showCity() {
console.log(city);
}
showCity();
console.log(city);

Les noms globaux sont hors des fonctions

city est déclaré au niveau supérieur, donc la fonction et le console.log suivant le lisent. Changez la chaîne une fois ; chaque lecteur voit la nouvelle valeur. Préférez le global seulement quand plusieurs parties partagent vraiment une valeur.

Un nom local dans une fonction

javascript 
function greet() {
let message = "Hello";
console.log(message);
}
greet();
// console.log(message); // Error: message is not defined

Les locales restent dans la fonction

message n’existe que pendant l’exécution de greet. À l’extérieur, ce nom n’est pas défini. Les paramètres aussi : locaux à la fonction qui les liste.

Portée de bloc avec let

javascript 
if (true) {
let score = 10;
console.log(score);
}
// console.log(score); // Error: score is not defined

let et const respectent les blocs

Dans { }, une liaison let ou const n’est visible que dans ce bloc. Après l’accolade fermante, score disparaît. L’ancien var a une portée de fonction et peut « fuir » hors du bloc. Préférez let et const pour que le bord du bloc signifie ce qu’il montre.

Le code imbriqué lit vers l’extérieur

javascript 
let title = "Shop";
function show() {
let label = "open";
console.log(title + " is " + label);
}
show();

L’imbriqué regarde vers l’extérieur

show lit le title extérieur et son propre label. La recherche va vers l’extérieur jusqu’à trouver une correspondance. Pas vers l’intérieur : le code extérieur ne voit pas un nom né seulement dans la fonction.

Le nom interne ombre l’externe

javascript 
let status = "ok";
function check() {
let status = "busy";
console.log(status);
}
check();
console.log(status);

Ombrage : à l’intérieur, l’interne gagne

Dans check, le status local cache l’extérieur. L’appel affiche busy. Ensuite, l’extérieur reste ok. Même orthographe, deux liaisons — la portée décide laquelle vous touchez.

Afficher une valeur à portée sur la page

Gardez une étiquette globale, construisez dans une fonction une ligne qui peut encore la lire, et écrivez le résultat dans un paragraphe.

Démo de page avec portée

html 
<!DOCTYPE html>
<html>
<head>
<title>scope — page</title>
</head>
<body>
<p id="msg">…</p>
<script>
let place = "Garden";
function line() {
let state = "open";
return place + " is " + state;
}
let box = document.getElementById("msg");
box.textContent = line();
</script>
</body>
</html>

Le paragraphe affiche Garden is open. place est global ; state est local à line. La fonction lit les deux, renvoie une chaîne, la page l’affiche. Changez seulement place, actualisez, lisez la ligne. Suite : closures — fonctions qui gardent des noms extérieurs vivants après l’appel extérieur.

Exercices

  1. Déclarez un let app = "demo" global et journalisez-le depuis une petite fonction et depuis l’extérieur.
  2. Mettez let secret = 1 dans une fonction ; confirmez que journaliser secret dehors lève une erreur.
  3. Dans if (true) { }, déclarez let n = 5 et journalisez ; réessayez après le bloc.
  4. Depuis une fonction imbriquée, lisez un let extérieur sans le redéclarer.
  5. Ombrez let tag = "A" extérieur avec let tag = "B" intérieur et journalisez les deux endroits.
  6. Dans la démo HTML, changez seulement la chaîne place, actualisez, lisez le paragraphe.

Pièges fréquents

  • Utiliser un local hors de sa fonction — ReferenceError, pas un vide silencieux
  • Attendre que var dans un bloc reste privé comme let
  • Supposer que le code extérieur voit des noms nés seulement dans une fonction imbriquée
  • Confondre portée et return — l’une est la visibilité, l’autre envoie une valeur
  • Attendre ici la leçon complète sur les closures — c’est la page suivante

Résumé

  • La portée est où un nom est visible et utilisable
  • Les globales vivent hors des fonctions et sont partagées dans le script
  • Locales et paramètres restent dans leur fonction
  • let et const dans { } sont de portée bloc ; mieux qu’un var qui fuit
  • L’imbriqué peut lire vers l’extérieur ; l’extérieur ne voit pas les noms uniquement internes
  • Une liaison interne de même nom ombre l’externe
  • La page peut combiner global et local dans une chaîne renvoyée
  • Suite : closures — fonctions qui se souviennent des noms extérieurs

🧠 Testez Vos Connaissances

Prêt à Commencer

Testez Vos Connaissances

Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet

❓
8
Questions
🎯
70%
Pour Réussir
♾️
∞
Temps
🔄
∞
Tentatives

📝 Instructions

  • Lisez chaque question attentivement
  • Sélectionnez la meilleure réponse pour chaque question
  • Vous pouvez refaire le quiz autant de fois que vous le souhaitez
  • Votre progression sera affichée en haut
Sujet 31 de 31
Javascript Tutoriel