# 打造資深實力 - 你該學好的 JavaScript - 高見龍

{%hackmd rG6pzIawQKe5cHU4rycgYg %}

:::success
:::spoiler TableOfContent
[TOC]
:::

## 講者

- 高見龍 @eddiekao
- a.k.a Eddie
- [部落格](https://kaochenlong.com)
[小教室](https://www.youtube.com/channel/UClrlt5TMige_A_HKqpXd8GA)

投影片連結：https://speakerdeck.com/eddie/learn-javascript-well

> 學習不需要為公司，不為長官，不需要為別人，只為你**自己**
> [name=高見龍]

## 轉職軟體工程師？

484學會框架就能找到工程師工作！？
<span style="color:red; font-size:40px;">*****內容自行謹慎評估*****</span>
## 大綱

Javascript 的好與不好
那些有趣的 JavaScript 語法背後的故事
你該把技能點數點在這些地方！
新手上路到老馬識途

## JavaScript 的好跟不好

> 花惹發.., JavaScript 那什麼爛設計！(# ﾟДﾟ) [name=高見龍]

> 世界上只有兩種程式語言，一種被罵到臭頭，一種沒人在用 (OS: 嘴巴上罵，身體卻很誠實)
> [name=C++ 之父 Bjarne Stroustrup]

### JSLint
> 可能會讓你覺得自己不會寫程式！

function hello() {
    console.log('Hello, world!');
}

vs.

function hello()
{
    console.log('Hello, world!');
}

> 每種程式語言都有**好**跟**不好**的一面
> 只花十天就開發出來，就不要太苛刻(?)
不要只是跟著鄉民一起罵，要拳拳到肉（才會痛?

### 有趣語法

- JS 變數宣告
> 你知道變數**宣告**是怎麼回事嗎？
var、let、或都不要用（會掛到 window 物件下面）

  console.log(a);
  var a = 1;
  /* output: undefined */

變數提升 *Variable Hoisting*
- 編譯 vs. 直譯 Compilation vs. Interpretation
- 硬要區分的話，JavaScript 算直譯，但因為執行有分階段
- **建立期 v.s.執行期**
- 建立期
- (1A)註冊名稱(Identifire) + (1B)進行初始化
- 執行期
- 執行函數 / 變數賦值

a = 1;
console.log(a);

在建立這段1a時會給一個變數初始值，因此在建立conlog(a)是不會執行的
在第二階段執行期

var a = 1;
var a;
console.log(a);
// output: 1

if(false) {
    var a = 1;
}
console.log(a);
// output: undefined

- 另一種變數宣告 -- let

console.log(a);    // reference Error
let a = 1;
// 因為let不會有變數提升嗎？
// a會被蓋起來 TDZ

- 建立期
第一階段宣告1a 但第二階段不會跑1B，會有個蓋子蓋住a變出 tdz
- 執行期：
- 遇到 TDZ，拋出 reference error
暫時死區ＴＤＺ (*Temporary Dead Zone*)

let a = 1;
console.log(a);

<!-- code block 是用 `，不是 '(引號)喔 -->
第一階段1a被蓋子蓋起來了（ＴＤＺ），第二階段才有a=1

- let是新版的var?(有爭議，且不能完全替代)

## Function 宣告

<!-- 常數、變數、function跟招式一樣要先宣告才能用 -->

sayHello(); //這行不動

function sayHello() {
/**
 * 這邊 sayHello() 1a 1b在建立時都做完了，後面才執行2
 **/
 console.log('hello');
}

- 看到{}為物件 也是一個Block;

{
    // 這裏的"hello"不是key, 是 label
    hello: for(let i=0 ; i<10 ; i++) {
        if(i % 2 == 0) {
            continue hello;
        }
        console.log(i);
    }
}

- `+`加號還是十字架?
//coercion => 會被強制轉型轉出奇怪的結果

+'' // 0
+[] // 0
+{} // NaN
+-1 // -1
+true // 0
+null // 0

### 如何嘲笑JavaScript
三個都會動而且不會壞↓ <!-- 頭好痛 --><!--什麼爛語言wwww-->

[] + [] // ? -> ''空字串
// 空陣列加空陣列 依據JS手冊 會幫兩個物件做字串的轉型 然後會得到空字串
//[].toStriing() + [].toString()

[] + {} // ? -> '[object Object]'
// 用中括號以字串轉型前面得到空字串，後面會得到[object Object]的空字串

{} + [] // ? -> 0
// 被解釋成 Block 後面接上 +[]，會得到 0

`typeof NAN` 印出來會是 `Number`
`NAN`用來表示不是數字，但他本身是數型態型態還是數字型態型態型態型態型態型態型態型態字
[來源](https://www.facebook.com/08RealizeJS/photos/pcb.492025775040591/492025665040602/)

- 兩個等號跟三個等號差別？
> 型別（型態）不同

* 兩個等號：比較型態
* 三個等號：比較值
[來源]( https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Equality_comparisons_and_sameness)
* ref: 7.2.14章節

### 理解細節
就像尼特羅會長，雖然它存在過，但是沒人在乎他了。

## 你該把技能點數點在這些地方
> 技能點數有限
> 盡量點在 CP 值高的地方
- 如果要投資在JS的話...學工作較會用到的

### 深入 JavaScript
- 物件導向
JS：Prototype(其他語言：class)
- function / closure
函數/Closure
- `this`
~~我是誰~~
有箭頭函數跟沒箭頭函數
- 非同步
- ES6 / Module

### 該學前端框架嗎？該學哪一個？
> **最輕量化的框架 Vanilla.js**
> [name=聽眾]
- 除非你原生JS超強，還能不學嗎......

### 2020 還要不要學 jQuery?
- VAR 三大家
- (jQuery)時代的產物，透過jQuery去存取DOM元素(還是有意義)
- 隨著ES6被拔了但還是很多舊專案在用。

### 該學資料結構，演算法嗎？
<!-- 學啦 哪次不學 -->
- 當時間有限，也許這不是第一考量 (前端的話)
前端：可以之後再補

### 版本控制git：（非業配）JD都說需要啦

### Asset 打包工具

### 養成看文件，英文很重要

## 新手上路到老馬識途
- 不是科班畢業的...
- 素人轉職是有可能但並不輕鬆
- 講者本身也非本科系出身，但花了三年自己摸索
- 先學哪個語言
- 我要先學哪一款程式語言？
- 如果你有朋友是工程師 可以跟他學一樣的看看
- 不管是什麼鳥語言，但首先你要先有會程式語言的朋友
- 先拿到入門的門票，先跨過那道檻
- 做學問的方法
- 大部分的技術，都是為了解決特定問題
- 老馬識途之輸入篇
- 官網文件 ECMA （超無聊但有code可以看）<- EMCA 有扣? <- 是pseudocode吧?
- MDN (好一些而且有範例code)
- 理解細節
- 不要再相信沒有根據的說法了
- 讀書!

### 推薦書目
- You Don't Know JS系列(入門)
- 0陷阱!0誤解!8天重新認識JavaScript(入門)
- Eloquent JavaScript(進階)
- Efficient JavaScript(進階)

### 閱讀原始碼

跟著打程式碼，跟著抄
### 輸出
- 試著去教別人
- 講給阿嬤聽(?)
> 如果阿嬤都聽得懂，那應該是真的講得很清楚
- 錄影 ＋ 自言自語
- Side Project
- 寫文章當網紅(X)
- [uBIN網址縮小燈](https://ubin.io)
- IT鐵人賽

### 當你學會原理，你就會看到不同的世界

以上です！
---
## 聊天室.:* ﾟ*｡☆
> (´・ω・｀)　しょぼぼん。　
(╬ﾟдﾟ)▄︻┻┳═一 嘣～嘣～嘣～嘣～嘣～嘣～嘣
(☄◣ω◢)☄ 很兇喔
(~ ‾▿‾)~
(◔⊖◔)つ
征服宇宙，征服地球 (=^ ↀωↀ ^=)ฅ 喵喵喵喵喵

> 請愛用 const, let

> 
www找太快了8
聽到關鍵字就直接找了

> JS裡面亂加檢乘除結果自行負責
> JS其實是一種♂哲♂學
> 三位一體的語
> 我存在我又不存在--->種花冥國？--->幻夢境(New!!)
> 介於有跟沒有之間

> `NaN === NaN // false `（白眼
> 
> 

> 一個JavaScript規則各自表述(???)
> 尼特羅：都死多久了還被拿來當成梗
> 尼特羅表示：

> 人生好難
> 為啥我學了JS...
> 等等...有多少人還知道天堂的，笑出來會被發現是老人嗎
> 人生苦短愛用Python..等等...這裡JS場？！ 抱歉我走錯了XD
>> 同是迷因系Python工程師 一起貼貼(?)
>>> 沒錯！
> 每個人都忘記還有暴力牧師了!
暴力牧師：點力量錯了嗎？
> 亞絲娜表示？

>要學的太多了我學學投胎好了。
>>[老子學不動了](https://github.com/denoland/deno/issues/25)
>>不懂這著梗的點一下連結XD
>>人生重來槍（遞
>> 還可以順便轉生到異世界嗎？
>> 有很大機率投胎不會變成人喔...
>> 就算變成人也可能投胎在對岸...
>> 怕，我還是投胎成貓貓，每天只要可愛跟可惡就好(=^ ↀωↀ ^=)ฅ

>學習程式語言 之 從入門到入土
>>Mysql從刪庫到跑路
>>C語言從入門到放棄

>框架戰爭要開打了嗎
>到哪都有鄙視鏈 怕
維護的時候還是不得不學 jquery

> UI被要求要學前端框架正常嗎@@
這裡有一帖良藥，買了什麼框架就學會了
>

>非相關科系錯了嗎？
>當初我讀所謂的相關科系，我也沒有學任何程式語言啊XD ~~學校重心都放在商業軟體和ERP啊~~
> 資工也沒在教應用阿w

> 剛入門寫程式從新手到老手的過程
> 
> 
> 

> 窩不知道要唸 vite，不僅連主持人都唸錯，高見龍都唸錯，窩怎麼可能唸對

> Ｖ特！！！！！！　ヴィット！

> 葉佩沒關係～～再怎麼置入都比《我的婆婆》自然

> 阿罵表示：「我聽的懂喔」
>> JS台羅版要出了嗎

> 雙馬尾小姊姊好可愛
>>雙馬尾姊姊是ar那位嗎
> --現在回來看這共筆 迷因應該是最多的 怕.jpg--
###### tags: `MOPCON 2020`