Check if a key exists in JavaScript object?
Tags: webdev, beginners, javascript, tutorial
Published: 2024-04-18 18:56:54

In development, we often need to check whether a key exists in an object or not. You may know one or two way to do it, but there are some other methods worth exploring. If you're interested in learning more, keep reading.

In this blog, I will demonstrate four different ways to perform this check. Each method has its pros and cons, so it's essential to understand all of them. This way, when the need arises, we can choose the most suitable approach.

-------------------------------------------------------------------

## Using **`in`** operator.
In JavaScript `in` operation used to check a property exist in an object or not. It return `true` if exist else `false`.
***Note:*** It also includes properties that come from inheritance or prototype chaining. So, when you need to check purely for properties of the object itself, it may not return the desired result.

**Complexity** is `O(1)`.

```js
const user  = {
	fullName: "Shakil Ahmed",
	age: 22,
	isStudent: true,
};

// structure "keyName" in object
console.log("fullName" in  user); // true
console.log("age" in  user); // true
console.log("institute" in  user); // false
```
------------------------------------------------

## Using  **`hasOwnProperty`** method.
`hasOwnProperty` is an object method, it's purpose is same as `in` operator. But different is it checks only object own property excluding inheritance or prototype chaining property. So it return pure result.

Put the key name in method argument and it will return `true` if it contain key else `false`.

**Complexity** is `O(1)`, so performance is also good.
```js
const user  = {
	fullName: "Shakil Ahmed",
	age: 22,
	isStudent: true,
};

console.log(user.hasOwnProperty("fullName")); // true
console.log(user.hasOwnProperty("age"));// true
console.log(user.hasOwnProperty("institute")); // false
```
------------------------------------------------


## Using  optional chaining
Optional chaining is an ES11 feature that helps access values without throwing `Uncaught TypeError` errors. When a key doesn't exist, it returns `undefined`; otherwise, it returns the value. To convert the result into a boolean value, prepend `!!` to the expression.

**Complexity** to check is `O(1)`, so performance is good.

```js
const user  = {
	fullName: "Shakil Ahmed",
	age: 22,
	isStudent: true,
};

console.log(user?.fullName); // Shakil Ahmed
console.log(!!user?.fullName); // true
console.log(user?.id); // undefined
console.log(!!user?.id); // false
```

However, it has a limitation: if the value is `false`, `0`, `undefined`, or `null` any falsy value it will return `false`, even if the key exists in the object.

```js
const user  = {
	fullName: "Shakil Ahmed",
	age: 22,
	isStudent: false,
	a: 0,
	b: undefined,
	c: null,
	d: NaN,
};
```
```js
console.log(user?.isStudent); // false
console.log(!!user?.isStudent); // false

console.log(user?.a); // 0
console.log(!!user?.a); // false

console.log(user?.b); // undefined
console.log(!!user?.b); // false

console.log(user?.c); // null
console.log(!!user?.c); // false

console.log(user?.d); // NaN
console.log(!!user?.d); // false
```
in the above examples,   `isStudent`, `a`, `b`, `c`, `d` variables exist in the object,  but this technique returning `false` only due to falsy values.

------------------------------------------------


## Comparing all keys
This process involves manually traversing over all keys of the object to check if a specific key exists.

**Complexity:** Traversing the entire object results in a time complexity of `O(n)`, where `n` is the number of keys in the object.

```js
const user  = {
	fullName: "Shakil Ahmed",
	age: 22,
	isStudent: false,
	a: 0,
	b: undefined,
	c: null,
	d: NaN,
};
```

```js
const  isKeyExistInObject  = (obj, key) => {
	// here '!!' is to convert result in boolean you also can use Boolean() constructor.
	return  !!Object.keys(obj).find((eachKey) =>  eachKey  ===  key);
};
```

