# 🏅 5/11 (二) 每日任務 Day 12
###### tags: `Vue 直播班 - 2021 夏季班`

參考文章: https://wcc723.github.io/development/2020/09/20/js-semi/

題目 (直接貼上答案)
---
1. 請修正以下程式碼錯誤，並執行 console.log
2. 請嘗試說明以下程式碼錯誤的原因

let saySomething = '小姐一個人嗎 :D'
(function() {
  console.log(saySomething);
})

回報流程
---
請同學依照下圖教學觀看解答、回報答案:


回報格式如下圖，請在「回報區」使用註解回報答案 (為了統計人數，請同學依序加上「報數」)


<!-- 解答

1. 應該更正為:
let saySomething = '小姐一個人嗎 :D'
;(function() {
console.log(saySomething);
})()

2.
a. 使用立即函式需要在結尾的部分加入一組 () 才會正確執行。
b. 由於題目的 JS 程式碼在運行時會被視為同一行，如下:

let saySomething = '小姐一個人嗎 :D'(function() {console.log(saySomething);})

如果要避免此錯誤就需要使用分號將其隔開。
-->

回報區
---
<!-- 1:alpha
let saySomething = '小姐一個人嗎 :D'
;(function() {
console.log(saySomething);
})
需加分號不然會判斷宣告以及函式為同一行執行而導致顯示錯誤
-->

<!-- 2:Lin
(1)https://codepen.io/linchinhsuan/pen/gOmaLyd?editors=0012
(2)因為原先第二行是 '('開始，因此 ASI 不會生效，會被判讀為
let saySomething = '小姐一個人嗎 :D'(function(){});
但並沒有'小姐一個人嗎 :D'這個function
-->

<!-- 3:Harold
1. 請修正以下程式碼錯誤，並執行 console.log

let saySomething = '小姐一個人嗎 :D'
;(function() {
  console.log(saySomething);
})();

2. 請嘗試說明以下程式碼錯誤的原因
第一行結尾沒分號，遇到第二行開頭是`(`被視為同一行，因此ASI不會自動加分號所以會出現錯誤。
-->

<!-- 4:Jasmin
let saySomething = '小姐一個人嗎 :D';
(function() {
console.log(saySomething);
})()

2.需在變數後面加分號
-->

<!-- 5: Alysa Chan
Q1. 應該修改為：
let saySomething = '小姐一個人嗎 :D';
(function() {
console.log(saySomething);
})()

Q2.
1. 立即函式後面需要加上()才會執行
2. let saySomething = '小姐一個人嗎 :D' 後要加上分號，與(function() {
console.log(saySomething);}) 隔開
否則JS會解析為：
let saySomething = '小姐一個人嗎 :D'(function() {
console.log(saySomething);
})
這會把'小姐一個人嗎 :D'當成一個function，因此會出現 Uncaught TypeError: "小姐一個人嗎 :D" is not a function 這個錯誤。

-->

