前言：

今天開始寫文章的時間太晚啦，先來一個較基本一點的主題好了。

當初面試題目問的的其實是 let const 我在專案中會如何運用，還記得當初傻傻的我說了，let 用於變數，const 用於常數，這是什麼名詞解釋般的回答啊??，尤其是習慣 tsx 專案後，好用的套件還會幫你判斷使用情況自動幫你改用法，導致懶惰的我越來越無知。

基礎介紹：

let , const 是 ES6 推出使用上更嚴謹的變數宣告關鍵字，不過既然都要介紹他們兩了好像不免俗需要提一下 var 了。這邊先假設讀者都已經知道何者是全域變數 （作用域是整隻檔案）以及區域變數（僅作用於有定義它的函式內）了。

var：
var 宣告的變數的作用域是函式作用域(function scope)，表示 var 宣告的變數不在函式裡時他會變成全域變數（例如：在 for/ while/ if 裡宣告時），這樣他就有可能會污染到全域變數。

// 情況一
if (true) {
  var myName = "John";
}
console.log(myName); // John
// 情況二
for (var i = 0; i < 3; ++i) {
  console.log(i) // 0, 1, 2
}
console.log(i); // 3 ＝> i 變成全域變數了

還有一個在考題中很常出現的 Hoisting (提升)，其實就是 var 的先使用後宣告。

// 場景一 (正常使用情況)
function printText() {
	var text;
  text = "normal";
  console.log(text);
}
printText(); // normal usage

// 場景二 (Hoisting)
function printText() {
  text = "Hoisting";
  console.log(text);
  var text;
}
printText(); // Hoisting

// 場景三
console.log(text); // text is not defined 

let：
let & const 的作用域都是區塊作用域(block scope)，且他們都禁止同一層出現重複宣告。不過 let 可以在宣告後重新賦予值，所以一開始即便宣告了但並未給值是不會導致錯誤的。整體操作下來，可以說 let 與 var 基本上功能相同，不過 let 又更嚴謹些。

// 情況一：錯誤情況，重複宣告
let a=2; // or var a=2
let a=4; // Uncaught SyntaxError: Identifier 'a' has already been declared

// 情況二：正常使用情況
let a; // or let a=2
a=4;
console.log(a) // 4

const：
其意義爲不變的常量，適用於宣告不會再重新賦予值的變數上，也代表了宣告 const 時就須先給值否則會導致錯誤。不過其實他的不變是基於記憶體位置上的，可以往下看程式範例

// 情況一：錯誤情況，未賦值
const b; // Uncaught SyntaxError: Missing initializer in const declaration

// 情況二：正常使用情況
const b=6; // nothing happen

// 情況三：記憶體位置不變
const obj={who:'me'};
obj.who='you';
obj.when='today';

console.log(obj.who); // 'you'
console.log(obj); // { who:'you', when:'today' }
// 重新賦予值則會出錯
obj={where:'zoo'} // Uncaught TypeError: Assignment to constant variable.

以上，謝謝您的收看～

補充：
針對在專案中如何應用的問題我認為我的想法可能會太主觀，不過瑞啾問了我就分享一下我的淺見吧，希望有其他想法的人也歡迎留言討論，雖然我到現在還沒成功解鎖回覆留言功能??。

let 我覺得適用場合在縮減程式碼中，操作太複雜變數太多時以及作用域比較小的情況就可使用 let ，避免過多的重複程式易出錯，我目前會使用的方式如下方範例程式碼⇩

// 簡單範例
  function example(val){
  let ans;
  if(val){
    ans = 1;
  }else{
    ans = 0;
  }
  return ans;
}
// 實際應用範例:在頁面重整時，用戶仍想看到先前設定相同資料
useEffect(() => {
    // tsx 中先宣告型態
    let defaultFilter: FilterRemember | undefined;

    // 利用redux 儲存的filter資料，"dataType" 頁面實際所需資料
    if (filterRemember.length) {
      defaultFilter = filterRemember.find(({ type }) => type === dataType);
    }

    // 利用session 儲存的filter資料，reload page仍有data
    if (!filterRemember.length && sessionStorage.getItem('filterStore')) {
      const filter: FilterRemember[] = JSON.parse(sessionStorage.getItem('filterStore') || '[]');
      defaultFilter = filter.find(({ type }) => type === dataType);
      dispatch(setFilterRemember(filter)); // 將 session 資料代入 redux 操作上更彈性
    }

    // 如果user已filter過，走此流程
    if (defaultFilter) {
      setFilterValue(defaultFilter.filterValue);
      setDateValue(defaultFilter.date || { option: '', value: ['', ''] });

    } else {
      resetFilter(); // 預設全選
    }
  }, [dataType]);

解釋: 如果當我每個都使用 const 時，因為不可重新賦予值的特性我能就需要每個 if 內都複製貼上大同小異的 function 以及設定。

const 適用在告訴後續維護的人以及整個 function 內，這個參數不會再改變的情況。
可以使程式碼穩定性較高，也比較好閱讀。基本上沒什麼特殊情況都比較適用 const

// 實際應用範例:如果 filter 過
const hasFiltered = value.length !== option.length;

解釋: 即便用戶在操作中 value 以及 option 有所改變不過 hasFiltered 仍舊是代表著 filter 的狀態。