ES6 new syntax of let and const (one)

时间:2022-09-13 14:04:49

variable declarations : let, const,and block scope

why we redefine the way about declarations?

function scope

var price = 10;  //global declaration

function showPrice(){
var price = 12; //local declaration using var
console.log(price); //12
}
showPrice(); console.log(price); //10

The next we can use IIFE to check var variable;

var price = 10;
(function(){
var price = 12;
console.log(price); //12
})();
console.log(price); //10

IIFE: Immediately Invoked Function Expression,意为立即调用的函数表达式,也就是说,声明函数的同时立即调用这个函数。

How to change the scope of var variable?

var price = 10;
if(price){
price = 12;
console.log(price);
}
console.log(price);

The examples demonstrates _ of var.

The example make me confusing.

var price = 10;

function showPrice(){
var price = 12;
console.log('price',price);
} showPrice();
console.log('showPrice',showPrice());
console.log(price);

the resule is

price 12

price 12

showPrice undefined

10

why have two price?

we add block scope like let and const to solve the problems.

what is block scope?

block scoping means that new scope is created between a pair of { }.

let nbr = 12;
{
let nbr = 40;
}
console.log(nbr)

1.var is bound to function scope

2.let and const are block scope

How to install preview about markdown in sublime?

1.we can use package install to install our plugins

.first use keyboard open the package istall

command+shift+p

IIFE

var price = 12;
if(price){
var price = 10;
console.log(price);
}
console.log(price);

IIFE tell us that the var declarations are bound to the function scope and does not create block scope.

var is bound to function scope, let and const are block scope.

let value = 42;
{
let value = 1000;
}
console.log(value);

let varible only read in the block scope.

const

const declarations is a immutable varible.

const value  = 50;
console.log(value); value = 1000;
const value  = 50;
console.log(value); let value = 1000;

varible hoisting

console.log(host);
var host = 89;

In my heart,it may be console 89;Actualy it is undefiend;

beacuse it is become next code in our browser

var host;
console.log(host);
var host = 89;

If you use let to declate a varible,it is err:

console.log(host);
let host =100;

I'm confusing!

TDZ(Temporal Dead Zone)

You are accessing a varible that's been declared but not yet initialized.

let data = true;
if(true){
console.log(data);
let data;
}
console.log(data);

It's print the value

undefiend

true;

But in the book ,author told me that print

ReferenceError

true

let data = true;
if(true){ //Enter new scope,TDZ starts
//uninitialized bindling for data is created
console.log(data); //ReferenceError
let data;//TDZ ends,'data' is initialized with undefined
}
console.log(data); //true

TDZs helps us ensure that a variable in runtime always have correct value.

if(ture){
console.log(typeof anUndeclaredVariable);
console.log(typeof nrandom); let random;
}

It is a good practice to always make varible declarations at the top of your scope.

This check is also useful for conditionally creating global varibles using var.

You can check if a global variable exsits by doing something like this:

if(typeof globalVariable === 'undefined'){
var globalVariable = {...};
}

const in object

You can add a property to object of const declaration but you cannot assign

a different value to object.

const obj = {};
obj.key = 42;
console.log(obj.key); obj = {};

sure,if you really want to you could make the value itself immutable by freezing it.

const obj = Object.freeze({});
obj.key = 42;
console.log(obj);

Object.freeze() is shallow.

