變數、資料型態以及算術運算式

傳送門：此系列文章「30 天 Javascript 從入門到進階」

變數

我們已經了解一個最簡單的程式是如何建立，以及知道電腦跑程式背後的原理了。為了正式開始學習怎麼寫一個程式，我們首先要了解變數（Variables）是怎麼一回事？

想像一下我們今天有個很簡單的工作，請你算出兩個整數 a 和 b 的和 a + b ，我們是如何操作做計算這個過程呢？

我們可能需要動筆算一下，或甚至心算得到答案。不過假設兩個數字都超級大，你可能不會想自己算，太麻煩了！今天剛好有個神奇的盒子，上面有一個洞，我們只要把寫好數字的球兩個一起丟入洞裡，就會有寫好算好相加的數字的球跑出來。

我們來實驗一下，假設今天想算 1234 + 5678 這兩數和，我們先是將 a 代換成 1234 再將 b 代換成 5678，然後把 a 和 b 寫在球上，接著丟進盒子，馬上就有一個寫成答案的球掉出來，我們就神奇地得到答案了！

a + b 中的 a 和 b 就稱為變數，沒錯這就是國中數學的定義！只要 a 和 b 代不一樣的數字，就是不一樣的兩數和。剛剛使用神奇盒子算 a + b 的步驟，其實就是電腦程式運作的步驟！電腦知道今天有 a 和 b 並且要做加法，並且得到 a 和 b 是什麼，然後他就可以快速計算，並得到結果，運算過程是計算機結構的細節，這邊我們想像就是有個神奇盒子就好。

現在我們將問題簡化成只剩一個變數 x + 5678，如果我們想要得到答案，勢必是將數字帶進去 x，我們可以帶入隨便一個數字，讓電腦可以很快幫我們算出結果。所以現在我們的問題就變成，那要怎麼把它變成電腦可以去算的樣子？

讓我們正式開始寫程式吧！順帶一提，接下來如果一開始看不懂，非常很正常，這時候先屏住心中的一些疑惑，繼續看下去，可能就會豁然開朗了喔！

檔案：simple_variables.js

let x = 1234;
let output = x + 5678;
console.log(output);

我們先建立一個檔案 simple_variables.js，並用 node 執行，看看會怎樣？

$ node simple_variables.js
6912

得到了 6912 這個數字。那這個數字是怎麼來的呢？我們來仔細解釋這三行程式碼的意義。

首先 let 關鍵字是建立一個「變數」，因為我們想要計算 x + 5678，所以先 let x 建立一個變數 x，又我們要給 x 變數賦予一個值，所以這邊寫了 let x = 1234;。到這邊程式中已經有了一個 x 值是 1234。

接著我們讓另外一個變數 output 當作是 x + 5678 計算結果，因為我們已經讓 x 是 1234 了，所以等於是讓 output 為 1234 + 5678 的結果。這邊要注意的是，在所有程式的設計上，變數一定在等號左邊，運算的式子一定在右邊。所以我們不能這樣寫：

x + 5678 = output // 錯的

儘管上面的式子感覺很合理，但是很遺憾的是，程式並不能這樣寫，我們只能將變數放在左邊。實際上電腦在處理 let output = x + 5678; 這行程式的時候，是先算右邊的 x + 5678 再將算出來的值賦予等號左邊的 output。這有個特別的術語，叫做左值（left value）與右值（right value）[^1]。不過在這邊我們只要先記住這個規則，寫程式的時候，變數放在左邊，運算放在右邊，並且右邊的運算會先進行，然後存在左邊的變數。

然後最後就是，我們把 output 藉由 console.log() 來印出來，console.log() 可以讓程式中的變數被顯示被印出來。在 NodeJS 中 console.log() 會把結果印出在終端機上，在瀏覽器上的話，我們可以在開發者工具中（Firefox 按下 F12 或 Cmd+Opt+k）看到輸出結果。簡而言之，就是把變數輸出來看。

變數型態

我們知道變數是什麼之後，其實變數不只可以是數字。他可以是整數、浮點數（帶小數點的數字）、字串、布林值甚至是物件。

你可以這樣想想看，現在有好多杯子，要喝茶就用茶杯，要喝酒用酒杯，要喝咖啡用馬克杯，每種飲料都必須用她專屬的杯子。在程式中，變數有他自己的型別（type），假設你一開始把 x 設為整數，他就會被放進整數的馬克杯。

白話來說的話，定義變數的型別要這樣宣告：

變數型別  變數名稱 = 變數的值

在強型別程式語言[^2]中，會明確界定不同馬克杯的區別，例如 C++ 中：

int x = 5       // 正確，設一個整數變數 x 為 5
int y = 5.5     // 錯誤！你不能在整數馬克杯中放入浮點數
float z = 5.5   // 正確，設一個浮點數變數 y 為 5.5

但是在 JS 中，所有變數被定義的時候，並不會在宣告時區分型別，一律都是用 const 或 let，差別在於宣告後能不能再改動值。

const是從 constant 來的，顧名思義不能再修改，所以你也可以說是用來定義「常數」：

const x = 5;
x = 6;       // 錯誤！ const 定義的變數不能改動！

而任何可以變動的數字就用 let 來定義，跑跑看下面程式碼，然後看看結果：

檔案：simple_variables_type.js

let num = 1234;
let floating_num = 12.34;
let string = "Hello";
let isStudent = true;

console.log(num); // 1234
console.log(floating_num); //12.34
console.log(string); // Hello
console.log(isStudent); // true

雖然印出來看不出來他是什麼型別，但你可以用 typeof 關鍵字來檢查

let num = 1234;
console.log(typeof num); // number

let floating_num = 12.34;
console.log(typeof num); // number

JS 中把整數跟浮點數都歸類在 number 型別中喔！

算術運算式

當我們定義變數之後，就可以對變數做操作，例如可以用四則運算，字串相加等等。

const name = "Tiger";
const birthday = 1996;
const thisYear = 2018;

const age = thisYear - birthday; // 2018 - 1996
let result = name + " is " + age + " years old." // "Tiger is 22 years old."

const height = 4;
const width = 6;

const area = height * width; // 24

注意 JS 中，數字跟字串作相加時，數字會自動被轉型成為字串。

事實上只要是不同型別的變數，相加都會被直接轉成字串表示。雖然都用 let 或 const 宣告，但其實本質是不一樣的，在強型別語言中是不允許這樣做，只是 JS 比較彈性，所以在衝突時會幫你都轉成字串。

參考與延伸資料

[^1]: Wiki: 值 (電腦科學)
[^2]: Wiki: 強弱型別
[^3]: W3C JS: variables