如何判斷 Object 的 Property 是否存在 ? | 次世代 Hugo

若想取得 Object 的 Property 做運算，但又不確定 Object 是否包含此 Property 時，ECMAScript 提供多種方式可判斷 Property 是否存在。

Version

ECMAScript 2020

Falsy Value

let data = { title: 'FP in JavaScript' }

let price = 0

if (data.price)
  price = data.price * 0.8

price // ?

讀取 property 不存在時會回傳 undefined，可藉由 falsy value 判斷 property 是否存在。

hasOwnProperty

let data = { title: 'FP in JavaScript' }

let price = 0

if (data.hasOwnProperty ('price'))
  price = data.price * 0.8

price // ?

也可使用 Object.prototype.hasOwnProperty 判斷 property 是否存在。

hasOwnProperty 顧名思義只能判斷 Object 本身的 property，而不能判斷來自於 prototype 的 property，若 Object 只當 data 並不會使用 prototype，因此可安心使用 hasOwnProperty。

in

let data = { title: 'FP in JavaScript' }

let price = 0

if ('price' in data)
  price = data.price * 0.8

price // ?

in 也可判斷 property 是否存在，與 hasOwnProperty 不同的是它會判斷來自於 prototype 的 property。

Optional Chaining

let data = { title: 'FP in JavaScript' }

let price = (data?.price ?? 0) * 0.8 // ?

也可使用 ?. 判斷 property 是否存在，若不存在時會回傳 undefined，可再搭配 ?? 提供 undefined 時的預設值。

Conclusion

• ECMAScript 所提供判斷 property 是否存在都偏 Imperative，若想更 Functional 可使用 Sanctuary 的 get