ES6 new syntax of let and const (one)的更多相关文章

  1. JavaScript学习系列5 ---ES6中的var, let 和const

    我们都知道JavaScript中的var,在本系列的 JavaScript学习系列2一JavaScript中的变量作用域 中,我们详细阐述了var声明的变量的作用域 文章中提到,JavaScript中 ...

  2. ES6中不得不说的关键字const

    上一节讲了let关键字,它是用来声明一个变量,只在块级作用域起作用.这一节我们来学习ES6新增的另一个关键字const. const 的作用 const是constant(常量)的缩写,const和 ...

  3. es6学习笔记1 --let以及const

    let语句的基本用法:  1.let声明的变量为块级作用域,只在最近的{}里面有效,如果在外部引用就会报错. { let a = 10; var b = "hello" } ale ...

  4. ES6新特性:let和const的使用

    (声明, 本文的所有代码均在node的最新稳定版本v4.4.3中执行的, 如果在浏览器中执行请把JS的运行环境提升为ES6) 以前一直用var定义变量, 现在有了两种新的定义变量的方式, 1: let ...

  5. es6重点笔记:let,const

    一,let 先看代码: var a = []; for (var i = 0; i < 10; i++) { a[i] = function () { console.log(i) }; } a ...

  6. ES6系列之变量声明let const

    ES6也出来好久了,最近闲来无事就想着吧es6做一个系统的总结,巩固自己的知识,丰富一下博客. 为什么叫ES6 实际上是ECMA的一个打的标准,这个标准是在2015年6月发布的,正式的名字实际是es2 ...

  7. ES6中声明变量 let和const特点

    在ES6中我们有两种定义变量的方式:let    const let特点: 1.let定义时不会进行变量声明提升 2.变量不允许被重复定义 3.变量不可以被删除 4.在for循环当中用let定义i 循 ...

  8. es6 入坑笔记&lpar;一&rpar;---let&comma;const&comma;解构,字符串模板

    let  全面取代var 大概相似于C++的定义,一个变量必须得先定义后使用,没有预编译 注意let的作用域,一个{}就是一个作用域,上述规则须在一个作用于内 坑:for(let i =0;i &lt ...

  9. ES6基本语法之let和const

    1.var可以重复声明 var a = 12; var a = 5; alert(a) //5 2.var无法限制修改 如:PI = 3.1415: 3.var没有块级作用域 { } 像: if(){ ...

随机推荐

  1. Ubuntu 16&period;04安装QQ国际版图文详细教程

            因工作需要,我安装了Ubuntu 16.04,但是工作上的很多事情需要QQ联系,然而在Ubuntu上的WebQQ很是不好用,于是在网上搜索了好多个Linux版本的QQ,然而不是功能不全 ...

  2. docker中使用systemd

    由于以下几个原因,docker的官方centos镜像中没有提供systemd服务:   systemd requires the CAP_SYS_ADMIN capability. This mean ...

  3. UEditor的使用方法

    文本编辑器程序员都会用到,今天无意中发现UEditor是个好东西,特奉献给大家,并提供下载. 这个编辑器的亮点是可以显示当前输入多少字符,还可以输入多少字符. 新创建的MVC项目,在layout页面里 ...

  4. 关于TCP封包、粘包、半包

    关于Tcp封包 很多朋友已经对此作了不少研究,也花费不少心血编写了实现代码和blog文档.当然也充斥着一些各式的评论,自己看了一下,总结一些心得. 首先我们学习一下这些朋友的心得,他们是: http: ...

  5. C&num; Windows Phone 8 WP8 开发,将WebClient的DownloadStringCompleted事件改成非同步的awiat方法。

    原文:C# Windows Phone 8 WP8 开发,将WebClient的DownloadStringCompleted事件改成非同步的awiat方法. 一般我们在撰写Windows Phone ...

  6. ng-file-upload(在单文件选择,并且通过点击&OpenCurlyDoubleQuote;上传”按钮上传文件的情况下,如何在真正选择文件之前保留上一文件信息?)

    文章前面研究ng-file-upload可能涉及指令: You can use ng-model or ngf-change instead of specifying function for ng ...

  7. PHP SPL迭代模式

    mode 有模式的两个正交组可以设置: 1.迭代的方向 SplDoublyLinkedList::IT_MODE_LIFO(堆叠型) SplDoublyLinkedList::IT_MODE_FIFO ...

  8. java url demo

    // File Name : URLDemo.java import java.net.*; import java.io.*; public class URLDemo { public stati ...

  9. html5-表单的综合实例

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  10. jquery 赋值时不触发change事件解决

    $("#optionsId").change(function(){ $("#selectOptionsText").val('测试'); }); $(&quo ...