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. Python数据类型-集合(set)

    1.创建集合 集合的创建不同于前两种数据结构. 集合通过set(iterable)方法创建,参数iterable为可迭代对象. 示例代码: s1 = set('好好学习天天想上') # 将字符串分解为 ...

  2. Lock接口简介

    在Java多线程编程中,我们经常使用synchronized关键字来实现同步,控制多线程对变量的访问,来避免并发问题. 但是有的时候,synchronized关键字会显得过于沉重,不够灵活.synch ...

  3. Linux下burg引导

    用得比较久了,比grub顺手: 安装: sudo add-apt-repository ppa:n-muench/burg; sudo apt-get update; sudo apt-get ins ...

  4. [POJ1625]Censored!(AC自动机+DP+高精度)

    Censored! Time Limit: 5000MS   Memory Limit: 10000K Total Submissions: 10824   Accepted: 2966 Descri ...

  5. 快速排序-C

    #include <stdio.h> #include <stdlib.h> #define N 6 int partition(int arr[], int low, int ...

  6. AOP 面向切面 记录请求接口的日志

    AOP为Aspect Oriented Programming的缩写,意为:面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术.AOP是OOP的延续,是软件开发中的一个热点, ...

  7. python开发_textwrap文本样式

    在看python的API的时候,发现python的textwrap在处理字符串样式的时候功能强大 在这里我做了一个demo: textwrap提供了一些方法: wrap(text, width = 7 ...

  8. HDU 5292 Pocket Cube 结论题

    Pocket Cube 题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=5292 Description Pocket Cube is the 2×2× ...

  9. Codeforces Round #301 (Div. 2) B. School Marks 构造/贪心

    B. School Marks Time Limit: 1 Sec  Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/540/probl ...

  10. JQ 数组动态添值,对象动态添值,判断数组/对象是否为空

    1.数组动态添值 首先声明一个空数组:var data = new Array(); 向数组中添值 :data.push('添加的值'); 示例: