Shulou(Shulou.com)06/03 Report--

This article mainly introduces what are the differences between var and let in javascript, which can be used for reference by interested friends. I hope you can learn a lot after reading this article.

Differences: 1, var has variable promotion, but let does not; 2, let does not allow repeated declarations under the same scope, but var allows; 3, let has no temporary dead zone problem; 4, the global variable created by let does not set the corresponding attribute to window; 5, let will generate block-level scope, var will not.

The operating environment of this tutorial: windows7 system, javascript1.8.5 version, Dell G3 computer.

If you want to understand the difference between var (ES5) and let (ES6), you must first understand the variable promotion of JS under ES5

1. Variable improvement (sound)

When the browser opened up stack memory for code execution, the code did not execute immediately from top to bottom, but continued to do something: advance declaration and definition of all var/function keywords in the current scope = > variable promotion mechanism

Those with var only declare (declare) var an in advance. If you only declare that there is no assignment, the default is undefined.

For example:

Console.log (a); var a = 13

Output: undefined

Equivalent to:

Var a; / / only states that there is no assignment, defaults to undefinedconsole.log (a); a = 13

Function not only declares, but also defines (defined), to be exact, to associate a variable with a value.

II. The difference between let and var

1. There is no variable promotion mechanism in let and const.

There are six ways to create variables: var/function has variable promotion, but let/const/class/import does not have this mechanism.

2. Repeated declarations are allowed in var, but not in let.

In the same scope (or execution context)

If you use the var/function keyword to declare a variable and repeat it, it will not matter (after the first declaration, it will not be repeated if you encounter it later)

But not with let/const. The browser will check whether this variable already exists in the current scope. If it already exists, it will report an error if it is re-declared based on let, etc.

Before the browser opens the stack for code to be executed from top to bottom, there are not only variable promotion operations, but also many other operations = > "lexical parsing" or "lexical detection": it is to detect whether the current code to be executed will have a "syntax error SyntaxError". If an error occurs, the code will not be executed (the first line will not be executed).

Console.log (1) / / = > this line of code will not be executed let a = 12console.log (a) let a = 13 / / = > this line makes an error: SyntaxError: Identifier 'a'has already been declaredconsole.log (a)

The so-called repetition is: no matter what method was used before, as long as the variable exists in the current stack memory, we use let/const and other repetitions to declare that the variable is a syntax error. Eg:

Console.log (a) var a = 12let a = 13 / / = > SyntaxError: Identifier 'a'has already been declaredconsole.log (a) console.log (a) let a = 13var a = 12 / / = > SyntaxError: Identifier 'a'has already been declaredconsole.log (a)

3. Let can solve the problem of temporary dead zone in typeof testing (let is more stringent than var)

Console.log (a) / / = > ReferenceError: an is not defined

Typeof a did not report an error

Console.log (typeof a) / / = > 'undefined' this is the bug of the browser and should have reported an error because there is no a (temporary dead zone)

After using let:

Console.log (typeof a) / / = > ReferenceError: Cannot access 'a'before initializationlet a

Return cannot be used before an is defined to solve the temporary dead zone problem.

4. The global variable created by let does not set the corresponding property for window.

First of all, let's see the difference between creating global variables with and without var.

/ * * without var: equivalent to setting a property a * window.a = 13 * / a = 13console.log (a) / / = > window.a 13 * * stack memory variable storage space * b * with var: a variable b (global variable) is declared in the global scope * but a variable declared globally is also equivalent to adding a corresponding * attribute b (only global scope has this feature) to the global object window * / var b = 14console.log (b) console.log (window.b)

When creating with let:

/ * * Stack memory variable storage space * c * with let: only one variable b (global variable) is declared in the global scope, * the corresponding attribute c * / let c = 15console.log (c) / = > 15console.log (window.c) / / = > undefined is not added to the global object window.

5. Let will produce block-level scope

Can the following code make it possible to click a button and change the background color of body to the corresponding color of the button? if not, how to improve it (Tencent)

* {margin: 0; padding: 0;} html, body {height: 100%; overflow: hidden;} button {padding: 5px 10px; cursor: pointer;} red, green and blue var body = document.querySelector ('body'), buttons = document.querySelectorAll (' button'), arr = [red', 'green',' blue'] for (var I = 0; I < buttons.length) Body.style.background +) {uploons.onclick = function () {body.style.background = arr [I]}}

The answer is, of course, no, because the variable defined by var, the I in the for loop is global, and after three loops, I click 3, because clicking each is equivalent to clicking the last one.

Thank you for reading this article carefully. I hope the article "what is the difference between var and let in javascript" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.