#
**第一章 變數 var const let 的區別**

# 前言

ECMAScript變數是鬆散型別的，變數可以儲存任何型別的資料，每個變數不過是一個用於儲存任意值的命名佔位符。有三個關鍵字可以宣告變數，var是在ECMAScript所有版本都可以使用，而const和let只能在ES6版本後使用</font>

# 一、var宣告

1. 如果不給變數傳值的話 ，變數就是 undefined

```javascript
var msg;
console.log(msg) //undefined

```
2. var 宣告作用域：var操作定義符的變數會成為包含它的函式的區域性變數，如果用var在一個函式內部定義變數，該變數將在函式推出時被銷燬

```javascript
function test(){
var msg = 'Bear';
}
test();
console.log(msg);//報錯
```
3. var 宣告提升：使用var時，下面程式碼不會報錯，因為使用這個關鍵字宣告的變數會自動提升到函式作用域頂部

```javascript
function test(){
console.log(name);
var name = 'Bear';
}
test() //undefined
//之所以不會報錯是因為ES執行時把他看成以下的程式碼
function test(){
var name ;
console.log(name);
name = 'Bear';
}
test() //undefined
```

# 二、let宣告
##
1. let跟var的作用差不多，區別就是let宣告的範圍是塊作用域，而var宣告的範圍是函式作用域

```javascript
if(true){
var name = 'bear';
console.log(name); //bear
}
console.log(name);//bear

if(true){
let name = 'bear';
console.log(name); //bear
}
console.log(name);// ReferebceError:name 沒有定義

```
2.let不允許同一塊作用域出現重複的宣告，這樣會導致報錯

```javascript
var name;
var name;
let age;
let age;//報錯 Syntax Error 識別符號age已經被宣告過了
```

3. let宣告的變數不會在作用域中被提升

```javascript
//var會提升
console.log(name) //undefined
var name = 'bear';
//let 不會提升
console.log(age) //ReferenceError age沒有定義
var age = 21;

```
4.let在全域性作用域中宣告的變數不會成為window物件的屬性（var宣告的則會）

```javascript
var name = 'bear';
console.log(window.name);// bear

let age = 21;
console.log(window.age); //undefined
```
5.for迴圈中的let宣告
在let出現之前 for迴圈定義的迭代變數會滲透到迴圈體外部

```javascript
for (var i = 0; i < 5 ;i++){
}
console.log(i); //5
```
在改成let，這個問題就小時了，因為迭代的變數只屬於for迴圈塊內部
```javascript
for (var i = 0; i < 5 ;i++){
}
console.log(i); //ReferenceError i沒有定義
```
在用var的時候最常見的問題就是對迭代變數的宣告和修改
```javascript
for (var i = 0; i < 5 ;i++){
setTimeout(() => console.log(i) , 0)
} //會輸出55555 你可能以為會輸出0 1 2 3 4
//因為在推出迴圈時候，變數儲存的是迴圈退出後的值，所以輸出了 5次5
```
在使用let變數就不會導致這樣的情況
```javascript
for (let i = 0; i < 5 ;i++){
setTimeout(() => console.log(i) , 0)
} //會輸出0 1 2 3 4

```

# 三、const宣告
const 基本與 let相似，唯一一個重要區別是用它宣告變數時必須同時初始化變數值，且嘗試修改const宣告的變數會導致執行的錯誤

1.給常量賦值

```javascript
const name = 'bear';
name = 'jackson' ; //typeError 報錯
```
2.const也不允許重複宣告

```javascript
const name = 'bear';
const name = 'jackson' ; //SyntaxError 報錯
```
3.const宣告的作用域也是塊

```javascript
const name = 'bear';
if(true){
const name = 'jackson';
}
console.log(name) //bear
```
4.const的宣告限制值適用於它指向的變數的引用

```javascript
const test = {};
test.name = 'bear' ; //這裡可以執行
```
# 四、總結
1.不使用var
ES6相當於把var的功能拆解成const和let，有了let和const，其實會發現不需要再用var了，限制自己使用const和let有助於程式碼質量的提升。
2.const優先 let次之
使用const宣告可以讓瀏覽器執行時強制保持變數不變，在這同時也能迅速發現意外賦值的這種非預期行為。簡而言之就是const定義一些不會變的變數，會變的就用let定義。