###### tags: `學期一`

# 如何檢查我的作業程式碼品質？

>**學習成果與目標**
>・清楚知道如何判斷自己在「實作程式碼：有效率地猜中數字」寫出的程式品質、以及還有哪裡可以精進

恭喜你完成<a href="https://lighthouse.alphacamp.co/courses/39/assignments/921/submissions" target="_blank">實作程式碼：有效率地猜中數字</a>這份作業！相信你一定投注了相當多的心力完成接連三題的猜數字題組。

完成題組後，如果你對自己的成果仍懷有些許疑惑，又或者不太確定自己的程式是否還有可以再精進的部分，可以參考這個單元，我們以「實作程式碼：有效率地猜中數字」為例，為你列出三個檢查步驟，以及過去學長姐常踩到的地雷區 💣。

檢驗程式碼品質大略分為三個步驟：

- 步驟一：檢查程式是否能穩定符合規格
- 步驟二：檢查基本語法與程式碼撰寫風格
- 步驟三：檢查流程設計是否簡潔有效

這些資訊將有助於你檢視自己程式碼品質，寫出更漂亮的 code！

鼓勵你把程式碼用另一個分頁開啟，這樣在交叉檢查時會更方便 🤗

### 步驟一：檢查程式是否能穩定符合規格

##### 作業指定規格

將設計好的虛擬碼轉成對應的程式碼，讓電腦在 10 個回合內猜對 1~100 內的隨機指定數字。

##### 動作

1. 執行程式碼 5~10 次，檢驗是否能穩定地每次都在 10 個回合內猜中。
2. 💣 手動將答案指定為 1 和 100，測試程式是否會進入無窮迴圈。(若你的程式碼有這種狀況，可以參考<a href="https://lighthouse.alphacamp.co/courses/39/assignments/921/submissions/58279?batch_id=67&choice_cohort=all_cohort&from=other-submission&question_id=2414" target="_blank">這個</a>討論串。)

### 步驟二：檢查基本語法與程式碼撰寫風格

##### 檢查清單

<table>
<thead>
<tr>
<td>項目
</td>
<td>描述
</td>
<td>V
</td>
</tr>
</thead>
<tbody>
<tr>
<td>變數與運算子
</td>
<td>使用 <code>let/const</code> 宣告變數。使用嚴格的 <code>===</code>、<code>!==</code> 而非 <code>==</code> 、<code>!=</code> 。
(參考單元： <a href="https://lighthouse.alphacamp.co/courses/39/units/5489" target="_blank">變數</a>、<a href="https://lighthouse.alphacamp.co/courses/39/units/5491" target="_blank">運算子</a>)
</td>
<td></td>
</tr>
<tr>
<td>Math 函式庫
</td>
<td>正確理解與使用的 Math 函式：
<ul>
<li><code>Math.random</code> - 取亂數，會回傳 0～1 (不包括 1) 的隨機數字</li>
<li><code>Math.floor</code> - 自動捨去小數點</li>
</ul>
有些同學查資料後，使用到 <code>Math.round</code> (四捨五入)、<code>Math.ceil</code> (小數點自動進位) 等，也是很棒的做法，有興趣可以先到<a href="https://www.w3schools.com/js/js_math.asp" target="_blank">文件</a>認識一下其他函式，學期 2-1 我們也會再多做介紹。
</td>
<td></td>
</tr>
<tr>
<td>註解
</td>
<td>有適當的程式碼註解，能夠幫助他人有效率地理解這段程式碼。
(參考單元：<a href="https://lighthouse.alphacamp.co/courses/39/units/7366" target="_blank">程式碼註解</a>)
</td>
<td></td>
</tr>
<tr>
<td>縮排、換行與空白鍵
</td>
<td>有適當地縮排、空白與換行，不加分號。
(參考單元： <a href="https://lighthouse.alphacamp.co/courses/39/units/5503" target="_blank">Coding Style：縮排與空白鍵</a>)
</td>
<td></td>
</tr>
<tr>
<td>變數命名
</td>
<td>變數命名有合理語意，他人一眼看過去就讀懂這個變數是什麼。
<ul>
<li>好的例子：answer、guess、round、count、max、minimumNumber </li>
<li>不好的例子：a、g、i、mn</li>
</ul>
</td>
<td></td>
</tr>
</tbody>
</table>

