# 前端工程師面試題 Day2
###### tags: `面試`
## Q1. 甚麼是閉包?
當在函式裡宣告變數，並回傳一個函式，當外層函式執行結束，還能透過回傳的函式，讀取到外層函式內的變數。
內層變數不會被釋放，又不會被外面讀取。

好處：可以將不想被改變的變數用閉包的方式儲存，不能被外部改變，但是可以讀取。變數僅存在於函式中。

閉包是由函式及其相關參照環境組合而成的實體。

所有函式都式閉包，直接來看效果的話，假設變數被宣告在一個外部函式裡，當這個函式執行完後，照理說沒辦法在函式外部讀取到變數，但是可以透過外部函式回傳一個內部函式，去讀取到變數。

### 參考
https://jim1105.coderbridge.io/2022/07/25/closure-scope/

## Q2. 請說明 inline 和 inline-block 的差異性
1. inline
* 不可設定長寬，元素的寬高由他的內容撐開。
* 設定 margin/padding 排版不會改變，其它行不會被推開。
2. inline-block
* inline 方式呈現，也就是元素可在同一行內呈現，但同時有 block 的屬性，也就是可以設定元素之寬高，設定 margin/padding 會佔據空間。

常見 inline element：span、a、 input、img、button

### 參考
https://ytclion.medium.com/css%E6%95%99%E5%AD%B8-%E9%97%9C%E6%96%BCdisplay-inline-inline-block-block%E7%9A%84%E5%B7%AE%E5%88%A5-1034f38eda82

## Q3. 什麼是 "use strict";? 使用他的優點和缺點是什麼？
是 JavaScript ES5 加入的標準，目的是為了讓編寫程式碼更穩定。
1. 未定義變數不能直接賦值。
3. 禁止使用 delete 刪除變數或函式。
4. 禁止重複變數名稱。
5. 物件內有重複屬性。
6. eval、arguments 不能當作變數名稱。
7. 可以僅用在函式內。
8. this 不再指向全域，而是 undefined。

1. 優點：讓程式碼更穩定安全。
2. 缺點：如果是十分成熟的大專案或舊專案，突然使用 strict mode 可能會導致專案無法運作。

### 參考
https://www.casper.tw/javascript/2017/12/15/javascript-use-strict/

## Q4. 請解釋 淺拷貝 和 深拷貝?
深拷貝就是完全的複製變數，不會因為改變原始變數就受影響，基本型別的拷貝都是身拷貝。
而淺拷貝主要發生在 object 跟 array ，當 object 或 array 裡面有任何一層的參照資料位置是相同的，就會是淺拷貝。

深拷貝的方法：JSON.parse(JSON.stringify(arr/obj))

轉換過程中的錯誤：
1. undefined 連同 key 一起消失。
2. NaN 會轉成 null
3. infinity 轉成 null
4. regExp 轉成 {}
5. Date 由 data 轉成 string

lodash cloneDeep深拷貝且不會有轉換問題

淺拷貝(shallow copy) : 原始物件資料與複製物件資料「並非完全獨立」，可能第一層就有指向相同地址的資料，也可能第二層才有指向相同地址的資料。彼此資料內容的改變可能會互相影響。

深拷貝(deep copy) : 原始物件資料與複製物件資料「完全獨立」，沒有任何一層資料指向相同的地址。彼此資內容料的改變不會互相影響。

### 參考
https://www.programfarmer.com/articles/javaScript/javascript-shallow-copy-deep-copy

## Q5. styled-component vs. css module

### 參考
https://molly1024.medium.com/css-modules-%E6%98%AF%E4%BB%80%E9%BA%BC-%E7%82%BA%E4%BB%80%E9%BA%BC%E6%88%91%E8%A6%81%E6%94%B9%E7%94%A8-css-modules-what-is-css-modules-why-should-you-use-it-aeb7d2955c58
## Q6. 什麼是 event loop

event loop 將費時較久或是等待事件才能啟動的任務往後安排，為的就是讓網頁流暢。好的使用者體驗。

event loop 的作用就是監控堆疊 call stack 和 task queue ，當 API 執行完會將 call back FN 放到 task queue 當 event loop 偵測到 task queue 空的話，就把 task queue 裡面從第一個開始丟到 call stack

### 參考
https://pjchender.dev/javascript/js-event-loop-stack-queue/

https://ithelp.ithome.com.tw/articles/10241081