# [JavaScript] JavaScript

###### tags: `JavaScript`

* 直譯式語言：彈性較高，不需預先定義型別
* 採用語法作用域（Lexical Scope，又名靜態作用域）：語法解析時已確定作用域
* 單執行緒（Single Thread），一次只能執行一件事（系統的執行）
* 非同步行為先移到事件佇列（Event Queue）
* 例：setTimeout()，就算延遲時間為0秒，也不會立即執行，會先移到事件佇列
* 動態型別：執行階段才會賦予型別
* 靠事件驅動的語言（event-driven language）
* 在瀏覽器上的 JavaScript 包含：JavaScript 核心(ECMAScript 標準)、[BOM、DOM](#BOM-%E8%88%87-DOM)

## 變數
:::info
* [關鍵字、保留字清單](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#keywords "Lexical grammar - JavaScript | MDN")
* [Primitive | MDN](https://developer.mozilla.org/en-US/docs/Glossary/Primitive "Primitive - MDN Web Docs Glossary: Definitions of Web-related terms | MDN")
:::
* 命名原則
* 由==字母大小寫==、==數字==、==$==、==底線==組成，但不可用數字開頭
* 大小寫視為不同
* 不可用`-`、`.`、關鍵字、保留字
* 建議命名語意化
* 回傳 boolean：`isXXX`、`hasXXX`
* 變數無法被刪除，屬性才可以
* 宣告變數：盡可能立刻給初值，否則是 undefined
* `var`：變數有效範圍的最小單位為 Function Scope
* `let`、`const`：變數有效範圍的最小單位為 Block Scope
* 變數沒有型別，值才有

### 資料型別
#### Primitive 基本型別
* boolean
* string
* number（最大值：2^53^）
* null
* 空值

  typeof null; 'object'
  Boolean(null); // false
  Number(null); // 0

* undefined
* 未定義
* 宣告一個變數，沒立刻給值
* 使用一個物件，未聲明屬性
* 定義了函數的參數，但並未傳值給該函數

  Boolean(undefined); // false
  Number(undefined); // NaN

* bigInt（表示大於2^53^的整數）
* symbol

#### Object 物件型別
基本型別以外都是物件型別
* object
* [Object](/HJVrVj1Tw "Object")
* array
* [Array 陣列常用方法](/ryiFiiOhw)
* function
* 定義方式
* 函式宣告：`function name() {}`
* 函式運算式：`const fn = function () {}`
* `new Function`：效能差
* 呼叫方法
* `函式名稱()`
* `函式名稱.call()`
* `函式名稱.apply()`

## hoisting 提升
* 函式宣告：不管放在哪個位置，會優先準備好函式內所有程式碼
* 變數：不管放在哪個位置，會先進行宣告變數，但不會先賦值，等到執行階段才會帶入值
* 優先權：函式宣告 ＞ 變數
* `let`、`const` 一樣有創造階段，但從創造到實際宣告間會出現暫時性死區（Temporal Dead Zone），無法呼叫變數

## 操控 HTML 的方式[^1]
1. innerHTML：組完字串後傳進語法進行渲染，效能快，但有資安風險，要確保來源沒問題
2. createElement：以 DOM 節點來處理，安全性高，但效能差

## 綁定事件語法差異，以 click 為例[^1]
* onclick：不能同時綁定多個事件，只會讀取最後一個
* addEventlistener：可以同時綁定多個事件

## dataset
取得自訂的 data-* 資料

<div id="test" data-name="Terry" data-order-number="A12345"></div>

const el = document.querySelector('#test')
console.log(el.dataset.name) // Terry
console.log(el.dataset.orderNumber) // A12345

## BOM 與 DOM
由瀏覽器執行環境提供，故 node 環境沒有


### BOM（Browser Object Model，瀏覽器物件模型）
* 讓 JavaScript 能與瀏覽器溝通
* 瀏覽器所有功能的核心，與網頁的內容無關
* 核心是 [window 物件](/Byq22Ue6w)
* BOM 包含 DOM，JavaScript 透過瀏覽器提供的 BOM 來存取 document 的 DOM 模型
* 無標準規範，由瀏覽器廠商實作功能

### DOM（Document Object Model，文件物件模型）
* 以樹狀結構表示 HTML 文件
* DOM API：定義讓 JavaScript 可以存取並改變文件架構、樣式和內容的方法
* JavaScript 用來控制「網頁」的節點與內容的標準
* 依據 W3C（World Wide Web Consortium）訂定的標準規範

## 執行的錯誤情境
* RHS(Right-hand side)：取值來自於右側的變數上
* LHS(Left-hand side)：用來賦予值到左側的變數上

## Statement 與 Expression
### Statement
* 中文翻譯：敘述句、陳述式、敘述式
* 被執行來使某些事情發生，不會回傳值
* 可分類為
* 宣告變數：`var`、`let`、`const`
* 賦值：`const foo = 1 + 2; // 指派敘述式，回傳結果是 undefined`
* 迴圈：`for`、`while`、`for...in`、`for...of`、`for await...of`、`do...while`
* 控制流程：`return`、`break`、`continue`、`throw`、`if...else`、`switch`、`try...catch`
* 函數與類別：`function`、`function*`、`async function`、`async function*`、`class`
* 其他：Empty、Block、Expression statement、`debugger`、`export`、`import`、label

### Expression
* 中文翻譯：運算式、表達式、表示式
* 被估算而產生一個值

1 + 2; // 3
Math.pow(2, 3); // 8
age < 18 ? 'Minor' : 'Adult';
typeof 'text'; // 'string'
new Date();

// IIFE 立即呼叫函式表達式
const status = (function(age) {
  if(age < 18) { return 'Minor'; }
  return 'Adult';
})(16); // 'Minor'

## Truthy（真值）與 Falsy（假值）
:::info
[JS Comparison Table，畫面中綠色為 True，白色為 False](https://dorey.github.io/JavaScript-Equality-Table/ "JS Comparison Table")
:::
* Truthy：在 Boolean 判斷轉換後的值為真的值
* Falsy：`false`、`+0`、`-0`、`""`、`''`、`null`、`undefined` 和 `NaN`
* 要注意 `"''"` 是 true

## this
:::info
[筆記](/B11arBPop)
:::

## 嚴格模式[^2]
* 加入 'use strict' 即可運作
* 不會影響未支援嚴格模式的瀏覽器
* 可依據執行環境設定 'use strict'
* 透過拋出錯誤的方式消除一些安靜的錯誤（防止小錯誤）
* 禁止使用一些有可能被未來版本 ECMAScript 定義的語法

## 原型[^2]
### 特性
* 具有物件的特性，有屬性及方法
* 向上查找
* 原型可共用方法及屬性

[^1]: [六角學院 JavaScript 入門篇 - 學徒的試煉](https://www.udemy.com/course/javascript-learning/ "六角學院 JavaScript 入門篇 - 學徒的試煉")

[^2]: [六角學院 JavaScript 核心篇](https://courses.hexschool.com/courses/670037 "六角學院 JavaScript 核心篇")

## 參考資料
* [Expressions and operators - JavaScript | MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators "Expressions and operators - JavaScript | MDN")

---

:::info
建立日期：2020-12-06
更新日期：2024-02-12
:::