30秒学会 JavaScript 片段 – What are the differences between var, let and const in JavaScript?

JavaScript has three variable declaration statements: var, let and const. The latter two were added in ES6, whereas var existed since previous versions. One of the first things to notice is that const defines constants (i.e. values that will not be reassigned), whereas var and let define variables. Yet, var behaves differently from both let and const in various other ways.

Scope

Variables declared with var are function scoped, in contrast to variables declared with let or const which are block scoped.

代码实现

const scopeExample = () => {
  var a = 'var';
  let b = 'let';
  console.log(a, b); // 'var', 'let'

  {
    var c = 'var';
    let d = 'let';
    console.log(c, d); // 'var', 'let'
  }

  console.log(c); // 'var'
  console.log(d); // Throws a ReferenceError
};

If you want to learn more, we have an article covering JavaScript variables and scopes in more depth.

Hoisting

While variables declared with var are hoisted to the enclosing scope, variables declared with let or const are not initialized until their definition is evaluated.

使用样例

const hoistingExample = () => {
  console.log(a); // undefined
  var a = 'var';
  console.log(a); // 'var'

  console.log(b); // ReferenceError
  let b = 'let';
  console.log(b); // 'let'
};

If you want to learn more, we have an article covering JavaScript hoisting in more depth.

Global object property

At the top level, variables declared with var, unlike ones declared with let or const, create a property on the global object.

var a = 'var';
let b = 'let';

console.log(window.a); // 'var'
console.log(window.b); // undefined

Redeclaration

In strict mode, variables declared with var can be re-declared in the same scope, whereas this is not allowed for variables declared with let or const.

'use strict';
var a = 'var1';
var a = 'var2';

let b = 'let1';
let b = 'let2'; // SyntaxError

If you want to learn more, we have an article covering JavaScript’s strict mode in more depth.

翻译自：https://www.30secondsofcode.org/js/s/var-let-const