Comprendre var, let et const en JS

Cet article vous présentera les var, let et const de JavaScript. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. L'instruction

var

var est utilisée pour déclarer une variable en JavaScript, qui suit les règles suivantes :

• La portée est la portée de la fonction ou la portée globale.
• n'est pas limité par la zone morte temporaire (TDZ).
• Cela créera une propriété globale sur window avec le même nom.
• est attribuable.
• est déclarable.

Portée de la fonction et portée globale

Lorsqu'elle est présente dans la portée globale, var crée une variable globale. De plus, il crée une windowpropriété globale sur avec le même nom :

var city = "Florence";

console.log(window.city); // "Florence"

Lorsqu'elle est déclarée dans une fonction, la variable est étendue à cette fonction :

var city = "Florence";

function bubble() {
  var city = "Siena";
  console.log(city);
}

bubble(); // "Siena"

console.log(city); // "Florence"

var les déclarations sont levées :

function bubble() {
  city = "Siena";
  console.log(city);
  var city; // hoists
}

bubble(); // "Siena"

Variable globale inattendue

Une variable affectée sans aucune déclaration (soit var, let ou const) par défaut deviendra un variable globale :

function bubble() {
  city = "Siena";
  console.log(window.city);
}

bubble(); // "Siena"

Pour éliminer ce comportement, utilisez le mode strict :

"use strict";

function bubble() {
  city = "Siena";
  console.log(window.city);
}

bubble(); // ReferenceError: assignment to undeclared variable city

Réassignable et redéclaré

Toute variable déclarée avec var peut ultérieurement être réaffecté ou redéclaré. Exemple de redéclaration :

function bubble() {
  var city = "Florence";
  var city = "Siena";
  console.log(city);
}

bubble(); // "Siena"

Exemple de réaffectation :

function bubble() {
  var city = "Siena";
  city = "Florence";
  console.log(city);
}

bubble(); // "Florence"

let

let l'instruction déclare une variable en JavaScript qui obéit aux règles suivantes :

• appartient à la portée du bloc.
• est soumis à la zone morte temporaire.
• Il ne crée aucune propriété globale sur window.
• est attribuable.
• ne peut être reformulé.

Portée du bloc

Les variables déclarées avec let ne créent aucune propriété globale sur window :

let city = "Florence";

console.log(window.city); // undefined

lorsqu'elles sont déclarées à l'intérieur d'une fonction, la portée de la variable est la fonction :

let city = "Florence";

function bubble() {
  let city = "Siena";
  console.log(city);
}

bubble(); // "Siena"

console.log(city); // "Florence"

Lorsqu'elle est déclarée dans le bloc , la portée de la variable est le bloc. Voici un exemple d'utilisation au sein d'un bloc :

let city = "Florence";

{
  let city = "Siena";
  console.log(city); // "Siena";
}

console.log(city); // "Florence"

Un exemple avec un bloc if :

let city = "Florence";

if (true) {
  let city = "Siena";
  console.log(city); // "Siena";
}

console.log(city); // "Florence"

En revanche, var n'est pas restreint par un bloc :

var city = "Florence";

{
  var city = "Siena";
  console.log(city); // "Siena";
}

console.log(window.city); // "Siena"

La déclaration de zone morte temporaire

let peut être favorisée, mais générera une zone morte temporaire :

function bubble() {
  city = "Siena";
  console.log(city); // TDZ
  let city;
}

bubble();

// ReferenceError: can't access lexical declaration 'city' before initialization

La zone morte temporaire peut empêcher l'initialisation Visite précédente let Déclaration. Autre exemple :

function bubble() {
  console.log(city); // TDZ
  let city = "Siena";
}

bubble();

// ReferenceError: can't access lexical declaration 'city' before initialization

Vous pouvez voir que les exceptions générées dans les deux exemples sont les mêmes : prouvant l'émergence d'une "zone morte temporaire".

Réaffectable, non redéclarable

Toute variable let déclarée avec ne peut être redéclarée . Un exemple de redéclaration qui lève une exception :

function bubble() {
  let city = "Siena";
  let city = "Florence";
  console.log(city);
}

bubble(); // SyntaxError: redeclaration of let city

Voici un exemple de réallocation valide :

function bubble() {
  let city = "Siena";
  city = "Florence";
  console.log(city);
}

bubble(); // "Florence"

const

const l'instruction est utilisée pour déclarer une variable en JavaScript, cette variable suit les règles suivantes :

• appartient à la portée du bloc.
• est soumis à la « zone morte temporaire ».
• Il ne crée aucune propriété globale sur window.
• Non réaffectable.
• ne peut être reformulé.

Portée du bloc

Les variables déclarées avec const ne créent aucune propriété globale sur window :

const city = "Florence";

console.log(window.city); // undefined

Lorsqu'elle est déclarée dans une fonction, la variable La portée de est la fonction :

const city = "Florence";

function bubble() {
  const city = "Siena";
  console.log(city);
}

bubble(); // "Siena"

console.log(city); // "Florence"

Lorsqu'elle est déclarée dans un bloc, la portée de la variable est le bloc. Exemple d'instruction de blocage {} :

const city = "Florence";

{
  const city = "Siena";
  console.log(city); // "Siena";
}

console.log(city); // "Florence"

Exemple d'instruction de blocage dans if :

const city = "Florence";

if (true) {
  const city = "Siena";
  console.log(city); // "Siena";
}

console.log(city); // "Florence"

La déclaration de zone morte de préparation

const peut être levée, cependant, entrera dans la zone morte temporaire :

function bubble() {
  console.log(city);
  const city = "Siena";
}

bubble();

// ReferenceError: can't access lexical declaration 'city' before initialization

ne peut pas être réaffecté et ne peut pas être redéclaré.

Toute variable const déclarée avec ne peut pas non plus être redéclarée. il soit réaffecté . Un exemple d'exception levée lors d'une redéclaration :

function bubble() {
  const city = "Siena";
  const city = "Florence";
  console.log(city);
}

bubble(); // SyntaxError: redeclaration of const city

Un exemple de réallocation :

function bubble() {
  const city = "Siena";
  city = "Florence";
  console.log(city);
}

bubble(); // TypeError: invalid assignment to const 'city'

Summary

✅✅

Portée du bloc

Zone morte temporaire

Créer des propriétés globales

Réaffectable

Redéclarable

	块作用域	暂存死区	创建全局属性	可重新分配	可重新声明
var	❌	❌	✅	✅	✅
let	✅	✅	❌	✅	❌
const	✅	✅	❌	❌	❌

❌

❌

✅

✅

✅

✅

✅

❌

✅

❌

❌

❌

❌

Anglais adresse originale : https://www.valentinog.com/blog/var/

Auteur : Valentino

Recommandations d'apprentissage gratuites connexes : Tutoriel vidéo js

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!