2024-11-04|閱讀時間 ‧ 約 0 分鐘

Day02 JavaScript Function（函數）

從今天開始往後的的內容會有許多的「註解」，程式不會執行被註解的內容，註解只是方便開發者辨識。JS內的註解主要有兩種。單行註解是在程式碼前方加上//，可以透過快捷鍵cmd(ctrl) + / 完成。多行註解則是用/* 及 */前後包夾要註解的內容。

轉換環境

從上個單元的經驗，有些人可能會發現：把JS程式碼寫在Console內是很不實際、不方便的。因為瀏覽器Console在你按下Enter時就會執行，可是我們不一定需要程式馬上執行。而且重新整理後，一切都消失殆盡了。所以在開始之前，我們必須先設置一個更好寫JavaScript的環境。

Codepen

CodePen是一個基於瀏覽器的寫程式工具，可以撰寫HTML、CSS、JavaScript並且即時預覽。非常適合小型專案或簡單的實驗。更棒的是，即使不登入也可以進行撰寫（最好還是登入把結果存起來）。

點進CodePen頁面後，按下Start Coding或Create New Pen。

按下Start Coding。

按下創建後，出現這樣的畫面，一側是寫程式區域，空白處則是預覽區域。

調整後可以看見左側畫面有HTML、CSS、JS三種類型，網站基本上就是由這三種語法結合而成。可以測試一下，在HTML框內隨便輸入文字，右方即時的出現了內容。

Codepen即時編譯了左方面板輸入的內容。

我們可以專注在JS的部分。用滑鼠拖曳的方式，拉大JS的面板，並隨便輸入一些字。

你會發現，我們的程式碼可以一次寫很多行，Codepen會幫我們一行一行的執行，就像其他真實世界JS的編譯器一樣。不像Console按下Enter一次執行一行，多了許多方便性。

其他

在實際的作業中，VSCode、Sublime Text以及最近很流行的Cursor等工具也是相當有名的，在使用這些工具時步驟稍微複雜一點，必須先在電腦內下載NodeJS，建立執行JavaScript的環境，才能讓JS程式碼在瀏覽器之外（你的電腦上）運行。我們的目標是了解JavaScript基礎的運作，CodePen已經是足夠好的解決方案。

接著討論今天的主題。

Function（函數）

Function是什麼

Function就像一個語言（英文、中文）中的動詞。我們可以透過function來告訴JavaScript應該執行什麼動作。

舉例來說，如果我們人是以JS來溝通的話，我們可以透過function來下指令。

用JavaScript來告訴人，執行eat、sleep指令。

顯然這幾行程式不會有用，因為JavaScript沒有預設的eat、sleep動作。

但JavaScript有其他的指令，試試看在CodePen上輸入alert()。

畫面中出現一個彈跳視窗，裡面有一行字「JavaScript執行跳出警告」。

你會發現，彈出視窗的訊息，就是我們放在alert()括號內的字。換句話說，我們可以在括號內傳入某些資料，讓function動作執行時，有個資料參考。這種傳給function的資料，稱為函數的「arguments(參數)」，也常看到文件簡稱成args。

創造自己的Function

除了預設的函數外，我們也可以創建自己的function。只需要告訴JavaScript這個function需要執行什麼動作即可。

創建一個基本的function，我們需要關鍵字function。

觀察function可以看見它的架構是：

function 名稱() {}

關鍵字(function)、名稱、小括弧、大括弧都是必須的。函數要執行的指令會接著寫在大括弧內。把大括弧換行只是習慣，也可以全部寫在同一行。

再接著把function的動作完成，我讓這個function做一個預設的alert。

定義好的function只會待在原地。如果要讓它真的執行，記得要呼叫它。

在function名稱後面加上()就可以實際使用它。

接下來可以在小括號內加上arguments(參數)，不像其他程式語言，參數不用指定類別。同時，我們可以為參數任意的取名字，這邊寫的是name，但你也可以寫x、theName...

字串'Erkin'被傳進function，以+連接其他字串顯示了出來。

這邊再提一次，在JS裡面字串用’’或””都是可以的，同時結尾有沒有加分號(;)都沒關係。（通常編譯器會配合formatter（格式工具）幫忙處理）

讓JS跟我們說兩次hi:

除原有的彈出視窗外，還多了「我是瀏覽器」的一次。也可能因為CodePen重新整理的時間有點誤差多看到幾次。但總而言之我們讓程式執行了兩次sayHi()。

可以放很多的變數，例如我把教學科目改成變數x，再加上單元編號y。

就會出現這樣的內容：

教學內容變成字串'JavaScript'，單元的數字變成數字2了。

從這個例子可以看到在JS裡，要怎麼定義function、變數要設幾個、用什麼型別，自由度是非常高的。你幾乎可以打造任何符合你所需的function。

小括號的重要性

有時候我們會看到function的名稱單獨出現，沒有小括號。有什麼差別呢？

找到function的名稱之後，在某些情況下不一定會直接用它，我們之後會看到實際的例子。把function比擬成現實生活的工具會更好理解一點。第一行就比如說你把螺絲起子拿來然後不做任何事情，第二行是你找到螺絲起子，而且用它來鎖螺絲。括號表示啟動那個function。之後如果你發現你明明寫了function，但它卻沒有任何作用。有可能是忘了加()。

為了方便識別，我在前面的單元談到console.log() 以及之後的內容講到function或method都加了()以方便辨識。但在這種「我只是討論到這些function，並不是真的要實際執行它」的情況，其實不該有用來啟動function的()。

小結

不只在JS，function在任何程式語言中都是相當重要的部分，因為它能夠將程式中的重複邏輯進行包裝，讓程式透過比較簡單的方式重複使用。從上面的例子可以看到「說兩次hi」需要用到的程式碼幾乎差不多，我們當然也可以透過複製貼上達成一樣效果，但如果需要用100次、1000次呢？重複的部分就會顯得很不必要撰寫，而且假如這個功能要變更（你別想了，一定會要改的），你會痛恨你之前用的是複製貼上而不是function。使用複製貼上的方法重複撰寫的可讀性、維護性都會很差，你可能會看不懂一堆重複的內容，或者改了其中99項忘了改某1項，這時候很難找到哪裡出了問題。所以可重複利用、很容易大量變更的function才會那麼重要。幾天之後我們還會談到更進階的function應用。記得，這裡的重點是了解function的骨架。

明天我們會講object，什麼是object？它可以用來做什麼？我們一步一步回答這些問題。