<!-- 6:Eric-小偉哥
(1)
[codepen-5/11](https://codepen.io/ericLoveDesign/pen/NWpGdNQ?editors=1111)

let saySomething = '小姐一個人嗎 :D'; //<-- 修正1, 加;
(function() {
  console.log(saySomething);
})() //<-- 修正2, 加()以呼叫宣告好的function

(2)
- 修正1: 加分號，讓編譯器了解程式碼結束段落，不會與後面的小括號搞混
- 修正2: 加()以呼叫宣告好的function

-->

<!-- 7:Jordan Tseng

1.
let saySomething = '小姐一個人嗎 :D'
;(function() {
console.log(saySomething)
})

2. 由於沒加分號，小括弧開頭的程式碼，參照ASI不會自動在前一行加上分號，會導致兩行連在一起，所以執行錯誤 Uncaught TypeError。

因此我們可以選擇在這種判讀時不會自動加上分號的程式碼最前面，手動加上分號確保執行不會錯誤。

-->

<!-- 8: Vic
let saySomething = '小姐一個人嗎 :D' ; // 1.
(function() {
console.log(saySomething);
})() // 2.
// 1. 未加分號時，會連同下面程式碼一起執行
// 2. 函式未執行，須加上()，也就是立即函式 -->

<!-- 9.小魚
(1).let saySomething = '小姐一個人嗎 :D'; //未加入分號
(function() {
console.log(saySomething);
})
(2).變數saySomething後面未加入分號，後面立即函式會變成呼叫函式，導致console.log會顯示'小姐一個人嗎 :D' is not a function
-->

<!-- 9:leolee
https://codepen.io/nekorice/pen/WNprejK
// 請嘗試說明以下程式碼錯誤的原因
// let saySomething = '小姐一個人嗎 :D'
// (function() {
// console.log(saySomething);
// })
// 未加分號的關係，網頁將'小姐一個人嗎 :D'理解成執行函式的變數

// 請修正以下程式碼錯誤，並執行 console.log
let saySomething = '小姐一個人嗎 :D';
(function() {
console.log(saySomething);
})();
// 於 let saySomething = '小姐一個人嗎 :D' 的最後尾加上;分號，讓網頁理解與下方函式是不同code
// 於
// (function() {
// console.log(saySomething);
// })
// 的最後尾加上()，讓函式執行。
-->

<!-- 10:yijun
1.
應改為:
let saySomething = '小姐一個人嗎 :D';
(function() {
console.log(saySomething);
})()
2.
(1)因為第二行是括號開頭，所以第一行最後要加上分號，不然會視為同一段程式碼而出錯。
(2)第二行是立即函式，最後面要加上括號才行。
-->

<!-- 11: Trsunyeng Yu
// Uncaught TypeError: "小姐一個人嗎 :D" is not a function
// 1. 少了分號換行
let saySomething = '小姐一個人嗎 :D';

// 2. Grouping Operator 將函式包起來，存放在記憶體中，並不執行，
// 要定義後立刻執行，需在最後面加上 () 。
// 立即呼叫函式 IIFEs : Immediately Invoked Functions Expressions
(() => {console.log(saySomething)})();
-->

<!-- 12: 圈圈
1.應修正為
let saySomething = '小姐一個人嗎 :D'
;(function() {
console.log(saySomething);
})()

2. ASI 會將部分斷行程式碼自動加入分號，讓其正常運行。但新的一行是 ( [ / 開始則不會加入分號且會報錯。遇到上述符號除了可在上一句句尾加分號外，也可在這些符號前加上分號。
另外立即函式要加上小括號才會執行。
-->

<!-- 13. Echo Hui
1. 以下程式碼已修正
let saySomething = '小姐一個人嗎 :D';
(function() {
console.log(saySomething);
})()

2. 請嘗試說明程式碼錯誤的原因
// 定義變數後要在最後加上分號
// Function 定義後, 要加上 () 呼叫 function才能執行console.log
-->

<!-- 14. Ted Kuo
1.
let saySomething = '小姐一個人嗎 :D';
(function() {
console.log(saySomething);
})();
2.
通常在 ASI 的機制下，斷行程式碼在運行時會自動加入分號。但部分情況不會自動加入，例如：新的一行以 "(" 為開頭時。
以這次的程式碼為例，實際運行時程式碼會被視為同一行，立即函式變成附加在字串上：
let saySomething = '小姐一個人嗎 :D'(function() {...})
因此會產生 Uncaught TypeError: "小姐一..." is not a function

-->

<!-- 15.陳sam
let saySomething = '小姐一個人嗎 :D'
(function() {
console.log(saySomething);
})//執行結果會是"小姐一個人嗎 :D" is not a function
2.在ASI機制下，斷行程式會自動加入分號，但這邊所呈現的是立即函式，因此()內的function，()後還要再加入();
-->

<!-- 16.Iven
應更正為
let saySomething = '小姐一個人嗎 :D';
(function() {
console.log(saySomething);
})();
let saySomething = '小姐一個人嗎 :D'後方或是立即函式前方應補上分號，不然系統會以為他們是同一行，運行結果會不如預期。而立即函式後方需加上()來執行函式。
-->

<!-- 17.Ethan
1.應更正為
let saySomething = '小姐一個人嗎 :D';
(function() {
console.log(saySomething);
})();

2.
a.宣告後面沒有分號會被視為同一行，運行會出錯。
b.需加入()來執行定義好的立即函式。
-->

<!-- 18.SeanLiu
1.應更正為

let saySomething = '小姐一個人嗎 :D';
(function() {
  console.log(saySomething);
})()

或是

let saySomething = '小姐一個人嗎 :D'

;(function() {
  console.log(saySomething);
})()

2.
a.宣告後面沒有分號會被視為同一行，運行會出錯: "小姐一個人嗎 :D" is not a function 。
b.需加入()來執行定義好的立即函式。
-->

<!-- 19. Wel
1.
let saySomething = '小姐一個人嗎 :D';
(function() {
console.log(saySomething);
})()
2.
let saySomething = '小姐一個人嗎 :D'
(function() {
console.log(saySomething);
})

let saySomething = '小姐一個人嗎 :D' 未加上分號導致程式直接連接到下一行，變成了下列程式碼
let saySomething = '小姐一個人嗎 :D'(function() {
console.log(saySomething);
})

-->

<!-- 20.Chiang
1.修正為：
let saySomething = '小姐一個人嗎 :D';//尾端加上;
(function() {
console.log(saySomething);
})
()//加上呼叫

2.錯誤原因：
a.如果沒有加上";"程式執行時會被當作同一行，'小姐一個人嗎 :D'會被當成函式
b.立即函式還須加上"()"才會執行
-->

<!-- 21.Larry
codePen
https://codepen.io/manpower0708/pen/mdWemVw?editors=1011
-->

<!--22: Yi Chieh
let saySomething = '小姐一個人嗎 :D'; // 少了";"結尾與下方函式隔開
(function() {
console.log(saySomething);
})(); // 此立即函式少了"();"呼叫執行
-->

<!--23: Alvin Chu
codepen:
https://codepen.io/wave99487chu/pen/NWpGjbB
-->

<!--24: Lina Chen
1. 由於立即函式不會自動補上分號(;)，造成程式碼運行時視為同一行，因此須在前一行結尾補上分號(;)。
2. 立即函式結尾需補上 () 才會呼叫執行。
須更正為：
let saySomething = '小姐一個人嗎 :D';
(function() {
console.log(saySomething);
})();
-->

<!--25: shoppingq
1.第二行(function()前應加上分號
2.函式結尾應加上()以執行
-->

<!--26: Joe Kuo
(1) let saySomething = '小姐一個人嗎 :D';
(function() {
console.log(saySomething);
})

(2) let saySomething = '小姐一個人嗎 :D'
(function() {
console.log(saySomething);
})
上述程式碼會被視為同一行，如下：
let saySomething = '小姐一個人嗎 :D'(function(){...})
會造成 `Uncaught TypeError: "小姐一個人嗎 :D" is not a function`這個錯誤，
避免此錯誤必須使用分號將其隔開
-->

<!-- 27: Sec
1. let saySomething = '小姐一個人嗎 :D';
2. saySomething变数宣告后若没有加上;, 新的一行如果是以 (), [], / 开头的话 JS 是不会自动帮忙加上;
-->

<!-- 28: peter.chen1024
// 1. 新的一行是 (、[、/ 開始，ASI機制不會自動加入';'斷行
// 2. 立即執行函式最後要加上()
let saySomething = '小姐一個人嗎 :D';
(function(){
console.log(saySomething);
})()

-->

<!--29:WuJungHan
1.let saySomething = '小姐一個人嗎 :D';
;(function() {
console.log(saySomething);
})()
2.'小姐一個人嗎 :D'後方未加; & 立即函式後方執行需加()
-->

<!--30:Carol
1.
let saySomething = '小姐一個人嗎 :D';
最後加分號
2.
(function() {
console.log(saySomething);
})();
最後需加()
-->

<!--31: Amanda Chiang
1.
let saySomething = '小姐一個人嗎 :D';
(function() {
console.log(saySomething);
})();

2.
在宣告變數的過程中應在結尾加上分號 ; 表示一行的結束。
而若是需要函式能立即執行，應在尾端加上()。
-->

<!-- 32: youting
1. let saySomething = '小姐一個人嗎 :D';
(function() {
console.log(saySomething);
})()

2. 沒有補上分號會視為同一行，會解讀為 '小姐一個人嗎 :D'()，被當成函式執行但此函式並不存在
執行IIFE 立即函式需加上 () 才會呼叫
-->

<!-- 33: Jay
1. let saySomething = '小姐一個人嗎 :D';
(function() {
console.log(saySomething);
})()
2. 第一行沒有加分號，由於新的一行是(開頭，所以 ASI 不會自動補分號
函式宣告完沒有呼叫，所以 console.log 沒有執行
-->

<!-- 34: Erica
1. 在立即函式前加上分號，後方加上 ()
let saySomething = '小姐一個人嗎 :D'
;(function() {
console.log(saySomething);
})()

2. 在通常情況下，ASI 機制會自動加上分號
但是立即函式並不會，如原本題目就會變成變成同一行造成錯誤。
let saySomething = '...' (function(){})
要修正這個問題，就必須在函式前面加上分號。
而立即函式要在結尾加上 () 才會呼叫執行。
-->

<!-- 35:Dah
1.saySomething 後要加分號
2.呼叫function 後要補上括號否則就是呼叫方法()
let saySomething = '小姐一個人嗎 :D';
(function() {
console.log(saySomething);
})()
-->

<!-- 36:Alicia Lo
1.let saySomething = '小姐一個人嗎 :D';
(function() {
console.log(saySomething);
})()
2.因為第一句saySomething宣告並沒有在尾部打分號，而後面又與函式相連，因此讓程式誤以為這兩句是同一行，後面的立即函式()會附加在前一句上，故出現Uncaught TypeError: "小姐一個人嗎 :D" is not a function 的訊息。另外題目立即函式尾部並未加上()，故並未自動執行呼叫，必須要加上()程式才能自動呼叫函式。
-->

<!-- 37:Echo
let saySomething = '小姐一個人嗎 :D';
(function() {
console.log(saySomething);
})();

第一個變數命名最後要加上分號，不然會被當成同一行
第二個立即函式後面要加上括號才會執行
-->

<!-- 38:Eva lin
1.let saySomething = '小姐一個人嗎 :D';
(function(){
console.log(saySomething);
})();

2.題目宣告的變數與函式運行時被視為同一行，如果要避免此錯誤就需要使用分號將其隔開

<!-- 39: Wendy Li
1. 請修正以下程式碼錯誤，並執行 console.log
let saySomething = '小姐一個人嗎 :D';
(function() {
console.log(saySomething);
})

2. 請嘗試說明以下程式碼錯誤的原因
因為是立即函式, 在ASI機制狀態下如果沒有分號會出錯
-->

<!--40: YOYO
原始:
let saySomething = '小姐一個人嗎 :D'
(function() {
console.log(saySomething);
})

第一點:第一行程式碼後面沒有加上分號,所以會連接著下一行程式碼一起執行。
第二點:立即函式尾端需要加上()才可以執行。

修改後:
let saySomething = '小姐一個人嗎 :D';
(function() {
console.log(saySomething);
})();
-->

<!--41: jimmyFang

修改後:
let saySomething = '小姐一個人嗎 :D'
;(function() {
console.log(saySomething);
})()

a.在語句末端或前方加上分號，讓編輯器判讀結束段落，不會讓前後語句搞混，傳出錯誤訊息
b.立即函示必須在結尾加上()才會執行
-->

<!--42: Oober
更正為:
let saySomething = '小姐一個人嗎 :D'
;(function() {
console.log(saySomething);
})()
a. 使用立即函式需要在結尾的部分加入一組 () 才會正確執行。
b. 在程式碼最後或前方加上分號。
-->

<!--43: Jack
Ans:
let saySomething = '小姐一個人嗎 :D'
(function() {
console.log(saySomething);
})
使用立即函式時需加上（）
程式碼結尾需加上分號，沒加會以為是接連下一行執行
-->

<!--43: Jessie Cheng

let saySomething = '小姐一個人嗎 :D';
(function () {
console.log(saySomething);
})()

// 當 JS 語句沒有加入分號時，預設會因 ASI(Automatic Semicolon Insertion) 啟用，而自動加入分號。但若碰到新的一行是 ( 開頭，ASI 不會啟用，導致與上一行視為同一行而無法順利執行
// IIFE 立即函式少寫 ()，要加上才執行
-->

<!--44: Ed Haung
1.修正後:
let saySomething = '小姐一個人嗎 :D';
(function() {
console.log(saySomething);
})()

2.因為 ASI自動加入分號的關係，第一行跟第二行沒加分號，會被視為同一行，而函式是立即函式最後面要加 ()
-->

<!-- 45: Stacey Huang
1. 修正後:
let saySomething = '小姐一個人嗎 :D';
(function() {
console.log(saySomething);
})()
2. 遇到(、[、/ 這種開頭,ASI並不會自動加入分號,所以程式碼在執行時會被視同在同一行而出錯;此外IIFE立即函式並未加入()

-->

<!-- 46: Jrhung-Tsai
1. 修正後:
let saySomething = '小姐一個人嗎 :D';
(function() {
console.log(saySomething);
})()
2. 說明:
2-1.由於自動補上分號(Automatic Semicolon Insertion : ASI)特性，故'小姐一個人嗎 :D'會被誤認為函示而導致出錯，所以在第一行結尾加上分號才能使saySomething成功宣告賦值

2-2 IIFE區分二部分:
2-2-1
第一部分是使用Grouping Operator () 包起來的 anonymous function，意即
(function() {
console.log(saySomething);
})
第二個部分是馬上執行 function 的 expression ()，JavaScript 引擎看到它就會立刻轉譯該 function。
因此需補上() 以調用該函示，意即
(function() {
console.log(saySomething);
})()
-->

<!-- 47: Valerie
let saySomething = '小姐一個人嗎 :D'; //加上分號，不然會與後方程式碼視為同一行
(function() {
console.log(saySomething);
})()//立即函式，需要加上小括弧才能呼叫
-->

<!-- 報數 48： RitaHunag

let saySometing = '小姐一個人嗎 :D'
;(function(){
console.log(saySometing);
})()
變數 與『立即函數』之間要用 『；』號隔開，並在函數後方加上『()』才會執行。

-->
<!-- 49:Poseidon
這個錯誤主要原因是上述程式碼運行時被視為同一行
(function() {
console.log(saySomething);
})()
-->

<!-- 50: Izumi 泉
https://codepen.io/izumi-dev/pen/gOgEZzM
-->

<!-- 51: 阿倫
1.
應修正成:
let saySomething = '小姐一個人嗎 :D'
;(function() {
console.log(saySomething);
})()
2.
變數與立即函數中間沒加分號，電腦會誤以為是同一行，因此無法執行。
立即函式最後沒有被呼叫。
-->

<!-- 52:涂阿銘
let saySomething = '小姐一個人嗎 :D' // 未加分號
(function() { // 以(、[、/ 為開頭的話不會自動加入分號
console.log(saySomething);
}) // 未加入 (); 因此函式不會被呼叫出來

// 修正過後
let saySomething = '小姐一個人嗎 :D'
;(function() {
console.log(saySomething);
})();
-->

<!-- 53:twoz
1.
let saySomething = "小姐一個人嗎 :D";
(function () {
console.log(saySomething);
})();
2. 如果立即函示前面沒有分號的話，會接到上一行的尾端，依附到前面的code，就會變成
let saySomething =
"小姐一個人嗎 :D"(function () {
console.log(saySomething);
})();
因此需要加分號
-->

<!--54:Fred Chang
1. let saySomething = '小姐一個人嗎 :D';
(function() {
console.log(saySomething);
})();
2.
a.未加分號會視為同一行
b.立即函式需在最後加上();
-->

<!-- 55 : Eyan
1.
let saySomething = '小姐一個人嗎 :D';
(function() {
console.log(saySomething);
})();

2.
未加分號會當成同一行運行
函式結束需加 ();
-->

<!-- 56:家齊
1.let saySomething = '小姐一個人 :D';
(function(){
console.log(saySomething);
})();

2.加入分號將其分成兩行程式碼，並在函式尾端加上括號，表示立刻呼叫
-->

<!-- 57:Tofu Tseng
1.應該要改成：
let saySomething = '小姐一個人嗎 :D'; // 這行宣告要加 ;
(function() {
console.log(saySomething);
})(); // 加上() 變成 IIFE 立即函式

2.因為 let saySomething = '小姐一個人嗎 :D' 結尾沒有分號 ; 對 JavaScript 來說是同一行，自然會報錯。

如果結尾不加上 () 就單純只是 function 的宣告，跑不出 console.log() 變數 saySomething 定義的文字。
(function() {
console.log(saySomething);
})
-->

<!-- 58:allem chou

1.立即函式修正
立即函式要加上()在function結尾;
且有作用域問題 故須將 變數放入立即函式內部調用

(function() {
let saySomething = '小姐一個人嗎 :D'
console.log(saySomething);
})();

2.也可以改為箭頭函式

(() => {
let saySomething = '小姐一個人嗎 :D'
console.log(saySomething)
})();

3.若是要修正錯誤可以直接加分號;

let saySomething = '小姐一個人嗎 :D';
(function() {
console.log(saySomething);
})

-->

<!-- 59:Carol

1.這行最後面加分號let saySomething = '小姐一個人嗎 :D';
2.立即函數要加入()

-->
<!-- 60:moitw
1.
let saySomething = '小姐一個人嗎 :D'; // 加分號
(function() {
console.log(saySomething);
})
2. 立即函式由 (函式)(參數)，也可改成箭頭函式會較簡潔
let saySomething = '小姐一個人嗎 :D';
(()=> {
console.log(saySomething);
})();
-->

<!-- 61:Emily Hsi
1.let saySomething = '小姐一個人嗎 :D'; // 最後少加了一個分號，需補上。
2.立即函式結束後需加()，才有呼叫到該函式;
-->

<!-- 62: Amber
1.
let saySomething = '小姐一個人嗎 :D';
(function() {
console.log(saySomething);
})()
2.
(1)宣告後面沒有分號會被視為同一行，運行會出錯。
(2)立即函式後方需加上)來執行函式。
-->

<!-- 63: MM
1.let saySomething = '小姐一個人嗎 :D';
(function() {
console.log(saySomething);
})()

2. 變數saySomething後面未加入分號，後面立即函式會變成呼叫函式
-->