Wechat pay attention to [front-end thinking framework], reply: “Little Red Book 4th edition”, get the electronic version of “JavaScript Advanced Programming (4th Edition Chinese)”!

It is recommended to buy legitimate books

As we all know, there are three keywords in Javascript that can declare variables: var, let, and const.

Var is available in all versions of ECMAScript, while const and let are available only in ECMAScript6 and later.

So what are the similarities and differences between these three keywords and matters needing attention?

Let’s look at it from two perspectives:

1. Where is the scope of the variable?

The function body is the function scope, and any {} contains a block-level scope

  • varDeclared variables inFunction scopeSo only variables declared in functions are local variables. Variables declared in code blocks are still global variables.
function test() {
  var message = 'hi';   // the function is declared as a local variable and cannot be referenced outside the function
  console.log(message)  // 'hi'
}
console.log(message)  / / an error
Copy the code
if(true) {var message = 'hi';   // declared in the code block as a global variable that can be referenced anywhere
  console.log(message)  // 'hi'
}
console.log(message)  // 'hi'
Copy the code
  • let 和 constDeclared variables inBlock-level scopeIs only referenced in the current code block.
function test(){
  let message = 'hi'; // The function block is declared, the function can not be referenced outside the body
  const message1 = 'hello';  // The function block is declared, the function can not be referenced outside the body
  console.log(message)  // 'hi'
  console.log(message1)  // 'hello'
}
console.log(message)  / / an error
console.log(message1)  / / an error
Copy the code
if(true) {let message = 'hi';   // It is declared in the code block, but cannot be referenced outside the code block
  const message1 = 'hello';  // It is declared in the code block, but cannot be referenced outside the code block
  console.log(message)  // 'hi'
  console.log(message1)  // 'hello'
}
console.log(message)  / / an error
console.log(message1)  / / an error
Copy the code

Because ECMAScript variables are loosely typed and can be defined without keywords,

function test(){
  message = 'hi';
}
console.log(message);  // message = window.message = 'hi'
Copy the code

Special attention should be paid to:

1. For the maintainability of the code, it is not recommended to directly define variables by omitting keywords;

2. In strict mode, the method of directly defining variables without keywords is not supported;

Var can be repeated. Let and const cannot be repeated.

4. In a global scope, variables declared by var become properties of window objects. Let and const do not.

Window.message = ‘hi’; window.message = ‘hi’;

2. Is there any variable promotion?

A variable in Javascript is a loose type. The characteristic of a loosely typed variable is that it does not need to specify the type of the variable when defining it, and the type of the data can be changed at random during the running of the variable. However, this feature does not mean that Javascript variables have no type. Javascript variables are also typed when their types are determined.

  • varDeclared variables are automatically promoted to the top of the function scope;
var message = 'hi';
function test(){
  console.log(message);   // undefined
  var message = 'hello';
}
test();  
Copy the code

Is the result confusing? Why print undefined instead of ‘hi’?

Because the code is interpreted as:

var message = 'hi';
function test(){
	var message;    // Automatically promoted to the top of the function scope, declared first
  console.log(message);  
  message = 'hello';  // reassign;
}
test();   / / output is undefined
Copy the code

After the code is parsed, the variable “Message” in the local scope of the function is redefined, and the scope of “Message” is also defined during preloading. The message variable is no longer a global variable, but a function variable. It’s just that assignment is done at run time (which is why Javascript changes the type of a variable at run time, because assignment is done at run time), so when we use the message variable, the message variable is not assigned in the local scope, just the stack identifier, So it’s going to be undefined

  • Variables declared by let will not be promoted.

  • A variable declared by const, which must be initialized at the same time and cannot be modified, will not be promoted.

    Note: The unmodifiable limit of a const declaration applies only to references to the variable to which it points. If the variable is an object, it is legal to modify properties inside the object.

    The following code is fine

    const message = {};
message.type = 'error' 
Copy the code

Summary (Best Practices)

  • Do not usevar
  • constGive priority to,letsecond
  • To add properties to window, use window[‘ properties ‘] = property value directly

Resources: JavaScript Advanced Programming (Chinese version 4)