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

Dayne Topkin on Unsplash

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
}

這是因為電腦看見 myPhone['key'] 會想要去 myPhone 物件裡面尋找名為 key 的屬性，加上引號之後，key 就不是變數而是字串囉。

Reference

• Property accessors - MDN
• Dot Notation vs Bracket Notation for Object Properties – What's the Difference?
• Objects: the basics