##### 常見錯誤 💣

以下列舉 4 項常見錯誤，你可以看看自己是否也有相同問題：

<span><strong>1. 變數沒有宣告就使用</span></strong>

<div style="width:100%"> <a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/15461/ExportedContentImage_00.png" target="_blank"><img style="max-width:700px;width:100%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/15461/ExportedContentImage_00.png"></a></div>

<span><strong> 2. 在全域和區域重複宣告變數，完整程式碼可參考<a href="https://repl.it/@alphacamp/A9wrong-samplescopre" target="_blank">這個例子</a></span></strong>

<div style="width:100%"> <a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/15462/ExportedContentImage_01.png" target="_blank"><img style="max-width:700px;width:100%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/15462/ExportedContentImage_01.png"></a></div>

* 參考單元：<a href="https://lighthouse.alphacamp.co/courses/39/units/7367" target="_blank">作用範圍：變數到底在哪裡有效？</a>

<span><strong>3. 隨機產生的答案落在 0~99 範圍，但題目要求 1~100，需要加 1</span></strong>

<div style="width:100%"> <a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/15463/ExportedContentImage_02.png" target="_blank"><img style="max-width:700px;width:100%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/15463/ExportedContentImage_02.png"></a></div>

<span><strong>4. Math 方法理解錯誤</span></strong>

<div style="width:100%"> <a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/15464/ExportedContentImage_03.png" target="_blank"><img style="max-width:700px;width:100%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/15464/ExportedContentImage_03.png"></a></div>

* 參考文件：<a href="https://www.w3schools.com/js/js_math.asp" target="_blank">W3school - JavaScript Math Object</a>

### 步驟三：檢查流程設計是否簡潔有效

##### 理想流程圖

<div style="width:100%"> <a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/15465/ExportedContentImage_04.png" target="_blank"><img style="max-width:700px;width:100%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/15465/ExportedContentImage_04.png"></a></div>

##### 辯證流程

你的程式碼和理想流程是否一致？如果不一致，你的解法是合理且必要的嗎？或者，其實有可以再精簡的空間？建議思考流程如下：

<div style="width:100%"> <a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/15466/ExportedContentImage_05.png" target="_blank"><img style="max-width:700px;width:100%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/15466/ExportedContentImage_05.png"></a></div>

比起單純只是盯著程式碼看，這樣的思考與辯證流程更容易發現自己邏輯上的盲點。

##### 常見錯誤 💣

<span><strong>1. 電腦第一次猜測的時候，仍舊是猜一個隨機數字：</span></strong>

<div style="width:100%"> <a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/15467/ExportedContentImage_06.png" target="_blank"><img style="max-width:700px;width:100%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/15467/ExportedContentImage_06.png"></a></div>

雖然還是能完成指定任務，但效率會稍微遜色一點。

<span><strong>2. 多餘的條件判斷，例如：</span></strong>

<div style="width:100%"> <a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/15468/ExportedContentImage_07.png" target="_blank"><img style="max-width:700px;width:100%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/15468/ExportedContentImage_07.png"></a></div>

### 沒有標準答案，但可能有更好的方法

程式碼通常是為了解決某個問題而生，沒有標準解，只有能不能成功解決問題。而成功解決問題之後，人們就會再繼續探討效率和品質，以及後續好不好維護、對他人來說好不好讀，這些課題我們會在後續的旅途中一一攻略。

### 你的下一步

希望在完成上述的嚴格檢查和掃雷後，有幫助你更了解自己的學習成果，未來在觀摩同學作業時，也可以試著從這些面向下手去評估跟學習。

如果一切順利，不要忘記快快進到下個章節 <a href="https://lighthouse.alphacamp.co/courses/39/units/5541" target="_blank">S3 網站設計與介面實作</a>開啟介面部分的學習；若還是有些不確定的地方想澄清，歡迎在此單元下方提問！