Front-End Interview questions: The difference between let and Var in JS

Recently many front-end friends to interview was asked to the difference between let and Var, in fact, Nanyi Teacher's ES6 has been very detailed introduction let of the use and var the difference. Let me summarize it briefly so that you can use it later in your interview.

ES6 has added a let command to declare local variables. It is used in a similar way var , but the declared variable is let valid only within the code block where the command resides, and has a temporary dead-zone constraint.

First look at a var common variable to improve the interview topic:

Topic1:var a = 99;                   //global variable AF (); //f is a function, although defined after the call, but the function declaration is promoted to the top of the scope. console.log (a); //a=>99, at this time is the global variable Afunction f (console.log (a); //Current A variable is the following variable a declaration promoted, the default value undefined var a = 10; Span class= "hljs-built_in" >console.log (a); //a = 10} //output result: undefined1099              

If the above topics have difficult to understand children's shoes, please system to look at the old horse free JS Advanced video tutorial.

ES6 can define block-level scope variables with let

Before ES6, we used VAR to declare variables, and JS only function scope and global scope, there is no block-level scope, so we can not {} limit the scope of VAR declaration variable access.
For example:

{   var i = 9;} console.log(i);  // 9

ES6 adds a let variable that can declare a block-level scope.

{   let i = 9;     // i变量只在 花括号内有效！！！} console.log(i);  // Uncaught ReferenceError: i is not defined

Unique application of let with For loop

letIdeal for for block-level scopes within a loop. JS in the For loop body is very special, each execution is a completely new independent block scope, with let declared variables passed into the scope of the For loop body, will not change, unaffected by the outside world. See a common interview topic:

for (var i = 0; i <10; i++) {    setTimeout(function() { // 同步注册回调函数到 异步的 宏任务队列。 console.log(i); // 执行此代码时，同步代码for循环已经执行完成 }, 0);}// 输出结果10 共10个// 这里面的知识点： JS的事件循环机制，setTimeout的机制等

If the change is made to a var let statement:

//I although declared in the global scope, However, when used in the local scope of the For loop body, the variable is fixed and is not disturbed by the outside world. for (let i = 0; i < 10; i++) {setTimeout (function (console.log (i); //i is the local scope of the circulating body, unaffected by the outside world. }, 0);} //output result: 0 1 2 3 4 5 Span class= "Hljs-number" >6 7 8 9  

Let does not have variable elevation and temporary dead zone

With let declared variables, there is no elevation of the variable. And the requirement must wait for the let declaration statement to be executed before the variable can be used, otherwise it will report an Uncaught ReferenceError error.
For example:

console.log(aicoder);    // 错误：Uncaught ReferenceError ...let aicoder = ‘aicoder.com‘;// 这里就可以安全使用aicoder

ES6 explicitly states that if a let and a const command exists in a chunk, the variables declared by the block on those commands form a closed scope from the outset. If you use these variables before the declaration, you will get an error.
In summary, the variable is not available within the code block until the variable is declared with the Let command. This is syntactically called a "temporary Dead zone" (Temporal Dead Zone, abbreviated as TDZ).

Let variables cannot be declared repeatedly

Let does not allow the same variable to be declared repeatedly within the same scope. otherwise error:Uncaught SyntaxError: Identifier ‘XXX‘ has already been declared

For example:

let a = 0;let a = ‘sss‘;// Uncaught SyntaxError: Identifier ‘a‘ has already been declared

Summarize

ES6 Let JS really have a block-level scope, but also to this more secure and more standardized road, although a lot of constraints, but all to make us more secure to use and write code.

By the way, the old horse is currently focused on doing offline it full-stack internship, not 8000 employment is not also the internship fee, if necessary, please pay attention to: aicoder.com

Old horse recorded free online video tutorial: qtxh.ke.qq.com

Front-End Interview questions: The difference between let and Var in JS