2023-10-19|閱讀時間 ‧ 約 4 分鐘

JavaScript 物件點記法 (dot notation) 與括號記法 (bracket notation)的差異

JavaScript 提供了許多存取物件屬性 (object property) 的方法，其中又以點記法 (dot notation) 以及 括號記法 (bracket notation) 最為常見。兩者都可以達到以下目的：

透過 key 取得物件屬性的值
透過 key 修改物件屬性的值
新增屬性到物件裡面

有鑑於以上的相似之處，我原先以為兩者的差別僅在於語法而已，直到某天使用 for...in 迴圈時，透過點記法發現回傳值全是 undefined，這才開始查詢兩者的差異。

const myPhone = {
  name: 'myPhone',
  price: 14999,
  features: ['long battery life', 'AI camera'],
  hardware: {
    ram: '8GB',
    storage: '64GB'
  }
}

// Loop 
for (let key in myPhone) {
  console.log(myPhone.key); // undefined
  console.log(myPhone[key]); // All value of every key in the object
}

點記法與括號記法的差異之處

點記法直接使用物件屬性 key：object.propertyName
括號記法的括號之內要帶入字串或 Symbol：object[expression]

由於點記法直接使用 key 來找尋物件中對應的屬性值，所以在上述例子中才會回傳 undefined，因為 myphone 這個物件根本就沒有叫做 key 的屬性啊，key 是我們在迴圈內定義的變數。點記法僅接受靜態鍵 (static key) 而已，也就是物件的屬性名稱。

相對來說，括號記法接受動態鍵 (dynamic key)，所以帶入變數的話，會先看變數背後所代表的字串，然後到物件中尋找名稱與字串匹配的屬性。

括號記法中的引號

這邊還有一件值得注意的事情，那就是括號記法內若加上引號會回傳 undefined：

// Object declaration
const myPhone = {
  name: 'myPhone',
  price: 14999,
  features: ['long battery life', 'AI camera'],
  hardware: {
    ram: '8GB',
    storage: '64GB'
  }
}

// Loop 
for (let key in myPhone) {
  console.log(myPhone['key']); // undefined
}