Let is much more secure than var.

  • 译 文: Why You Shouldn’t Use ‘var’ Anymore
  • Translator: Fundebug

To ensure readability, free translation rather than literal translation is used in this paper.

I’ve been writing JavaScript programs using ES2015(ES6) syntax for a long time, and love the elegance and simplicity of the new features it offers. What I’m most comfortable with is not using var, but let/const. I took it for granted that LET was just a substitute for VAR, but in fact let provides us with a much finer scope.

Most of the time I use variables declared as const, because if I try to modify a variable declared as const, I get an error. This avoids accidentally changing a constant value that shouldn’t be changed. However, we still need variables that can be declared that can be changed, such as counters in loops, which need to be incremented by one over and over again. But why do we use let instead of var?

The simplest answer is that let provides block-scoping, which provides more fine-grained control than the function-scoping provided by var. To help you understand, let me use a classic front-end engineer interview question to describe the difference.

Problem: In the following example, say what the console prints.

var callbacks = [];
(function() {
  for (var i = 0; i < 5; i++) {
    callbacks.push( function() { returni; }); }}) ();console.log(callbacks.map( function(cb) { returncb(); }));Copy the code

We execute the for loop five times, each time pushing a function into the Callbacks array. Finally, the results of each function in the Callbacks array are printed. A novice engineer may answer [0, 1, 2, 3, 4] after careful consideration, but fall into the JavaScript “reactor-based trap.”

Only when you understand the reactive power can you give the correct answer [5, 5, 5, 5, 5].

var callbacks = [];
(function() {
  var i;
  for (i = 0; i < 5; i++) {
    callbacks.push( function() { returni; }); }}) ();console.log(callbacks.map( function(cb) { returncb(); }));Copy the code

Note the code above. JavaScript pushes the variable to the top of the function definition. Through the entire for loop, the 5 functions stored in the Callbacks point to the same variable I with a value of 5. So the final printed value is 5.

Where previously we had to solve this problem with a variety of quirks and successfully return [0, 1, 2, 3, 4], we now have a let that can easily solve the problem:

var callbacks = [];
(function() {
  for (let i = 0; i < 5; i++) {
    callbacks.push( function() { returni; }); }}) ();console.log(callbacks.map( function(cb) { returncb(); }));Copy the code

Because let has block scope, the variable I declared using let is not promoted to the top of the function. The scope of I is in the for loop, which has a separate value for each loop.

Should we stop using var? Var is useful if you want a variable to have function scope.

Two questions from readers:

  • A variable declared by const is not completely immutable. Such as:

    const myNotQuiteImmutableObject = {
  thisCanBeChanged: "not immutable"
};
myNotQuiteImmutableObject.thisCanBeChanged = "see I changed it.";
Copy the code

    However, using const declarations prevents some basic changes, such as:

    const immutableString = "you can't change me";
immutableString = "D'OH!"; // error
Copy the code

    If you want to be completely Immutable, use the Immutable library provided by Facebook.

  • Older browsers do not support lets. Not only that, but some of the latest browsers do not yet support LET. We can avoid this problem by using Babel, which allows you to take all the latest JavaScript features and then translate them into code that even IE8 can support.

About Fundebug

Fundebug focuses on JavaScript, wechat applets, wechat mini games, Alipay applets, React Native, Node.js and Java real-time BUG monitoring. Since its launch on November 11, 2016, Fundebug has handled more than 600 million error events in total, which has been recognized by many well-known users such as Google, 360 and Kingsoft software. Welcome free trial!

Copyright statement

Reprint please indicate the author Fundebug and this article addresses: blog.fundebug.com/2017/05/04/…