當我們開始寫程式時，常常會好奇：
電腦究竟是如何讀懂我的程式碼？又是怎麼一步步執行下去，產生預期的結果？
在 JavaScript 中，程式碼的執行順序就是由「控制流程結構」（Control Flow）來決定的。
這個概念非常基礎，但卻是寫出正確程式的第一步。
若不了解控制流程，程式碼即使語法正確，也可能得不到預期結果。
本文將從最簡單的「直線式控制流程」開始，透過詳細的範例、拆解與圖像化解釋，幫助你打好基礎，為學習更進階的判斷結構與迴圈做好準備。
什麼是控制流程？
程式執行像讀故事一樣
控制流程就是程式執行的順序。
在 JavaScript（以及大多數語言）中，程式碼通常是 從上到下、逐行執行 的。
這種執行方式就像閱讀一本故事書：第一行讀完再讀第二行，直到讀到最後一行。
這種「從頭到尾、沒有分叉」的結構，我們稱為 直線式控制流程。是所有程式控制流程中最基本、最簡單的型態。
直線式控制流程範例詳解
來看一段簡單的程式碼：
let theNumber = Number(prompt("Pick a number"));
console.log("Your number is the square root of " + theNumber * theNumber);這段程式碼包含兩行指令，讓我們一行一行拆解：
第一行：請使用者輸入數字
當 JavaScript 執行到這一行程式碼：
let theNumber = Number(prompt("Pick a number"));我們可以一步一步拆解它的執行邏輯：
遇到等號右邊，開始求值
程式語言在執行一行賦值語句（例如 let theNumber = ...）時，會先處理 等號右邊的運算，算出結果後，才會把結果存進左邊的變數。
因此程式會問自己：「等號右邊是什麼值？」
➡ 在這裡，等號右邊是 Number(prompt("Pick a number"))。
先執行內層函式：prompt("Pick a number")
在等號右邊的運算式中，prompt() 是 Number() 的參數。
👉 所以程式必須先執行 prompt("Pick a number")，拿到它的回傳值。
🔹 執行 prompt("Pick a number") 的效果是：
- 瀏覽器跳出一個輸入框。
- 程式暫停，等待使用者輸入並按下確認（OK）。
- 使用者輸入值（例如：
5）。 - 回傳值是一個字串（例如：
"5"）。
⚠ 注意這裡的「暫停」行為
prompt 是同步（blocking）的函式，它會讓整個程式執行暫停，直到使用者輸入資料並送出。
程式不會往下跑任何其他程式碼，直到有回傳值。
Number() 將字串轉成數字
接著，程式會把 prompt 的回傳值（例如 "5"）當作 Number() 的輸入。
執行 Number("5")，結果是數字 5。
把數字結果指定給變數
最後，程式將這個數字結果存進變數 theNumber：
let theNumber = 5;⚠ 為什麼從 prompt 開始？
程式是為了求出等號右邊的值（右邊的整個運算式），所以必須先從最內層的函式開始執行。
在這行程式中，最內層的函式就是 prompt()，它是 Number() 的參數。
你可以用一個「層層求值」的圖像來想像：
let theNumber = Number( prompt("Pick a number") )
↑ 先跑這裡
↑ 然後這裡程式執行順序是：
1️⃣ 執行 prompt("Pick a number") → 回傳 "5"
2️⃣ 執行 Number("5") → 回傳 5
3️⃣ 賦值 theNumber = 5
⚠ 為何要轉型？
因為 prompt 回傳的是字串（例如 "5"），如果不轉型，數學運算時可能會變成字串相加（像 "5" + "5" 結果是 "55"），而不是數字運算。
第二行：顯示數字平方結果
console.log("Your number is the square root of " + theNumber * theNumber);✅ 程式執行順序
1️⃣ theNumber * theNumber 計算輸入數字的平方，例如 5 * 5 = 25。
2️⃣ 將結果轉成字串後和文字拼接："Your number is the square root of 25"。
3️⃣ 用 console.log() 印出結果到瀏覽器的開發者工具主控台（Console）。
💡 注意運算順序
這行程式碼中，+ 和 * 混合在一起，JavaScript 會先算乘法（*），再處理字串加號（+）。所以 theNumber * theNumber 會先被計算完成。
Number() 與資料型別轉換的重要性
在這個範例中，我們透過 Number() 函式將使用者輸入的字串轉成數字。為什麼這麼做？
prompt 的回傳型別
prompt 永遠回傳字串型別。即使使用者輸入數字 7，回傳結果還是 "7"（字串）。字串不能直接做數學運算。
Number 的角色
Number("7") → 7（數字型別）。這樣程式才能進行數學運算，不會出錯。
類似的轉型函式
除了 Number()，你還會遇到：
String()：把資料轉成字串，例如String(123)→"123"Boolean()：把資料轉成布林值，例如Boolean(0)→false
了解型別轉換能避免常見錯誤，例如：
"5" + 5 // 結果是 "55"，因為是字串相加
Number("5") + 5 // 結果是 10，因為兩邊都是數字用圖像化理解控制流程
想像程式執行的流程，就像一條直線箭頭：
↓
↓
↓每一行程式就像箭頭經過的一個節點，執行完一行後，就往下一行走。
在簡單的程式中，流程是從上到下、沒有岔路的。但當我們日後學到 if 條件判斷、for 或 while 迴圈時，控制流程會開始出現分支與重複。
結語
控制流程結構是程式設計的基礎概念。
從直線式控制流程開始，打好基礎，未來你會更輕鬆進入條件判斷、迴圈、函式與非同步程式等進階主題。
別忘了多練習！每寫一小段程式、每做一次測試，你都會對程式的執行順序理解得更深刻。