Home  >  Article  >  Web Front-end  >  Learn more about let, var, and const: What do they mean?

Learn more about let, var, and const: What do they mean?

WBOY
WBOYOriginal
2024-02-21 18:03:04585browse

Learn more about let, var, and const: What do they mean?

In-depth understanding of let, var and const: What do they mean?

In JavaScript, we have three different ways of declaring variables, namely let, var and const. They have some differences in function and use. Below we will delve into their respective meanings and usage.

  1. let:
    let is a new keyword introduced in ES6, used to declare block-level scope variables. Its characteristic is that variables have block-level scope and are only visible inside the block where the variable is declared. A common usage scenario is to declare local variables in a loop body, conditional statement or function.

Sample code:

function foo() {
  if (true) {
    let x = 10;  // 只在if块内可见
    console.log(x);  // 输出10
  }
  console.log(x);  // ReferenceError: x is not defined
}

foo();
  1. var:
    In ES5, we use the var keyword to declare variables. Different from let, the variable declared by var is a function-level scope variable, and its scope is the entire function, not the block-level scope. At the same time, variables declared with var have the characteristic of variable promotion, that is, they can be used before declaration.

Sample code:

function foo() {
  if (true) {
    var x = 10;  // 函数级作用域,整个函数可见
    console.log(x);  // 输出10
  }
  console.log(x);  // 输出10
}

foo();

The variable promotion feature can also be tested within different code blocks:

function foo() {
  console.log(x);  // 输出undefined,而不是ReferenceError: x is not defined
  if (true) {
    var x = 10;  // 变量提升
  }
  console.log(x);  // 输出10
}

foo();
  1. const:
    const is used For declaring a constant, it means that the value of the constant cannot be changed after it is declared. Once assigned, it cannot be reassigned. Similar to let, const also has block-level scope and is only visible within the block where the variable is declared.

Sample code:

function foo() {
  const PI = 3.14;
  PI = 3.14159;  // TypeError: Assignment to constant variable
  console.log(PI);
}

foo();

It should be noted that the constant declared by const means that the value of the variable cannot be changed, not that the object referenced by the variable cannot be changed. If const declares an object, the object's properties can be modified, but cannot be reassigned.

Sample code:

const obj = {x: 10};
obj.x = 20;  // 修改属性值
console.log(obj.x);  // 输出20

obj = {x: 30};  // TypeError: Assignment to constant variable

Summary:

  • let applies to block-level scope variables and is only visible inside the declared block.
  • var is suitable for function-level scope variables, can be used before declaration, and has the characteristics of variable promotion.
  • const is used to declare constants. The value of a constant cannot be changed after declaration, but pay attention to the difference between modification and reassignment of object attributes.

Different variable declaration methods are suitable for different scenarios. Reasonable selection and use can improve the readability and maintainability of the code. I hope that the introduction in this article can help readers better understand and use let, var and const.

The above is the detailed content of Learn more about let, var, and const: What do they mean?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn