Comprendre les étendues en JavaScript

Les notions de portées et de fermetures en Javascript sont des éléments fondamentaux nécessaires à la maîtrise du langage. Ce sont les héros méconnus derrière les constructeurs, les fonctions d'usine et les IIFE, pour n'en nommer que quelques-uns.

Cet article vise à expliquer la portée en JavaScript à l'aide d'exemples pratiques. Dans un article ultérieur, nous discuterons des fermetures JavaScript.

Portée et portée lexicale

Scope détermine simplement où une variable sera disponible pour être utilisée dans un programme JavaScript. Fondamentalement, il existe deux types de périmètre :

1. Portée mondiale
2. Portée locale

Portée mondiale

Avec une portée globale, une variable est rendue disponible partout et peut être utilisée n'importe où dans le programme. Techniquement, lorsqu'une variable n'est déclarée dans aucune fonction ou {accolades}, on dit qu'elle est dans la portée globale.

Portée locale

D'un autre côté, avec une portée locale, une variable n'est rendue disponible que dans un contexte particulier et ne peut être utilisée que dans ce contexte. Techniquement, lorsqu'une variable est déclarée dans des fonctions ou des {accolades}, on dit qu'elles ont une portée locale.

let x = 3; // x (global scoped)

function addXY () {
    let y = 5; // y (locally scoped)
    return  x + y; // returns 8 since x is available anywhere in this program
}

Une portée plus étendue

ECMAScript est la spécification standardisée qui définit les fonctionnalités de base des langages de script tels que JavaScript, garantissant la cohérence et l'interopérabilité entre les plates-formes. Tout comme le Système international d'unités (SI) fournit un cadre standardisé pour les mesures telles que les mètres et les kilogrammes afin de garantir la cohérence dans le monde entier, ECMAScript établit les normes pour les langages de script comme JavaScript, garantissant qu'ils fonctionnent uniformément sur différentes plates-formes et environnements.

Cette spécification standardisée pour JavaScript a évolué au fil des éditions, avec de nouvelles fonctionnalités et améliorations ajoutées dans chaque version. Parmi ces éditions se trouve ES6 (ECMAScript 2015) qui a fourni une mise à jour majeure introduisant let/const.

Avant ES6, les variables étaient définies en JavaScript avec le mot-clé var. Avec var, les variables peuvent à la fois être redéfinies et mises à jour. Cependant, les variables var n'ont qu'une portée locale dans les fonctions. L'extension de la portée locale pour inclure des extraits de code entre {accolades} a été introduite par ES6 via let/const. En termes simples, les variables var ont une portée locale dans les fonctions mais une portée globale partout ailleurs.

laissons et const introduire la portée du bloc qui fait qu'une variable n'est disponible que dans l'ensemble d'{accolades} le plus proche dans lequel elle a été définie. Ces accolades peuvent être celles d'une boucle for, d'une condition if-else ou de toute autre construction JavaScript similaire. De telles accolades sont également appelées bloc de code.

Exemples :

function addXYZ() {
    var x = 3;
    let y = 4;
    const z = 5;
    return x + y + z; // 12
}

// These log undefined because var, let, and const variables are locally scoped within functions.
console.log(x);
console.log(y);
console.log(z);

let age = 10; // global variable

if (age < 18) {
    let letCandy = 2; // block-scoped variable
    console.log(`You are entitled to ${letCandy} candies`);
} else {
    var varCandy = 4; // function-scoped variable
    console.log(`You are entitled to ${varCandy} candies`);
}

console.log(age); // Logs 10, as age is globally scoped
console.log(letCandy); // Throws ReferenceError, as letCandy is block-scoped
console.log(varCandy); // Logs 4, as varCandy is globally scoped outside of functions

Dans un prochain article, nous discuterons de la portée lexicale et des fermetures. Merci d'avoir lu.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!