In the above code, I've created a function to check the existence of a key. Here, I convert all keys of the object into an array using `Object.keys(obj)`. Then, I traverse that array and check if it contains the specified key. If the key is found, `find` returns that `eachKey`; otherwise, it returns `undefined`. Using `!!` converts this result into a boolean. You can also use the `Boolean(value)` constructor.

The `isKeyExistInObject` function returns a boolean value.

```js
console.log(isKeyExistInObject(user, "fullName")); // true
console.log(isKeyExistInObject(user, "first name")); // false
console.log(isKeyExistInObject(user, "age")); // true
console.log(isKeyExistInObject(user, "isStudent")); // true
console.log(isKeyExistInObject(user, "a")); // true
console.log(isKeyExistInObject(user, "b")); // true
console.log(isKeyExistInObject(user, "c")); // true
console.log(isKeyExistInObject(user, "d")); // true
console.log(isKeyExistInObject(user, "notExist")); // false
```
**Note:** Although this method is slightly more complex than other techniques, it works for any falsy values.

------------------------------------------------


## Example with nested objects
Here is a nested object and here we will use all of the above techniques

**Example object:**
```js
const  user  = {
	name: "Shakil",
	age: 22,
	studentData: {
		id: "123",
		bachelor: "CSE",
		countryData: {
			country: "Bangladesh",
			capital: "Dhaka",
			language: "Bangla",
		},
	},
};
```

 **Using `in`:**
 ```js
// ========== is "name" exist
console.log("name"  in  user); // true

// ========== is "studentData" exist
console.log("studentData"  in  user); // true

// ========== is "id" exist
console.log(
	"studentData"  in  user  &&  "id"  in  user.studentData
); // true

// ========== is "language" exist
console.log(
	"studentData"  in  user  &&
	"countryData"  in  user.studentData  &&
	"language"  in  user.studentData.countryData
); // true
```

 **Using `hasOwnProperty`:**
 ```js
// ========== is "name" exist
console.log(user.hasOwnProperty("name")); // true

// ========== is "studentData" exist
console.log(user.hasOwnProperty("studentData")); // true

// ========== is "id" exist
console.log(
	user.hasOwnProperty("studentData") && 
	user.studentData.hasOwnProperty("id")
); // true

// ========== is "language" exist
console.log(
	user.hasOwnProperty("studentData") &&
	user.studentData.hasOwnProperty("countryData") &&
	user.studentData.countryData.hasOwnProperty("language")
); // true
```


 **Using optional chaining**
 ```js
// ========== is "name" exist
console.log(!!user?.name); // true

// ========== is "studentData" exist
console.log(!!user?.studentData); // true

// ========== is "id" exist
console.log(
	!!user?.studentData  &&  !!user.studentData?.id
); // true

// ========== is "language" exist
console.log(
	!!user?.studentData  &&
	!!user.studentData?.countryData  &&
	!!user.studentData.countryData?.language
); // true
```

 **Comparing all keys :**
 ```js
const  isKeyExistInObject  = (obj, key) => {
	return  !!Object.keys(obj).find(
		(eachKey) =>  eachKey  ===  key
	);
};

// ========== is "name" exist
console.log(isKeyExistInObject(user, "name")); // true

// ========== is "studentData" exist
console.log(isKeyExistInObject(user, "studentData")); // true

// ========== is "id" exist
console.log(
	isKeyExistInObject(user, "studentData") &&
	isKeyExistInObject(user.studentData, "id")
); // true

// ========== is "language" exist
console.log(
	isKeyExistInObject(user, "studentData") &&
	isKeyExistInObject(user.studentData, "countryData") &&
	isKeyExistInObject(user.studentData.countryData, "language")
); // true
```

------------------------------------------------

In summary, knowing different ways to check for keys in JavaScript objects empowers developers to write more efficient and reliable code. Each method offers its own advantages, allowing flexibility in handling various scenarios. By familiarizing yourself with these techniques, you can enhance your JavaScript skills and tackle object-related challenges with ease. Keep exploring and experimenting to find the approach that best fits your needs. Happy coding!



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yppe85927gniz62nh51y.gif)