# W_JavaScript概念三明治＆讀書會內容🚧-
針對JavaScript概念三明治這本書
- 擷取我覺得重要片段，不會照單全收
- 結合讀書會一起

## 讀書會關鍵字查詢
### 第一次提及
- 強制轉型
- 運算子優先順序
- 強型別
- RAM vs ROM
- instanceof
- object.is()
- console系列得鬼東西
- IIFE
- lodash
- object empty
### 第二次提及

## 中愷教學
[示範案例](https://www.w3schools.com/js/tryit.asp?filename=tryjs_array_loop)
將ul跟li刪除，建立陣列，加上逗點

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fLen = fruits.length;

let text = "";
for (let i = 0; i < fLen; i++) {
     if(i == fLen -1){
         text += fruits[i]
     }else{
    text += fruits[i] + ",";
     }
}
console.log(text);

在此案例中，主要是訓練思考模式，

## 個人對於開會心得或是關鍵字
- react會常用到表達式

## 第二章
### 字串
#### 字串模板
- 當要插入得變數變多，可以使用如name變數得範例
- 插入變量首先要用反引號，name使用得不是單引號喔
- 在要插入得地方使用${}並放入括號名稱

let spark = "spark";
let name = '所以說阿，${spark} 你是個傻B';

console.log(name);

### 數值
- NaN(Not a Number)
- undefind(變數已宣告，但是未定義數值)
- not defind(完全沒有宣告＋定義)
- null(告訴變數宣告得值回空值，就不會報undefind)
- boolean(可以想像—>真的假的)
- ！反向運算子 (就是樣跟你反著幹)!!(回覆成員樣)
#### 轉形成數值
- 在字串前面放上＋號可以強制轉形成數值
- 可能影響閱讀

let stringToNumber = +"20" //20

- 轉形成字串 5+""
- 轉形成數值 +"5"
- 轉形成布林 !!5
## 第三章 執行環境與作用域
### 第一節 編譯語言、直譯語言
大綱
: 介紹js如何在瀏覽器上運行，書中介紹執行環境、作用域、提升等重要技術名詞背後意義

#### 語言運行模式分為兩大類
- 編譯語言
- 直譯語言(js屬於值譯)
#### 共同點與不同
- 相同：都必須將人類撰寫得**高階語言**，轉換成電腦懂得**低階語言**
- 不同：編譯時機，轉成機器看懂得程式碼時間點
#### 解釋
- 編譯語言：寫完成是碼之後就會預先進行編譯，可以獨立執行，直接與電腦溝通
- 直譯語言：即將要執行才會**動態**進行編譯，產生機器碼，所以直性速度會比較慢

>直譯語言無法獨立執行，必須仰賴環境，通常會稱呼為引擎。他是能讓js跑起來重要技術之一

### 2. js引擎簡介
- google V8
- 最早得引擎叫SpiderMonkey，是FireFox的渲染引擎
### 3. js引擎運行流程解析
#### 以V8為例
- 解析：分析js原始碼，並將變數、關鍵字、語法符號都拆成最小片段，轉成一個特定格式表示詞彙關係
- 直譯與執行：語法樹轉換成機器碼並執行
- 優化：根據直譯器產生磁來的機器碼，傳給優化編譯器，並且根據數據做出來的假設再次進行編譯，如果優化優化結果跟前面做出來的假設條件不符，則會將優化拔除，重回上一個階段使用原來的機器碼執行程式(De-Optimizng)

---
---

## 2025/01 重新省視(依照IT鐵人文章的心得)
### 堆疊
他就像是一個千層蛋糕，當執行堆疊時就會開始疊蛋糕，全域環境可以理解為疊蛋糕的平台，當今天製作三片蛋糕要堆疊時(分別為1.2.3)，1吃到一半，裡面有一塊呼叫3，於是3就會跌在1上面。由於吃不到1所以就開始吃3，而今天3又吃到一半發現呼叫2，那就開始吃2，因為2在最上，然後再慢慢吃下來3-1到只剩底盤。

---

### function scope
簡單來說func是一個有功能的盒子，盒子裡面有東西叫做變數(或其他工具)。一般來說在js裡面，都是用呼叫名子的方式來使用功能，如果想要使用盒子裡的東西，不能直接呼叫盒子裡的東西，他會感應不到，要呼叫盒子的名子他才會知道你在叫他，並且使用盒子裡的物品，而這就叫做scope，變數有自己的領域，管轄範圍。而當這func被呼叫完之後，這盒子也就作廢了，裡面的東西也無法使用。而這func盒子除了可以保護自己的變數，也可以取的外面的變數來使用。
- func 有自己的領域，外界無法直接使用
- func 則有特權，他可以使用外部的東西

---

### block scope
- 只要是在大括號{}裡的東西，就叫做區塊block scope
- var 即便在{}的裡面還是會被呼叫到，它會無視環境
- block scope 其實就是用來定義 func scope 的範圍
- var 在block scope可直接被呼叫，而let、const則會被保護

---

### scope chain
先來說說解釋語彙環境再解釋範疇鍊，就func在尋找外部環境(名詞)，一般來說叫做語彙環境。假設a包住c，那c的外部語彙環境在a，假設b沒有被包住，那b的外部語彙環境就是全域。解釋完語彙環境後，範疇鍊則表示這個向外查找的行為(動詞)

---

### Hoisting

#### 執行環境創造
簡單來說，創建變數時，不一定要宣告，只要在相同環境底下的其他地方有宣告，就不會發生錯誤
#### 記憶體空間指派
簡單來說，只要在全域環境底下建立的變數和函式，記憶體空間heap就會保留了所有以下的關鍵物，即便沒有設立值也是會保留，只是暫時的用undefind來彌補缺陷，直到賦予值後才會運作內容。而還沒被賦予值，只保留記憶體空間的階段叫做「創造階段」
#### 執行環境與提升
上述在「創造階段」所做的，為變數及函式保留記憶體空間的動作，就被稱為「提升( Hoisting )」。提升這個動作在不論是全域執行環境還是函式執行環境，所有的執行環境都會進行。也就是說我可以在任何一處呼叫，不需要依照程式碼的邏輯，由上到下的概念去放置

會被提升
- 函式宣告

提問
- 即便賦予值了也會有提升嗎
#### let、const 的 TDZ (Temporal Dead Zone) 。
雖然在 let 與 const 也會被提升，但是卻無法像var一樣隨意放置點位使用。簡單來說就是記憶體有保留了，但若是不擺在要使用的語彙環境，就會被忽視，也稱為TDZ

---

### 陳述式（ Statement ） & 表達式 （ Expression ）

- 函式表達式
- 不會提升

提問
- 函式表達式是匿名函式嗎