Phoenix's Blog

JavaScript | let & const [ES6]

2019-09-06

[JavaScript] - let & const [ES6]

在了解 let & const 我們先看看 var 的例子：

1
2
3
4
5
6
7
8
9
10
for(var i=0; i<=2; i++) {
    console.log('var-in-i='+i);
}
console.log('var-out-i='+i);

//OUTPUT:
//var-in-i=0
//var-in-i=1
//var-in-i=2
//var-out-i=3

因為 var i 是全域變數．所以var-out-i 可以印出值，但這樣容易造成程式之間變數的污染．

let

let 特性是屬於塊級作用域( block scoped )，塊級作用域就是限縮在 { } 之內，我們用上方的例子更改一下

1
2
3
4
5
6
7
8
9
10
for(let i=0; i<=2; i++) {
    console.log('let-in-i='+i);
}
console.log('let-out-i='+i);

//OUTPUT:
let-in-i=0
let-in-i=1
let-in-i=2
Uncaught ReferenceError: i is not defined

透過上方let的例子，可以看到 let-out-i 卻是is not defined，let 只在{ }有效．

可以透過另一個例子再來看看：

1
2
3
4
5
6
7
8
9
10
if(true){
    var studentVar = 'Bob';
}
console.log(studentVar); //Bob


if(true){
    let studentLet = 'Bob';
}
console.log(studentLet);//studentLet is not defined

const

const 也是塊級作用域( block scoped )，但要注意的是只要一指定就不能再做更改，且不能重複宣告．且在哪一行宣告就要立即給予值．

我們透過上放的特性，來看看以下幾個例子：

不能重複宣告：

1
2
3
const student = 'Tony';
student = 'Bob';
//Uncaught TypeError: Assignment to constant variable.

塊級作用域：

1
2
3
4
5
if(true){
    const student = 'Tony';
}
console.log(student);
//Uncaught ReferenceError: student is not defined

立即給予值：

1
2
3
4
if(true){
const student ;
}
//Uncaught SyntaxError: Missing initializer in const declaration

但今天若是用在object與 array 上就不一樣了：

  • object : 只能修改屬性但不覆寫
  • array : 只能修改，但不能重新指定一個新的陣列

我們來看看object與 array的例子

object:

1
2
3
4
5
6
const andy = {'money': 100 };

andy = {'card': 'ACard'};//Uncaught TypeError: Assignment to constant variable.

andy.money = 200;
console.log(andy.money);//200

array:

1
2
3
4
5
6
const student = [];

student.push('Bob'); 
console.log(student[0]);//bob

student = ['Andy'];//Uncaught TypeError: Assignment to constant variable.

參考:
JavaScript ES6 中使用block-scoped 的 let 宣告變數
MDN-let

tags: JavaScript ES6 let const
Tags: JavaScript
← JavaScript | Hoisting JavaScript | LocalStroage - ToDoList →