Variables

大多時候應用 JavaScript 需要資料，像是購物網站需要被售出的貨物、購物車、付款；聊天室需要使用者、訊息、圖片等等，變數就是用來儲存需要的資料。

A variable

變數是用來儲存資料的。

宣告變數

let message;

儲存資料

message = 'Hello'; // store the string

同時宣告並儲存

let message = 'Hello!'; // define the variable and assign the value

alert(message); // Hello!

同時宣告多個變數

let user = 'John', age = 25, message = 'Hello';

let user = 'John'; // seperate define
let age = 25;
let message = 'Hello';

let user = 'John', // another style
  age = 25,
  message = 'Hello';
  
let user = 'John' // comma first
  , age = 25
  , message = 'Hello';

A real-life analogy

把變數想像成箱子，裡面可以放資料，可以丟掉舊資料，放新的資料。

let message;

message = 'Hello!';

message = 'World!'; // value changed

alert(message);

不同箱子可以放一樣的資料。

let hello = 'Hello world!';

let message;

// copy 'Hello world' from hello into message
message = hello;

// now two variables hold the same data
alert(hello); // Hello world!
alert(message); // Hello world!

有 functional programming languages，像是 Scala or Erlan ，一旦變數儲存資料就無法改變，要裝別的資料要重新命名變數 ( 新的箱子 )。

Variable naming

命名變數有幾項限制：

• 變數名稱只能用字母、數字、$、_

• 有多個單字通常使用 camelCase 命名

• 第一個字不能是數字

• 有分大小寫

• 可以用其他語言，但不推薦，因為可能有其他國家的人要閱讀。

• 有幾個名稱 list of reserved words 已經被使用，無法作為變數。

在以前可以不用宣告就使用變數，用 "use strict" 則無法。

// note: no "use strict" in this example

num = 5; // the variable "num" is created if it didn't exist

alert(num); // 5

"use strict";

num = 5; // error: num is not defined

Constants

宣告值不變的變數用const。

用const儲存很難記的資料，使用大寫跟 _ 命名，這樣的好處是比較好記、不會打錯、有意義。

const COLOR_RED = "#F00";
const COLOR_GREEN = "#0F0";
const COLOR_BLUE = "#00F";
const COLOR_ORANGE = "#FF7F00";

// ...when we need to pick a color
let color = COLOR_ORANGE;
alert(color); // #FF7F00

用大寫命名的時機：在執行前需要的變數，有些變數是在計算時才出現，就不需要用大寫。

Name things right

變數名稱要乾淨、有意義、描述儲存的值，從命名變數可以區別是新手或老手，好的變數名稱比較好維護。命名變數有以下規則：

• 用普通人讀得懂的名稱

• 不要用過短的縮寫像是 a、b、c

• 盡量描述並且有意義，不好的名稱像 data、value

• 團隊統一特定的變數名稱，像 user vs visitor vs manintown。

有一些懶惰的工程師會重複使用變數，但這會造成不知道變數裡存放的資料是什麼，不一樣的東西丟進一樣的箱子，這會需要更長時間 debug，現在有打包工具可以簡化 JavaScript，所以不需要擔心新增新的變數會造成效能問題。