⭐

A:

We can describe the differences between var, let, and const in these ways:

  • Variable ascension
  • Temporary dead zone
  • Block-level scope
  • Repeat statement
  • Modify declared variables
  • Best practices

Pre-knowledge:

Understand scope in JS

Variable ascension

Variable promotion means that the variable or function declaration is promoted to the top of the current scope and given an initial value of undefined.

  • The variable declared by var has variable promotion
  • Variables declared by let and const do not have variable promotion
console.log(name) // undefined
var name = '阿林'
Copy the code

Is equivalent to

var name = undefined
console.log(name) // undefined
name = '阿林'
Copy the code

Let and const have no variable promotion

console.log(name) // Uncaught ReferenceError: name is not defined
let name = '阿林'
Copy the code
console.log(name) // Uncaught ReferenceError: name is not defined
const name = '阿林'
Copy the code

Temporary dead zone

  • Var does not have temporary dead zones
  • Let and const have a temporary dead zone that can’t be retrieved or used until the line of code that declared the variable appears
console.log(name) // undefined
var name = '阿林'
Copy the code
console.log(name) // Uncaught ReferenceError: name is not defined
let name = '阿林'
Copy the code
console.log(name) // Uncaught ReferenceError: name is not defined
const name = '阿林'
Copy the code

Block-level scope

  • Var has no block-level scope
  • Let and const have block-level scope
if (true) {
  var name = '阿林'
}
console.log(name) // 'alim'
Copy the code
if (true) {
  let name = '阿林'
}
console.log(name) // Uncaught ReferenceError: name is not defined
Copy the code
if (true) {
  const name = '阿林'
}
console.log(name) // Uncaught ReferenceError: name is not defined
Copy the code

Repeat statement

  • Var allows repeated declarations, with the last one overwriting the first
  • Let and const do not allow duplicate declarations
var name = 'lin'
var name = '阿林'

console.log(name) // 'alin' is repeated, and the last one overwrites the first one
Copy the code
let name = 'lin'
let name = '阿林' // Identifier 'name' has already been declared
Copy the code
const name = 'lin'
const name = '阿林' // Identifier 'name' has already been declared
Copy the code

Modify declared variables

  • Var and let can modify declared variables

  • Const declares a read-only constant. Once declared, the value of a constant cannot be changed

var name = 'lin'
name = '阿林'

console.log(name) // 'alim'
Copy the code
let name = 'lin'
name = '阿林'

console.log(name) // 'alim'
Copy the code
const name = 'lin'
name = '阿林' // Uncaught TypeError: Assignment to constant variable.
Copy the code

Best practices

  • Can be usedconstUse as much as possibleconst
  • The declared variable is to be modified with thelet
  • Do not usevar

At the end

If my article is helpful to you, your 👍 is my biggest support ^_^

I’m Allyn, export insight technology, goodbye!

The last:

“Front-end Daily Question (20)” talks about scope, scope chain, and lexical scope in JS