[ES6] 03. The let keyword -- 1

var message = "Hi";
{
   var message = "Bye";
}

console.log(message); 

//Bye

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

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.

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();
});

//10
//10
...
//10

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();
});

//0
//1
...
//9

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.

时间: 2024-12-28 10:48:08

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

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

In ES6, IIFE is not necessary: // IIFE写法 (function () { var tmp = ...; ... }()); // 块级作用域写法 { let tmp = ...; ... } 另外,ES6也规定,函数本身的作用域,在其所在的块级作用域之内. function f() { console.log('I am outside!'); } (function () { if(false) { // 重复声明一次函数f function f() {

[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 defined. b //1 Case 2: Let has no "Hosting" Problem function do_something() { console.log(foo); // ReferenceError let foo = 2; } function do_someth

ES6 Syntax and Feature Overview(待续)

View on GitHub Note: A commonly accepted practice is to use const except in cases of loops and reassignment. However, in this resource I'll be using let in place of var for all ES6 examples. Variable: x Object: obj Array: arr Function: func Parameter

ES6中的数组

数组是js中很重要的数据类型,虽然在 ES5 中,关于数组的方法和属性很多.但为了更加简洁.高效的操作数组,ES6 中又在数组原型上和实例上新增了一些方法. 一.Array方法 1.1 Array.from() js中存在很多类似数组的对象,比如说 获取的一组DOM元素,比如说 函数的参数. 它们有着类似数组的属性,比如说键值对,或者 length 属性,但它们并不能使用数组里的方法. 要把一个类似数组的对象转换成一个真正的数组有时候可能很麻烦,就拿 函数的参数 来说,你需要通过如下方式: fu

实验一 词法分析程序实验

实验一.词法分析程序实验 商业软件工程   蓝海鹏  201506110171 一.        实验目的        编制一个词法分析程序. 二.        实验内容和要求 实验内容: 对字符串表示的源程序 从左到右进行扫描和分解 根据词法规则: 单词符号 种别码 单词符号 种别码 begin 1 : 17 if 2 := 18 then 3 < 20 while 4 <= 21 do 5 <> 22 end 6 > 23 l(l|d)*(标识符) 10 >=

2020前端面试汇总

?01 前言 工作了这么久,一直没有自己的一个技术知识沉淀,这一次去找了很多前端面试题,再加上自己的工作经验,进行一次汇总,强烈要求自己掌握以下内容,不仅要知其然,还要知其所以然.让自己以后在面试或者工作中做到"心中有佛,不虚场合". 02 目录 下面是这篇文章的目录结构,一般比较简单的问题我就一笔带过了,主要是分享一下比较有难度的知识点,答案来自网上,如果有版权问题我会删除.还有本文只是给出一个大概的知识点,如果想要深入学习还要靠自己去查一下哦! 如果答案有错误,欢迎指正! 计算机基

[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 are constructor and super. Both of these are specific to the class keyword and make working with classes manageable. Both are utilized when the new ke

初级前端自学react-native,必备知识点(ES6+ReactJS+flexbox)

我们在学会搭建react-native环境之后,打开项目根目录,看到很多个文件,但是最起眼的应该就是那俩js兄弟文件了 我们一看那名字就知道,我们接下来的任务就是要弄它们: 我们用编辑器打开项目根目录下的index.android.js文件,可以看到有这么个东西: 那么我们先测试一下,在手机上跑起来.不知道大家还记不记得步骤: 第一步:在项目根目录下打开两个git bash.第一个输入:react-native start        这一步是在启用服务器 第二步:在第一步成功之后,连接手机,

CocosCreator手记03——简单配置VSCode的TypeScript环境

对于基于JavaScript的各种语言,我用过Coffee.但是印象中,除了遍地语法糖,写起来比较快.也没有觉得特别好用. 而TypeScript可谓一门语言,其主要特性有: 兼容 ECMAScript 2015(ES6)规范,可选择编译成ES6或ES5规范的JavaScript代码(ECMAScript 3及以上版本): 面向对象,并拥有一些函数式特性: 类型语言: 实现了注解.泛型等特性: 适配大型App构建. 这些特性,对于曾经使用过强类型语言的开发者,并且对于重构,代码提示有大量需求的团