[ week 2 ] 來打造 JaveScript 的基礎 - 變數 與 型別

變數

在程式設計中，一個 ＝ 等號 是代表「 賦值 」 的意思，
var box = 123 就是把「 123 」這個值，放入 box 這個東西裡，
所以當我們console.log(box)，得到的東西就會是 123。

特別注意

• 在 JaveScript 中，英文的大小寫是不一樣的，
  所以你也可以另外宣告 var BOX = 456，console.log(BOX)，
  得到的東西就會是 456。

• 而且宣告變數是不能用數字作為開頭，例如：var 1one = 1，是會出錯的

當你已經var big宣告一個東西，但並未賦予它值的話，我們console.log(big)，得到的東西就會是 undefined。

當你試圖console.log(nothing) 你未曾宣告過的東西，回傳的訊息就會是 nothing is not defined。

undefined 與 not defined 差異

undefined : 有宣告過，但未賦予它值
not defined : 未曾宣告的東西

變數的命名方式

有兩種方法，重點是要統一方法，而且不要亂命名，最好是清楚好懂的（語意化的方式）

1. Underscore ＿底線＿
   例如： var this_is_a_box = 10

2. Camel-Case 駝峰式命名
   例如： var thisIsABox = 10

簡寫 ++ 與 -- 來了

首先，先提到簡寫算式的部分

var a = 0
a = a + 5
console.log (a) => 得到的值就會是 5

我們其實可以將a = a + 5，簡寫成a += 5是一樣的意思

• ++
  特別的是在 JavaScript 中，a = a + 1 ，不僅可以寫成 a +＝ 1，也可以直接縮寫成a++

       a = a + 1
  等於    a += 1
  又等於   a++
  

• --
  相對的 -- ，就是減 1 的意思拉。

會有這樣子的簡寫，是因為在程式語言中，很長會使用到 ＋1 、 －１ 的運算值，所以乾脆就給他一個簡寫的方式

a++ ++a 差異
a++ 先執行完，原本的算式，在進行 a+=1
++a 先執行 a+=1 完，再進行原本的算式

資料結構與型別

在最新的 ECMAScript 公告標準的判定的資料結構與型別共有九種，大致上可分為兩種原始值 primitive 的型別與後來延伸的資料結構，如下資料來源ＭＤＮ

• 原始值 primitive ，可以使用 typeof operator 確定型別

  • undefined : typeof instance === "undefined"
  • Boolean : typeof instance === "boolean"，true or false
  • Number : typeof instance === "number"
  • String : typeof instance === "string"
  • BigInt : typeof instance === "bigint"
  • Symbol : typeof instance === "symbol"

• 其他

  • null :蠻特別的是 null ，在使用 typeof instance === "object" ，null 得到型別會是 object
  • Object : typeof instance === "object"
  • Function ： non data structure, though it also answers for typeof operator: typeof instance === "function"

Array 陣列

在原始的 JavaScript 並沒有 array 這個型別，陣列內可放字串、數字、物件，就是集合大家聚在一起的方法，如果使用 typeof 判別型別，回傳會是 "object"型態。

陣列的呈現方式，是 [ ] 中括號。

Object 物件

物件的呈現方式是 {} 大括號，物件可以搭配陣列做使用，因此陣列中可包含物件，如下

var data = []
var nick = {
    key 屬性名稱 : 'value' 內容 ,
    name: 'nick',  
    birth : '1991/12/13/'
}
data.push(nick)

當我們console.log(data[0])，就會印出 nick 的內容
要印出陣列內，key 的 value 值，表示法有兩種，例如

1. 點的方式

   data[0].key 
   nick.birth
   

2. 類似陣列的方式 ，如果要動態更改可以，使用變數，建議使用這種方式

   nick['birth']
   //
   var item = 'name'
   nick[item] 會帶入 item 這個變數，算是就會等同於 nick['name']
   

> 切記每個 key 的間隔一定要有 「 , 」逗號做區隔

真正理解變數

使用 typeof 辨別型別， array 與 object 會回傳 ”object“ ，所以我們可以把物件與陣列理解成相同的作法。

在 JavaScript 中，宣告「 陣列 」與「 物件 」時，可以理解成
變數是對「 暫存位置（電腦中記憶體位置）」，指向同一個物件或陣列，
但若對整個變數「 賦予新的值 」，那就會改變指向新的物件，兩者就不會相同。

var obj = {
    a:1,
    b:2,
}
var obj2 = obj  宣告 obj2 就是 obj 時，電腦就會自動去讀取 obj 的暫存位置並帶入物件的值，
console.log (obj2 === obj)  此時會回傳 true

obj2 = {    我們重新宣告 obj2 並賦予它新的值時，此的 obj2 就已經改變，與 obj
    c:23,   的暫存位置不相同，簡單來說就是 obj2 已經是另一個新的東西
    d:12,
}
console.log (obj2 === obj)  此時會回傳 false

萬年經典題 == vs ===

兩者相差在＝＝＝是嚴格等於，所以會考量「型別」，強烈建議在寫 JavaScript 都使用三個等於，因為在 debugger 時，會比較快判別出，是哪段程式出錯了。

條件 (三元) 運算子

語法： condition ? A True : B False
若條件成立，會回傳 : 前面的值
若條件不成立，則會回傳 ： 後面的值

console.log( 10 > 5 ? 'yes': 'no' )
=> yes
console.log( 5 > 10 ? 'yes': 'no' )
=> no

會建議大家如果要使用三元運算子，條件最好是使用一種條件比較，如果要寫成巢狀結構，function 會變得很難讀，不夠直覺。

參考資料

以上為[JS101] 用 JavaScript 一步步打造程式基礎，課堂筆記使用