DEV Community: Alex M

How to Check if an Object Has a Property in JavaScript

Alex M — Sat, 18 Nov 2023 23:49:25 +0000

In JavaScript, there are different ways to check if an object has a specific property. The main differences between these approaches, besides performance and syntax, are the access to own prototypes or inherited properties from the prototype chain.

Any value in javaScript, with the exception with undefined and null has a prototype chain, since primitive values are not "by definition" an object, javaScript coerces or boxes the primitive value in a corresponding object. So the values has properties, methods, constructor and prototype inherited from the prototype chain.

Some of the next strategies involve checking both the properties directly belonging to the object (own properties) and those inherited from prototypes.

Using `in` Operator

The in operator returns true if the object contains the property with specified name. Checking in own prototypes or its prototype chain (inherited properties)

code

const user = { name: 'Alex', age: undefined }
const hasName = 'name' in user
const hasSurname = 'surname' in user
const hasAge = 'age' in user

test

test('user should have name property', () => {
 expect(hasName).toBeTruthy()
})

test('user should not have surname property', () => {
 expect(hasSurname).toBeFalsy()
})

test('user should have age property', () => {
 expect(hasAge).toBeTruthy()
})

test('user should have inherited properties', () => {
 expect('valueOf' in user).toBeTruthy()
})

✅ PASS user should have name property
✅ PASS user should NOT have surname property
✅ PASS user should have age property
✅ PASS user should have inherited properties

NOTE: In operator checks the property and not the value assigned, for this reason returns true for age property even when is undefined.

🧐 Comparing with `undefined`

A quick way to check if the object has a property is to check if the property is defined. However, since a property could have undefined as its value, it is not a reliable way to check.

Despite this disadvantage, this approach has the advantage of having the flexibility to search for properties within nested objects without throwing errors, making use of the optional chaining operator ?..

code

const user = {
  name: 'Alex',
  age: undefined,
  contact: { phone: '+123' }
}
const hasName = user.name !== undefined
const hasSurname = user.surname !== undefined
const hasAge = user.age !== undefined
const hasPhone = user.contact?.phone !== undefined
const hasAddress = user.contact?.address !== undefined

test

test('user should have name property', () => {
 expect(hasName).toBeTruthy()
})

test('user should not have surname property', () => {
 expect(hasSurname).toBeFalsy()
})

test('user should have age property', () => {
 expect(hasAge).toBeTruthy()
})

test('user should have phone property', () => {
 expect(hasPhone).toBeTruthy()
})

test('user should not have address property', () => {
 expect(hasAddress).toBeFalsy()
})

test('user should have inherited properties', () => {
 expect(user.valueOf !== undefined).toBeTruthy()
})

✅ PASS user should have name property
✅ PASS user should NOT have surname property
❌ FAIL user should have age property
✅ PASS user should have phone property
✅ PASS user should NOT have address property
✅ PASS user should have inherited properties

Using `Object.hasOwn(object1, 'prop')` method

The Object.hasOwn() static method returns true if the specified object has the indicated property as its own property. If the property is inherited, or does not exist, the method returns false.

code

const user = { name: 'Alex', age: undefined }
const hasName = Object.hasOwn(user, 'name')
const hasSurname = Object.hasOwn(user, 'surname')
const hasAge = Object.hasOwn(user, 'age')

test

test('user should have name property', () => {
 expect(hasName).toBeTruthy()
})

test('user should not have surname property', () => {
 expect(hasSurname).toBeFalsy()
})

test('user should have age property', () => {
 expect(hasAge).toBeTruthy()
})

test('user should not have inherited properties', () => {
 expect(Object.hasOwn(user, 'valueOf')).toBeFalsy()
})

✅ PASS user should have name property
✅ PASS user should NOT have surname property
✅ PASS user should have age property
✅ PASS user should NOT have inherited properties

NOTE: Even by overwriting the hasOwn method, the behavior is not affected.

🧐 Using `.hasOwnProperty()` method

Object.hasOwn() is intended as a replacement for this method.

Despite the hasOwnProperty() method having better browser support, there are two important observations about the behavior:

hasOwnProperty() doesn't work for null-prototype objects, objects created like const user = Object.create(null)
It doesn't work with objects that have overridden the inherited hasOwnProperty() method.
For this second scenario there a workaround using the hasOwnProperty property from the Object prototype
Object.prototype.hasOwnProperty.call(myObj, 'myProp') instead of myObj.hasOwnProperty('myProp')

code

// null-prototype objects
const user = Object.create(null)
user.name = 'Alex'
user.surname = 'Smith'
const hasName = user.hasOwnProperty('name')
const hasSurname = Object.prototype.hasOwnProperty.call(user, 'surname')

test

test('user should have name property', () => {
 expect(hasName).toBeTruthy()
})

test('user should have surname using prototype', () => {
 expect(hasSurname).toBeTruthy()
})

❌ FAIL user should have name property
❌ FAIL user should have surname using prototype

code

// hasOwnProperty overridden
const client = {
  name: 'A',
  surname: 'B',
  hasOwnProperty() { return false }
}
const hasClientName = client.hasOwnProperty('name')
const hasClientSurname = Object.prototype.hasOwnProperty.call(client, 'surname')

test

test('client should have name property', () => {
 expect(hasClientName).toBeTruthy()
})

test('client should have surname using prototype', () => {
 expect(hasClientSurname).toBeTruthy()
})

❌ FAIL client should have name property
✅ PASS client should have surname using prototype

How to Check if a Value is an Object in JavaScript

Alex M — Fri, 10 Nov 2023 22:46:06 +0000

There are several strategies to check if a value is an object. The primary reason is that in JavaScript, any non-primitive type (primitives: string, number, bigint, boolean, undefined, symbol, and null) is treated as an object, but depending on the checking method, there are considerations to take into account.

Using `typeof` operator

JavaScript provides the typeof operator to check the value data type.

The typeof operator returns a string indicating the type of the operand's value.

typeof variable === 'object' returns true for:

objects
null 😶
arrays
regular expressions
new Date()
new Map()
new Set()

So these validation could be required.

code

const isObject = (value) => {
  return typeof value === 'object'
  && value !== null
  && !Array.isArray(value)
  && !(value instanceof RegExp)
  && !(value instanceof Date)
  && !(value instanceof Set)
  && !(value instanceof Map)
}

Using `instanceof` operator

Just like typeof, multiple validations may be necessary.

variable instanceof Object returns true for:

functions
arrays
regular expressions
new Date()
new Map()
new Set()

NOTE: instanceof returns false for objects initialised as Object.create(null) even after set additional properties.
(Object.create(null) is used explicitly when an object without prototype chain, any properties or methods from Object.prototype is needed)

code

const user = Object.create(null)
user.id = 'A0012'
const client = Object.create(user)
const isObject = user instanceof Object
const isClientObj = client instanceof Object

test

test('user should be an object', () => {
 expect(isObject).toBeTruthy()
})

test('client should be an object', () => {
 expect(isClientObj).toBeTruthy()
})

❌ FAIL user should be an object
❌ FAIL client should be an object

💪 ✨ Object.prototype.toString.call()✨

This method returns the stringified type identifier, like [object Object], [object Array]...

NOTE: toString.call() instead of toString() is used to prevent unexpected behaviour due this.

The advantage of this strategy is that it distinguishes all types with specificity, such as Array, RegExp, etc. and it doesn't throw Uncaught TypeError.

code

const user = {}
const isObj = Object.prototype.toString.call(user) === '[object Object]'

test

test('user should be an object', () => {
 expect(isObject).toBeTruthy()
})

✅ PASS user should be an object

The ability to return the specific type of the value allows for easy validation of other types, with the only observation that values created with a constructor and new keyword may behave differently than expected.

Ex: Object.prototype.toString.call(new Number(3)), Object.prototype.toString.call(Number(3)), and Object.prototype.toString.call(3) all return '[object Number]'.

✨ Using `constructor` property

The constructor data property returns a reference to the constructor function that created the instance object

Similar to Object.prototype.toString.call() gives the chance to know the specific type

With three important observations:

variable.constructor === Object returns false for Object.create(null)
It throws Uncaught TypeError for null and undefined
Since the constructor property can potentially be overwritten, like { constructor: 1 }, it may not be reliable.

