30天不间断的文章之旅_变数宣告的 var、let、const

这是第一次在公开的地方撰写 JavaScript 相关的技术文章，若有错误或需要补充的地方，也欢迎在下方留言让我知道喔～～～谢谢大家！！

真正的技术文章第一篇，让我们一起来看看基本的变数宣告吧！

在 ES6 出现了 let、const 宣告变数的关键字。它们究竟和 var 所宣告得变数有何不同呢？继续看下去吧....

和 var 有 87 分像的 let

• 当变数名称有相同时，会跳出错误提醒
• 增加了区域作用域的概念

在过去使用 var 宣告变数时，如果有不小心重复宣告到相同的变数名称时，不仅不会有任何问题，後面的值还会覆盖掉一开始所赋予的值。

var myName = '大明';
var myName = '小明';
console.log(myName); //小明

因为在开发的过程中，我们不是刻意的要去宣告相同的变数名称，也不是刻意要去覆盖掉原有的值。
当然程序码如果少少的，马上发现也很好处理，但如果程序码一多，要维护或是除错，基本上就会不太好查找。

把 var 改成 let 呢？

var myName = '大明';
let myName = '小明';
Uncaught SyntaxError: Identifier 'myName' has already been declared 

马上就会跳出错误讯息，告诉你 myName 这个变数已经使用过了。

let还新增了区域作用域的概念

以往使用 var 宣告的变数，会被挂载在 window 底下，也就是全域环境底下。但变数都散落在全域环境底下不是一件好事；而 var 宣告的变数是以 function 来区分作用域的，也因此有了全域变数和区域变数的概念。
那我们来看一段程序码，

for (var i = 0; i<10; i++) {
  console.log(i); // 0,1,2,3,4,5,6,7,8,9
}
console.log(i); // 10
for (let k = 0; k < 10; k++) {
  console.log(k); // 0,1,2,3,4,5,6,7,8,9
}
console.log(k); // Uncaught ReferenceError: k is not defined

从上述程序码可以发现，变数 i 在全域环境下还可以取得i的值；而变数 k 则是跳脱出for回圈之後就无法取得该值。
因为 let 的作用域是在block，block是指 {} 符号，有人称它花刮号，我是习惯叫它大括号。因此跳出了for回圈的{}之後就无法取得k的值。这就是区域作用域的概念。不只是 let 有这样的概念，const 也是如此。

说一是一，说二是二，一但宣告就无法修改的 const

const 宣告一个常数，简单来说，就是宣告了就无法再被修改的意思。

const myName = 'Afat';
myName = '臭阿肥';
console.log(myName); //Uncaught TypeError: Assignment to constant variable. 

一旦修改了myName的值，就会跳出错误，告诉你不可以修改const所宣告的值。

使用const就一定要赋予值

过去变数可以先宣告（宣告变数未赋予值会是 undefined）但使用const宣告，就一定要赋予值。

const aFat;
//Uncaught SyntaxError: Missing initializer in const declaration 

物件依然维持传参考

使用 const 宣告的物件，内层属性依然可以调整，因为物件是传参考，所以在此依然可以修改属性。

const classroom = {
  teacher: '王老师',
  classmateA: '同学A',
  classmateB: '同学B'
};
classroom.classmateC = '同学C';
console.log(classroom);

使用console.log查看classroom，就会得到以下的结果。

 {
    classmateA: "同学A"
    classmateB: "同学B"
    classmateC: "同学C"
    teacher: "王老师"
 }

这是因为物件依然是维持传参考的特性。

let的暂时性死区

以往我们使用var宣告变数时，会出现Hoisting的状态，因此若我们在创造阶段取得变数时，会出现undefined。

console.log(myName); //undefined
var myName = '阿肥';

那麽let呢？

{
  console.log(myName); 
  //Uncaught ReferenceError: Cannot access 'myName' before initialization 
  
  let myName = '臭阿肥';
}

let一样会有创造阶段，但是从创造阶段到实际宣告阶段会出现暂时性死区TDZ，而在暂时性死区是无法呼叫到该变数的。有创造到执行的概念，但是不会预先出现undefined，而是会直接出现错误提示。

以上是今天的var、let、const的差异，如果我有写错或是有需要补充的，都欢迎大家跟我说喔～
如果觉得我写得不错，很清楚的话也欢迎让我知道喔～
谢谢大家观看