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. 图形管线之旅 Part4

    原文:<A trip through the Graphics Pipeline 2011> 翻译:往昔之剑   转载请注明出处   欢迎回来.上个部分是关于vertex shader的, ...

  2. [HNOI2012]集合选数 --- 状压DP

    [HNOI2012]集合选数 题目描述 <集合论与图论>这门课程有一道作业题,要求同学们求出\({1,2,3,4,5}\)的所有满足以 下条件的子集:若 x 在该子集中,则 2x 和 3x ...

  3. HDU 2157 How many ways?? (邻接矩阵快速幂)

    http://acm.hdu.edu.cn/showproblem.php?pid=2157 题意 : 给定一个有向图,问从A点恰好走k步(允许重复经过边)到达B点的方案数mod p的值   从这道题 ...

  4. Android Studio 2.3更换默认的ConstraintLayout布局

    首先打开你的Android Sudio安装目录,我的为D:\Program Files\Android\Android Studio,进入到以下文件夹\plugins\android\lib\temp ...

  5. 清北学堂学习总结 day2 字符串 练习

    1.hash表(哈希表) codevs 2147 数星星--简单哈希  时间限制: 3 s  空间限制: 64000 KB  题目等级 : 钻石 Diamond 题目描述 Description 小明 ...

  6. Loj10172 涂抹果酱

    题目描述 Tyvj 两周年庆典要到了,Sam 想为 Tyvj 做一个大蛋糕.蛋糕俯视图是一个 N×M 的矩形,它被划分成 N×M 个边长为 1×1 的小正方形区域(可以把蛋糕当成 NNN 行 MMM列 ...

  7. 在centos6.0上通过nginx远程执行shell

    nginx本身不支持直接调用shell脚本,我们可以通过安装fastcgi程序,让nginx把调用shell的http请求交给fastcgi程序去处理,然后nginx 再将结果返回给用户方式间接调用s ...

  8. csv文件导入到mysql

    如何将csv文件导入到mysql数据库呢,方法有很多但最简单粗暴的方法还是用sql语句啦,像下面这样. LOAD DATA LOCAL INFILE 'csv文件路径' INTO TABLE 数据表名 ...

  9. Linux下swap分区多大才合适的问题探讨

    说明: 1.这个话题在每个Linux发行版中都各不相同,且在当下内存硬盘的时代下,再组个磁盘阵列之后速度相当. 2.我觉得硬盘大的情况下,有多大搞多大,我只要控制内存的使用率在99%时才使用swap, ...

  10. MAMP PRO 下安装 memcache

    本人PHP用的是 5.5.10,编译 memcache 模块需要用到 php 源码,mamp 不自带,到 php 官网下一个 php-5.5.11.tar.gz, 解压后,生成 zend_config ...