Some extra validation should be necessary (This solution does not take into account the override of constructor property):

code

const isObject = (value) => {
  return value != null // equality operator checks `undefined` and `null`
  && 
  (value.constructor === Object || (!value.constructor && typeof value === 'object'))
}

Note: To validate other types, the only caveat is the same as that of Object.prototype.toString.call(), concerning the type returned, whether the value is created as a primitive or using a constructor with the new keyword.

Alternative approaches for validating object values

There are also other strategies to check if a value is an object like:

Object.prototype.valueOf.call(value)):

It throws Uncaught TypeError for null and undefined

value.--proto--:

Deprecated

Object.getPrototypeOf(value).isPrototypeOf(Object)
Object.prototype.isPrototypeOf(value)

How to Clone an Object in JavaScript

Alex M — Fri, 10 Nov 2023 22:39:30 +0000

How to... js series

The way JavaScript handles assignments to copy objects is different from how it handles primitive values. Instead of holding values, it uses a pointer to the value in memory.
This concept is known as assignment by reference, where the variable doesn't store the actual value but a reference to the object's memory location. This implies that if two variables point to the same object, any modification to one of them will affect both.

Trying direct assignment

code

const weather= { today:'🌞'}
const currentWeather = weather
currentWeather.today = '🌧'

test

test('should preserve the value', () => {
 expect(weather.today).toBe('🌞')
})

❌ FAIL should preserve the value

It fails because an object is not a primitive value so in this case JavaScript uses assignment by reference.

Strategies

Depending on the original object and specific needs, one can choose between two copying strategies in JavaScript:

Shallow copy

A shallow copy creates a new object where only the top-level structure of the object is duplicated, while the nested objects or elements inside the original object still maintain their references.

Using spread syntax

code

const weather= {
  today:'🌞',
  forecast: { morning:'🌞'}
}
const currentWeather = { ...weather }
currentWeather.today = '🌧'
currentWeather.forecast.morning = '⛅'

test

test('should preserve the value', () => {
 expect(weather.today).toBe('🌞')
})

test('should preserve the nested value', () => {
 expect(weather.forecast.morning).toBe('🌞')
})

✅ PASS should preserve the value
❌ FAIL should preserve the nested value

Using Object.assign()

code

const weather= {
  today:'🌞',
  forecast: { morning:'🌞'}
}
const currentWeather = Object.assign({}, weather)
currentWeather.today = '🌧'
currentWeather.forecast.morning = '⛅'

test

test('should preserve the value', () => {
 expect(weather.today).toBe('🌞')
})

test('should preserve the nested value', () => {
 expect(weather.forecast.morning).toBe('🌞')
})

✅ PASS should preserve the value
❌ FAIL should preserve the nested value

Deep copy

In contrast, a deep copy creates independent copies of all nested objects, ensuring that there are no shared references.

Cloning Objects using JSON.parse()/JSON.stringify()

code

const weather= {
  today:'🌞',
  forecast: { morning:'🌞'}
}
const currentWeather = JSON.parse(JSON.stringify(weather))
currentWeather.today = '🌧'
currentWeather.forecast.morning = '⛅'

test

test('should preserve the value', () => {
 expect(weather.today).toBe('🌞')
})

test('should preserve the nested value', () => {
 expect(weather.forecast.morning).toBe('🌞')
})

✅ PASS should preserve the value
✅ PASS should preserve the nested value

⚠️ NOTE: JSON.parse/JSON.stringify method has important limitations:

Date is converted to string
Infinity and NaN are converted to null
undefined, function and Symbol as value in object property are ignored and convert to null in arrays.

Using structuredClone() ❤️

code

const weather= {
  today:'🌞',
  forecast: { morning:'🌞'}
}
const currentWeather = structuredClone(weather)
currentWeather.today = '🌧'
currentWeather.forecast.morning = '⛅'

test

test('should preserve the value', () => {
 expect(weather.today).toBe('🌞')
})

test('should preserve the nested value', () => {
 expect(weather.forecast.morning).toBe('🌞')
})

✅ PASS should preserve the value
✅ PASS should preserve the nested value

