JavaScript 是什麼？

JavaScript 是一個簡單、以物件為基礎且能在瀏覽器裡直接執行的腳本語言。
（其實說簡單也不簡單，實際在學習的過程中，
如果沒有了解 JavaScript 的特性，很容易就掉進各式各樣的坑裡... ㅇㅅㅇ）

JavaScript 小歷史

• 起源於 1995 年，由 Netscape 的 Brendan Eich 設計與實作，最初名為 LiveScript，
  後期才改名為JavaScript。
• 1996 年，ECMA 將 JavaScript 國際標準化，形成了 ECMAScript 標準。
• DOM 和XMLHttpRequest 的引入使其更加強大，推動了 Web 2.0 的興起。
• 2009 年，Google 的 V8 引擎提高其性能，大家熟知的 Node.js 就是是按照 V8 引擎的規格來做開發。
• 2010 年，前端框架 AngularJS、React 和 Vue.js 崛起。
• 2020 年，引入 ES6 標準，增加了語法和功能。

Node.js 是一種伺服器端運行環境，允許使用 JavaScript 編寫後端應用程式。這意味著開發人員可以同時使用JavaScript 進行前端和後端開發，提高了效率，促進了 JavaScript 在整個開發領域的應用。

目前網頁前端三大核心技術：HTML, CSS 與 JavaScript，
但，HTML 與 CSS 都不是程式語言 (programming language)，
HTML 是定義內容的標籤語言 (markup language)，而 CSS 是一種樣式 (style)。
JavaScript 是程式語言 (programming language)，透過 JavaScript 可以讓網頁具有互動性，網頁上看到的互動行為，都跟 JavaScript 離不開關係！

簡單介紹 JavaScript 之後，讓我們從變數聊起！

在 ES6 之前，可以用 var 來宣告變數，
但在 ES6 之後，宣告分為變數與常數，
除了使用 var 來宣告變數之外，可以透過 let / const 來宣告！

在 JavaScript 裡，const, let, var 很重要，但為什麼很重要？這三者到底有什麼不同？

• const 常數
  在宣告常數上，要注意不能重複宣告也不能重新賦值，
  但是在宣告陣列或是物件時，可修改其內部屬性。
  在第三點可以發現 const d = ["a", "b", "c"] 可以藉由取 index 的方式，
  更換陣列裡的元素。

// 1. constant declaration
const a = 2;
console.log(a); // 2

// 2. const cannot be re-assigned!
//example 1
const b = 2;
b = 3; // Uncaught TypeError: Assignment to constant variable.
console.log(b);

//example 2
const c = ["a", "b", "c"];
c = ["a", "b", "c"]; // Uncaught TypeError: Assignment to constant variable.
console.log(c);

// 3. const can changed by index
const d = ["a", "b", "c"];
d[0] = 333;
console.log(d); // [333, 'b', 'c']

• let 宣告在當前區塊的變數

• var 宣告一個變數

  let 與 var 都是可以用來宣告變數的，差異在:

  1. var 可以重複宣告，let 則不行
  2. 作用域 (scope) 不同
     let 作用於 block scope ; var 作用於 function scope。

  var a = 1;
  var a = 1;
  console.log(a); // 1
  
  let b = 1;
  let b = 1;
  console.log(b); // Uncaught SyntaxError: Identifier 'b' has already been declared
  
  var c = 1;
  let c = 1;
  console.log(c); // Uncaught SyntaxError: Identifier 'c' has already been declared
  
  let d = 1;
  var d = 1;
  console.log(d); // Uncaught SyntaxError: Identifier 'd' has already been declared
  

變數應當宣告後再使用，避免使用無宣告變數

有宣告與沒宣告變數差別在是否可以 delete (一個刪除物件的運算)
delete operator: removes a property from an object.

下方例子說明，無宣告的變數會被當作物件屬性新增，
容易在 coding 上誤刪造成 bug，因此回歸到標題所述，
變數應當宣告後再使用，避免使用無宣告變數

var user = "小明";
delete user; // false

user = "小明";
delete user; // true

應當常使用 const, let 而非 var

const 的規則相較 let, var 嚴謹許多，因此在宣告上比較不會有重複的狀況。
透過上面的說明，可以知道 let 與 var 很相似，但是！
var 沒做好管理，容易發生變數相互覆蓋，
最嚴重的情形便是全域汙染，因此在使用上要小心。

使用上的方法，可以參考 Google 的說明：Google JavaScript Style Guide

Brief Summary

TDZ: Temporal Dead Zone，暫時死區

是不是開始好奇 TDZ 是什麼？下篇提到變數提升時，就會知道為什麼了！

參考資料：

• 【自學程式】var、let 與 const 到底差在哪？
• JS 宣告變數， var 與 let / const 差異

文章同步於個人部落格：Viiisit!（歡迎參觀 ୧ʕ•̀ᴥ•́ʔ୨）