var message = "Hi";
{
var message = "Bye";
} console.log(message); //Bye

The message inside the block still has impact on the outside.

Just remember that something like for, while if ... block, they don't create new scope. function block do create new scope!

If you add function around the inside message:

var message = "Hi";

function greeting(){
var message = "Bye";
} console.log(message); //Hi

Then "Bye" message has no impact on the "Hi" message.

But if create something like "for", "while" loop and if block, you will still get the "Bye";

Let


To help with this problem, we do have LET in ES6, which will allow me to use block scoping.

let message = "Hi";
{
let message = "Bye";
} console.log(message); //Hi

This "Bye" message, because it's inside of a block, even though it's not inside of a function, has no impact on the assignment of this message. They are two separate and different entities.

So we con consider that "let" keyword will create a new scope in the current block!

Let in For Loop:


Recall one problem code:

var fs = [];

for(var i = 0; i < 10; i++){
fs.push(function(i){
console.log(i)
});
} fs.forEach(function(f){
f();
}); //
//
...
//

The output will be 10 all the time.

If we swtich var to let:

var fs = [];

for(let i = 0; i < 10; i++){
fs.push(function(i){
console.log(i)
});
} fs.forEach(function(f){
f();
}); //
//
...
//

Then the output is 0-9. The reason for that is because, let keyword each time it create a new instance in for loop.

What this really means in the end is that if you're used to bringing your variables up to the top of a scope using VAR and things like VAR i, VAR temp, where you want to be careful, because you're afraid of wasting behaviors due to this i.

function varFun(){

    var previous = 0;
var current = 1;
var i;
var temp; for(i = 0; i < 10; i++){
temp = previous;
previous = current;
current = temp + current;
}
} function letFun(){ let previous = 0;
let current = 1; for(let i = 0; i < 10; i++){
let temp = previous;
previous= current;
current = temp + current;
}
}

Feel free now to use the LET keyword, and instead of declaring it at the top, you can declare it in line, inside of the FOR statement, as well as declaring it inside of the FOR block, and it'll safely create this temp each time it goes through the FOR block.

Using let instead of var prevents variable declarations from being moved to the top of the scope on what is known as hositing.

[ES6] 03. The let keyword -- 1的更多相关文章

  1. [ES6] 05. The leg keyword -- 3. Block Scope

    In ES6, IIFE is not necessary: // IIFE写法 (function () { var tmp = ...; ... }()); // 块级作用域写法 { let tm ...

  2. [ES6] 04. The let keyword -- 2 Fiald case

    Fiald case 1: let can work in it's block { let a = 10; var b = 1; } a // ReferenceError: a is not de ...

  3. ES6 Syntax and Feature Overview

    View on GitHub Note: A commonly accepted practice is to use const except in cases of loops and reass ...

  4. ES6中的数组

    数组是js中很重要的数据类型,虽然在 ES5 中,关于数组的方法和属性很多.但为了更加简洁.高效的操作数组,ES6 中又在数组原型上和实例上新增了一些方法. 一.Array方法 1.1 Array.f ...

  5. [Javascript] ES6 Class Constructors and the Super Keyword

    When the ES6 class shipped back in 2015, a number of additional keywords came with it. Two of these ...

  6. 【JS复习笔记】03 继承(从ES5到ES6)

    前言 很久以前学习<Javascript语言精粹>时,写过一个关于js的系列学习笔记. 最近又跟别人讲什么原型和继承什么的,发现这些记忆有些模糊了,然后回头看自己这篇文章,觉得几年前的学习 ...

  7. [ES6系列-03]ES6中关于参数相关特性详解(参数默认值与参数解构赋值与剩余参数)

    [原创] 码路工人 大家好,这里是码路工人有力量,我是码路工人,你们是力量. 今天总结一下 ES6 中跟参数相关的内容. 欢迎补充斧正.留言交流. 让我们互相学习一起进步. 1. ES6 参数默认值( ...

  8. 03 | 变量的解构赋值 | es6

    变量的解构赋值 数组的解构赋值 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前,为变量赋值,只能直接指定值. let a ...

  9. [Javascript] Understand common misconceptions about ES6's const keyword

    Values assigned with let and const are seen everywhere in JavaScript. It's become common to hear the ...

随机推荐

  1. python3 怎么爬取新闻网站?

    先开个坑,以后再填吧....... import requests from bs4 import BeautifulSoup def content(url): text = requests.ge ...

  2. Java反射机制Reflection

    Java反射机制 1 .class文件 2 Class类 3 Class类与反射机制 4 Java反射机制的类库支持及简介 5 反射机制的定义与应用 6 反射机制Demo Java反射机制demo(一 ...

  3. JSP与Servlet传值及对比

    JSP是Servlet技术的扩展,本质上是Servlet的简易方式,更强调应用的外表表达. JSP编译后是”类servlet”. Servlet和JSP最主要的不同点在于,Servlet的应用逻辑是在 ...

  4. python tesseract 识别图片中的文字的乱码问题(ubuntu系统下)

    OCR(Optical Character Recognition):光学字符识别,是指对图片文件中的文字进行分析识别,获取的过程. 首先,需要安装 tesseract-ocr(tesseract O ...

  5. 范浩强treap 普通平衡树

    增加Split(分裂),Merge(合并)操作,非常好写,时间也不比普通treap慢什么. #include<bits/stdc++.h> using namespace std; str ...

  6. [转] Eclipse的Tomcat插件安装

      Eclipse的Tomcat服务器插件tomcatPlugin是由Sysdeo公司开发的,其下载地址是:http://www.eclipsetotale.com/tomcatPlugin.html ...

  7. 更新teaching中fdSubjectID为null的老数据

    UPDATE wkwke.tbTeachingV3 teaching SET teaching.fdSubjectID = (                    SELECT fdValue FR ...

  8. ExtJs 3 自定义combotree

    ExtJs 3 自定义combotree /** * 自定义下拉树,支持初始化值时自动定位树节点. * 还没有考虑性能问题.继承自Ext.form.ComboBox也很浪费. * 代码中的cu.get ...

  9. Cortex-M3 and Cortex-M4 Memory Organization

    http://www.mikroe.com/download/eng/documents/compilers/mikropascal/pro/arm/help/memory_organization. ...

  10. kernel-release为 2.6.35-32-generic 详解

    linux distribution通常会在这三个版本号后加入后缀,用以描述其他信息,以我的Unbuntu 10.10为例: kernel-release为 2.6.35-32-generic(有的为 ...