Structured cloning offers distinct advantages over JSON.parse()/JSON.stringify(). It excels in managing intricate objects beyond the capabilities of JSON, including objects with binary data or cyclic object graphs.

Nonetheless, structured cloning does come with certain limitations. It is unable to handle prototypes, functions, Symbol, and certain values like Error and DOM nodes. ref

To fully values support in deep copy (functions, Symbol..) is necessary iteration strategy, but in most cases structuredClone() is good enough.

It's important to note that the structuredClone() method is not supported in every browser.

Support for structuredClone:

How to Check if an Object is Empty in JavaScript

Alex M — Thu, 09 Nov 2023 11:25:31 +0000

How to... js series

In JavaScript there is no default method or length property on the object, it is only available to arrays and strings that have the length property. Nor .size available for Set objects.

Besides that, using equality operator to compare two objects, it compares their references in memory, not their contents.

code

const isEmptyObject = ({} === {}) // or equality operator ==

test

test('should be empty or {}', () => {
 expect(isEmptyObject).toBeTruthy()
})

❌ FAIL should be empty or {}

Since here are two different objects, even if they have the same properties and values or none at all, the comparison will return false because they are not the same object in memory.

Loops (for...in) can solve this, but ECMAScript6 offers cleaner ways to check if an object is empty.

✨ Object.keys()

The Object.keys() static method returns an array of a given object's own enumerable string-keyed property names.

➔ More detail about enumerable properties and own properties

code

const users = {'1': {name: 'alex'}}
const currentUser = {}
const isEmptyUser = Object.keys(currentUser).length === 0
const isEmptyList = Object.keys(users).length === 0
// or
// const isEmptyList = !Object.keys(users).length

test

test('should be empty object', () => {
 expect(isEmptyUser).toBeTruthy()
})

test('should not be empty object', () => {
 expect(isEmptyList).toBeFalsy()
})

✅ PASS should be empty object
✅ PASS should not be empty object

It is possible achieve the same with Object.values() and Object.entries()

NOTE: When there is not guaranty that a value is an object is necessary validate the type to prevent Uncaught TypeError using Object methods caused by null and undefined. Any other type returns an array as expected.

code

const user;

// it is enough to prevent the error
if(user){
 const isEmptyList = !Object.keys(user).length
}
// or
isEmpty = (value)=> !(value && Object.keys(value).length)
isEmpty(user)

But validating before whether the value type is actually an Object makes more sense in some cases.

➔ More detail about How to Check if a Value is an Object

🤐 JSON.stringify(): The ugly and unreliable way

The JSON.stringify() static method converts a JavaScript value to a JSON string.

⚠️ NOTE: undefined, function and Symbol as value in object property are ignored

code

const user = {}
const currentUser = { validId: (id) => id > 100 }
const isEmpty = JSON.stringify(user) === '{}'
const isEmptyUser = JSON.stringify(currentUser) === '{}'

test

test('should be empty object', () => {
 expect(isEmpty).toBeTruthy()
})

test('should detect validId property', () => {
 expect(isEmptyUser).toBeFalsy()
})

✅ PASS should be empty object
❌ FAIL should detect validId property

DEV Community: Alex M

How to Check if an Object Has a Property in JavaScript

Using in Operator

🧐 Comparing with undefined

Using Object.hasOwn(object1, 'prop') method

🧐 Using .hasOwnProperty() method

How to Check if a Value is an Object in JavaScript

Using typeof operator

Using instanceof operator

💪 ✨ Object.prototype.toString.call()✨

✨ Using constructor property

Alternative approaches for validating object values

How to Clone an Object in JavaScript

Trying direct assignment

Strategies

Shallow copy

Using spread syntax

Using Object.assign()

Deep copy

Cloning Objects using JSON.parse()/JSON.stringify()

Using structuredClone() ❤️

How to Check if an Object is Empty in JavaScript

✨ Object.keys()

🤐 JSON.stringify(): The ugly and unreliable way

Using `in` Operator

🧐 Comparing with `undefined`

Using `Object.hasOwn(object1, 'prop')` method

🧐 Using `.hasOwnProperty()` method

Using `typeof` operator

Using `instanceof` operator

✨ Using `constructor` property