Portée JavaScript

Apprenez les bases de JavaScript Scope

La portée est l'ensemble de règles définies dans un langage de programmation pour déterminer la valeur d'une variable.

JavaScript utilisecadrage lexical, ce qui signifie que la valeur d'une variable est définie par sa position lorsqu'elle est écrite. Pas quand on l'appelle, ce qui arrive avec l'alternative,cadrage dynamique.

La portée est l'ensemble des variables visibles par une partie du programme.

Nous avons une portée globale, une portée de bloc et une portée de fonction. Si une variable est définie en dehors d'une fonction ou d'un bloc, elle est attachée à l'objet global et a une portée globale, ce qui signifie qu'elle est disponible dans chaque partie d'un programme.

Il y a une différence très importante entrevar,letetconstdéclarations.

Une variable définie commevarà l'intérieur d'une fonction n'est visible qu'à l'intérieur de cette fonction. Tout comme les paramètres de fonction.

Une variable définie commeconstouletd'autre part, n'est visible qu'à l'intérieur de ce bloc où il réside.

Il est important de comprendre qu'un bloc (identifié par une paire d'accolades) ne définit pas une nouvelle portée pourvar, mais c'est le cas pourletetconst. Une nouvelle portée pourvarn'est créé que lorsqu'une fonction est créée, carvarn'a pas d'étendue de bloc, mais d'étendue de fonction.

À l'intérieur d'une fonction, toutvarla variable qui y est définie est visible dans tout le code de la fonction, même si la variable est déclarée à la fin de la fonction, elle peut encore être référencée au début, car JavaScript avant d'exécuter le code en faitdéplace toutes les déclarations de variables en haut(quelque chose qui s'appellelevage). Pour éviter toute confusion, déclarez toujoursvarvariables au début d'une fonction.

Voilà ce que je veux dire. Même si vous déclarez unvarvariable à la fin d'une fonction, sa déclaration est déplacée vers le haut:

function run() {
  console.log(`${name}`)
  var name = 'Flavio'
}

run()

Cela imprime «non défini», car ce qui se passe réellement est:

function run() {
  var name;
  console.log(`${name}`)
  name = 'Flavio'
}

run()

letetconstne «souffrez» pas du levage. Si vous utilisez l'un d'entre eux dans l'exemple ci-dessus, vous obtiendrez une erreur:ReferenceError: name is not defined.

En JavaScript, les variables d'une fonction parent sont également mises à disposition des fonctions internes. La portée d'une fonction interne inclut également la portée d'une fonction parent, et c'est ce qu'on appelle la fermeture (nous en reparlerons plus en détail plus tard).

Il y a une petite chose dont vous devez être conscient. En mode non strict, si vous utilisez une variable sans la déclarer, où que vous le fassiez, cette variable sera attachée à la portée globale. Ce qui peut être une mauvaise source de bugs. Assurez-vous donc de toujours déclarer les variables avant de les utiliser. Soyez juste conscient de cela, mais c'est juste une autre raison d'utiliser le mode strict par défaut, ce qui résout ce problème. Nous parlerons du mode strict plus tard.

Rappelez-vous: toute variable définie dans une fonction (ou un bloc) avec le même nom qu'une variable globale a la priorité sur la variable globale, en la masquant.

Cette imprimeundefined:

var name = 'Roger'

function run() { console.log(</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">name</span><span style="color:#e6db74">}</span><span style="color:#e6db74">) var name = ‘Flavio’ }

run()

et cela soulève une erreurReferenceError: name is not defined:

let name = 'Roger'

function run() { console.log(</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">name</span><span style="color:#e6db74">}</span><span style="color:#e6db74">) let name = ‘Flavio’ }

run()

Téléchargez mon gratuitManuel du débutant JavaScript


Plus de tutoriels js: