Compréhension approfondie des variables, de la portée et du levage en JavaScript

Les variables sont un élément fondamental de nombreux langages de programmation et constituent le premier et le plus important concept que les novices doivent apprendre. Il existe de nombreuses propriétés de variable différentes en JavaScript, ainsi que certaines règles qui doivent être suivies lors de la dénomination des variables. En JavaScript, trois mots-clés sont utilisés pour déclarer des variables - var, let et const - dont chacun affecte la façon dont le code interprète différemment la variable.

Ce tutoriel présentera ce que sont les variables, comment les déclarer et les nommer, et examinera plus en détail les différences entre var, let et const. Nous passerons également en revue les effets du levage et l'importance des portées globales et locales sur le comportement variable. [Recommandations de cours connexes : Tutoriel vidéo JavaScript]

Comprendre les variables

Une variable est un conteneur nommé utilisé pour stocker des valeurs. Une information à laquelle nous pouvons faire référence plusieurs fois peut être stockée dans une variable pour une utilisation ou une modification ultérieure. En JavaScript, la valeur contenue dans une variable peut être n'importe quel type de données JavaScript, notamment des nombres, des chaînes ou des objets.

Avant la spécification du langage ECMAScript 2015 (ES6), sur laquelle est basé le JavaScript actuel, il n'y avait qu'une seule façon de déclarer des variables : en utilisant le mot-clé var. Par conséquent, la plupart des anciens codes et ressources d’apprentissage utiliseront simplement var pour les variables. Nous discuterons de la différence entre les mots-clés var, let et const dans une section distincte ci-dessous.

Nous pouvons utiliser var pour démontrer le concept de la variable elle-même. Dans l’exemple suivant, nous allons déclarer une variable et lui attribuer une valeur.

// Assign the string value Sammy to the username identifier
var username = "sammy_shark";

Cette instruction se compose des parties suivantes :

• Utilisez le mot-clé var pour déclarer les variables

• Nom de la variable (ou symbole d'identification), nom d'utilisateur

• opération d'affectation, représentée par = syntaxe

• valeur attribuée "sammy_shark"

Nous pouvons désormais utiliser le nom d'utilisateur dans notre code. JavaScript se souviendra que le nom d'utilisateur représente la valeur de chaîne sammy_shark.

// Check if variable is equal to value
if (username === "sammy_shark") {
  console.log(true);
  }

Sortie :

true

Comme mentionné précédemment, les variables peuvent être utilisées pour représenter n'importe quel type de données JavaScript. Dans cet exemple, nous déclarerons des variables en utilisant des valeurs chaîne, nombre, objet, booléenne et nulle.

// Assignment of various variables
var name = "Sammy";
var spartans = 300;
var kingdoms = [ "mammals", "birds", "fish" ];
var poem = { roses: "red", violets: "blue" }; 
var success = true;
var nothing = null;

En utilisant console.log, nous pouvons voir les valeurs contenues dans une variable spécifique.

// Send spartans variable to the console
console.log(spartans);

Sortie : 300

Les variables stockent des données en mémoire qui peuvent être consultées et modifiées ultérieurement. Les variables peuvent également être réaffectées et recevoir une nouvelle valeur. L'exemple simplifié ci-dessous montre comment stocker un mot de passe dans une variable, puis le mettre à jour.

//为password变量赋值
var password = "hunter2";
//用一个新值重新分配变量值
password = "hunter3";
console.log(password);

Sortie :

'hunter3'

Dans un programme réel, le mot de passe serait très probablement stocké en toute sécurité dans la base de données. Cependant, cet exemple illustre une situation dans laquelle nous pouvons avoir besoin de mettre à jour la valeur d'une variable. La valeur du mot de passe était hunter2, mais nous l'avons réattribuée à hunter3, qui est la valeur que JavaScript reconnaît à partir de ce moment-là.

Variables nommées

Les noms de variables sont appelés identifiants en JavaScript. Nous avons discuté de quelques règles pour nommer les identifiants lors de la compréhension de la syntaxe JavaScript et de la structure du code, résumées ci-dessous :

• Les noms de variables ne peuvent être composés que de lettres (a-z), de chiffres (0-9), du dollar. signe ($) et forme de trait de soulignement (_)

• Les noms de variables ne peuvent pas contenir de caractères d'espacement (tabulations ou espaces)

• Les nombres ne peuvent pas être les nom de toute variable commençant par

• Les mots-clés réservés ne peuvent pas être utilisés comme noms de variables

• Les noms de variables sont sensibles à la casse

JavaScript a également l'habitude d'utiliser camelCase (parfois appelé CamelCase) dans les noms de fonctions et de variables déclarées avec var ou let. Il s'agit d'une pratique consistant à mettre le premier mot en minuscule, puis à mettre en majuscule la première lettre de chaque mot suivant, sans espace entre les deux. À quelques exceptions près, la plupart des variables non constantes suivent cette convention. Les noms des variables constantes déclarées à l'aide du mot-clé const sont généralement en lettres majuscules.

Cela peut sembler beaucoup de règles à apprendre, mais cela deviendra bientôt une seconde nature pour écrire des noms de variables valides et réguliers.

Différence entre var, let et const

JavaScript a trois mots-clés différents pour déclarer les variables, ce qui ajoute une complexité supplémentaire au langage. La différence entre les trois repose sur la portée, la promotion et la réaffectation.

关键字	范围	变量提升	可以重新分配	可以重新定义
var	功能范围	Yes	Yes	Yes
let	阻止范围	No	Yes	No
const	阻止范围	No	No	No

您可能想知道应该在自己的程序中使用这三种方法中的哪一种。一个普遍接受的做法是尽可能多地使用const，并在循环和重新分配的情况下使用let。通常，在处理遗留代码之外可以避免var。

变量作用域

JavaScript中的作用域是指代码的当前上下文，它决定了变量对JavaScript的可访问性。范围的两种类型是局部的和全局的:

• 全局变量是在块之外声明的变量

• 局部变量是在块内声明的变量

在下面的示例中，我们将创建一个全局变量。

//初始化一个全局变量
var creature = "wolf";

我们知道变量可以重新分配。使用局部作用域，我们实际上可以创建与外部作用域中的变量同名的新变量，而无需更改或重新分配原始值。

在下面的示例中，我们将创建一个全局species变量。函数内部是一个具有相同名称的局部变量。通过将它们发送到控制台，我们可以看到变量的值如何根据范围而不同，并且原始值不会更改。

//初始化一个全局变量
var species = "human";
function transform() {
//初始化一个局部的、函数作用域的变量
  var species = "werewolf";
  console.log(species);
}
//记录全局和局部变量
console.log(species);
transform();
console.log(species);

输出：

human
werewolf
human

在本例中，局部变量是函数作用域的。使用var关键字声明的变量总是函数作用域，这意味着它们将函数识别为具有独立作用域。因此，这个局部作用域的变量不能从全局作用域访问。

然而，新的关键字let和const是块范围的。这意味着从任何类型的块(包括函数块、if语句、for和while循环)创建一个新的本地范围。

为了说明函数作用域变量和块作用域变量之间的区别，我们将使用let在if块中分配一个新变量。

var fullMoon = true;
//初始化一个全局变量
let species = "human";
if (fullMoon) { 
//初始化一个块范围的变量
  let species = "werewolf";
  console.log(`It is a full moon. Lupin is currently a ${species}.`);
}
console.log(`It is not a full moon. Lupin is currently a ${species}.`);

输出：

It is a full moon. Lupin is currently a werewolf.
It is not a full moon. Lupin is currently a human.

在此示例中，species变量具有一个值global（human），另一个值local（werewolf）。var但是，如果我们使用，则会有不同的结果。

//使用var初始化一个变量
var species = "human";
if (fullMoon) {  
//尝试在一个块中创建一个新变量
  var species = "werewolf";
  console.log(`It is a full moon. Lupin is currently a ${species}.`);
}

console.log(`It is not a full moon. Lupin is currently a ${species}.`);

输出：

It is a full moon. Lupin is currently a werewolf.
It is not a full moon. Lupin is currently a werewolf.

在这个例子的结果中，全局变量和块范围的变量都以相同的值结束。这是因为您不是使用var创建一个新的本地变量，而是在相同的范围内重新分配相同的变量。var不能识别是否属于不同的新范围。通常建议声明块范围的变量，因为它们生成的代码不太可能无意中覆盖变量值。

变量提升

到目前为止，在大多数示例中，我们已经使用var声明了一个变量，并使用一个值初始化了它。在声明和初始化之后，我们可以访问或重新分配变量。

如果我们试图在变量被声明和初始化之前使用它，它将返回undefined。

//在声明变量之前尝试使用它
console.log(x);
/ /变量赋值
var x = 100;

输出：

undefined

但是，如果省略var关键字，就不再声明变量，而是初始化它。它将返回一个ReferenceError并停止脚本的执行。

//在声明变量之前尝试使用它
console.log(x);
//没有var的变量赋值
x = 100;

输出：

ReferenceError: x is not defined

原因在于提升，这是JavaScript的一种行为，其中变量和函数声明被移到它们作用域的顶部。由于只挂起实际声明，而没有初始化，因此第一个示例中的值返回未定义的值。

为了更清楚地演示这个概念，下面是我们编写的代码以及JavaScript如何解释它。

// The code we wrote
console.log(x);
var x = 100;
// How JavaScript interpreted it
var x;
console.log(x);
x = 100;

JavaScript在执行脚本之前将x保存为内存作为变量。 由于它在定义之前仍然被调用，因此结果是未定义的而不是100.但是，它不会导致ReferenceError并停止脚本。

 尽管var关键字实际上并未更改var的位置，但这有助于表示提升的工作原理。 但是，这种行为可能会导致问题，因为编写此代码的程序员可能希望x的输出为true，而不是undefined。

在下一个例子中，我们还可以看到提升是如何导致不可预测的结果的:

//在全局范围内初始化x
var x = 100;
function hoist() {
//不应影响编码结果的条件
  if (false) {
      var x = 200;
  }
  console.log(x);
}

hoist();

输出：

undefined

在本例中，我们声明x全局为100。根据if语句，x可以更改为200，但是由于条件为false，所以它不应该影响x的值。

这种不可预测的行为可能会在程序中引起bug。由于let和const是块范围的，所以它们不会以这种方式提升，如下所示。

//在全局范围内初始化x
let x = true;function hoist() {
//在函数作用域中初始化x
 if (3 === 4) {
      let x = false;
  }
  console.log(x);
}

hoist();

输出：

true

变量的重复声明(这在var中是可能的)将在let和const中抛出一个错误。

//试图覆盖用var声明的变量
var x = 1;
var x = 2;

console.log(x);

输出：2

//试图覆盖用let声明的变量
let y = 1;
let y = 2;

console.log(y);

输出：

Uncaught SyntaxError: Identifier 'y' has already been declared

总之，使用var引入的变量有可能受到提升的影响，提升是JavaScript中的一种机制，其中变量声明被保存到内存中。这可能导致代码中出现未定义的变量。let和const的引入解决了这个问题，它在试图在声明变量之前使用该变量或多次声明该变量时抛出一个错误。

常量

许多编程语言都有常量，这些常量是不能修改或更改的值。在JavaScript中，const标识符是根据常量建模的，不能重新分配分配给const的值。

将所有const标识符都写成大写是常见的约定。这将它们与其他变量值区分开来。

在下面的示例中，我们使用const关键字将变量SPECIES初始化为常量。试图重新分配变量将导致错误。

//给const赋值
const SPECIES = "human"; 

//尝试重新分配值
SPECIES = "werewolf";

console.log(SPECIES);

输出：

Uncaught TypeError: Assignment to constant variable.

因为不能重新分配const值，所以需要同时声明和初始化它们，否则也会抛出错误。

//声明，但不初始化const
const TODO;

console.log(TODO);

输出：

Uncaught SyntaxError: Missing initializer in const declaration

不能在编程中更改的值称为不可变值，而可以更改的值是可变的。虽然const值不能重新分配，但是它们是可变的，因为可以修改用const声明的对象的属性。

//创建一个具有两个属性的CAR对象
const CAR = {
    color: "blue",
    price: 15000}
//修改CAR的属性
CAR.price = 20000;

console.log(CAR);

输出：

{ color: 'blue', price: 20000 }

常量非常有用，可以让将来的自己和其他程序员清楚地认识到，不应该重新分配预期的变量。如果您希望将来修改某个变量，那么您可能希望使用let来声明该变量。

本文来自 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!