# FE practice club
## Explan Leetcaode in english
### 12/03 分享用過的網頁效能優化方案

[redux code splitting](https://redux.js.org/usage/code-splitting)

### 11/25 關鍵路徑渲染

Time: 8:00 pm

疑問點:JS 甚麼時候被解析、REACT第一屏為空白嗎? fetch是macro task?
非同步調用、非同步執行。
- 酷案例

const p = new Promise((res)=>{
	setTimeout(()=>{
		console.log("2");
	},1000)
    res()
})

p.then(()=>{console.log("1")})
// 1 -> 2

const p = new Promise((res)=>{
	setTimeout(()=>{
		console.log("2");
               res()
	},1000)
    
})

p.then(()=>{console.log("1")})
// 2 -> 1

note: alice 請假

### 11/18 ---[Closure](https://www.greatfrontend.com/questions/quiz/what-is-a-closure-and-how-why-would-you-use-one)

Time: 8:00 pm

關鍵字:lexical environment、characteristic / feature / trait / property 單字用法的不同

特別注意:閉包傳入參數，無須使用變數承接，會直接存在閉包內。

function createCounter(n: number): () => number {
    
    return function() {
		return n++
    }
}

* property 比較用來形容一個「物品」的特性。
* trait 用於形容可看見人事物的特徵。
* feature 同於 characteristic => 可形容抽象事物的特性。

所以閉包的「特性」可以用 feature 或 characteristic。

### 11/11 ---[what is event loop?](https://www.greatfrontend.com/questions/quiz/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue)

延伸解釋：Macro Task & Micro Task
[2. Valid Parentheses](https://leetcode.com/problems/valid-parentheses/)
Time: 8:00 pm

#### 單字摘要
containing 包含
characters 字符
determine 確定
`(` Left Parenthesis 左括號
`)` Right Parenthesis 右括號
`{` Left Brace or Left **Curly** Bracket 左大括號或左大括號
`}` Right Brace or Right **Curly** Bracket 右大括號或右大括號
`[` Left Bracket or Left **Square** Bracket 左括號或左方括號
`]` Right Bracket or Right **Square** Bracket 右括號或右方括號
左 - Left or Opening
右 - Right or Closing
`>` more than
`<` less than
first-in-last-out 先進後出

發音注意: executes 、mechanism

### 11/04 ---[what is event loop?](https://www.greatfrontend.com/questions/quiz/what-is-event-loop-what-is-the-difference-between-call-stack-and-task-queue)
[2. Valid Parentheses](https://leetcode.com/problems/valid-parentheses/)
Time: 8:00 pm

### 10/14 ---[1. Two Sum](https://leetcode.com/problems/two-sum/)
Time: 8:00 pm

function twoSum(nums: number[], target: number): number[] {
    let myMap = new Map();
    for (let idx in nums) {
        let currentNum = nums[idx];
        let deductNum = target - currentNum;
        if (myMap.has(deductNum)) return [myMap.get(deductNum), idx];
        myMap.set(currentNum, idx)
    }
};

#### 單字
add up 加起來
integers nums 整數
comma 逗號
brute force 暴力破解
iterate 迴圈

#### 語法陳述方式
`var i = 0` -> Declare variable i and assign value 0
`i++` -> Increment 'i'
`nums[i]` -> Access 'i' in 'nums'
`{}` -> empty object
`nums.length` -> the length of 'nums'

### 10/21 ---[Explain "hoisting"](https://www.greatfrontend.com/questions/quiz/explain-hoisting)
Time: 8:00 pm

function first(){
    console.log('f')
    second()
};

function second(){
    console.log('s')
    first()
};

first();

// second function can be invoked by first function & first function can be invoked by first function as well.

Q1. js engine compiler 做了什麼事情出現提升的現象?
Q2. 為什麼要有 TDZ?
以下是一些原因為什麼最初沒有引入TDZ規則：

向後相容性： JavaScript的設計在很大程度上受到了早期版本的影響，包括ECMAScript 3和更早的版本。 在引入嚴格的TDZ規則之前，為了確保向後相容性，需要考慮已經存在的程式碼，因此不容易引入這種變更。

學習曲線： 引入更多的規則和嚴格性可能會增加語言的學習曲線，這不符合最初設計的目標，即創建一種易於上手的腳本語言。

逐步演化： 程式語言通常是逐步演化的。 隨著JavaScript應用程式的複雜性不斷增加，對於引入更多的規則和限制以提高程式碼品質變得更為重要。

隨著時間的推移，JavaScript社群認識到在程式碼中引入更嚴格的規則，如TDZ，可以改善程式碼的品質、可讀性和可維護性。這是為了使JavaScript更適合開發大規模應用程序，減少潛在錯誤並提高程式碼品質。

### 10/28 ---[Describe "the difference between a `cookie`, `sessionStorage` and `localStorage`."](https://www.greatfrontend.com/questions/quiz/describe-the-difference-between-a-cookie-sessionstorage-and-localstorage)
[8.Binary Search](https://leetcode.com/problems/binary-search/)
Time: 8:00 pm

## Reference
* [Grind 169 questions](https://www.techinterviewhandbook.org/grind75?hours=10&weeks=15)
* [greatfrontend](https://www.greatfrontend.com/prepare/quiz)

## 預計可以執行
一個月抽題考一次，最後那個禮拜考，共一題但要準備該月的總題數。兩人都要抽題但不能重複

每三個月依照月份各抽一題(共三題但要準備9題)