這是第一次在公開的地方撰寫 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的差異，如果我有寫錯或是有需要補充的，都歡迎大家跟我說喔～
如果覺得我寫得不錯，很清楚的話也歡迎讓我知道喔～
謝謝大家觀看