Objects play an important role in JavaScript, they not only store data but also help in creating repetitive UI in libraries like React.js, Next.js, etc.
Since these objects can contain a huge amount of data, it is important to keep track of each element in them. This is where the key comes in. Keys lets us uniquely identify elements for efficient data rendering and updates in modern web applications.
So checking if a key exists is crucial to verify the presence of specific properties before accessing or manipulating them to prevent any possible errors.
Methods to Check if a Key Exists
There are many different ways of checking if a key exists in JavaScript. Each one has its unique use case and advantage.
1. Using the in Operator
One of the simplest and widely used methods to check if a key exists is using the in operator.
It returns a boolean value which is true if the specified key is present in the given object.
const user = {
name: 'aditya',
age: 23
};
const checkForName = 'name' in user;
const checkForEmail = 'email' in user;
console.log(checkForName); // true
console.log(checkForEmail); // false
2. Using the hasOwnProperty() Method
The hasOwnProperty() method takes a key name as its argument and returns true if the object has that key as its own (not inherited). It returns false if it is inherited or doesn’t exist.
const user = {
name: 'aditya',
age: 23
};
const checkForAge = user.hasOwnProperty('age');
const checkForAddress = user.hasOwnProperty('address');
console.log(checkForAge); // true
console.log(checkForAddress); // false
3. Using Object.keys() Method
The Object.keys() method returns the keys of an object as an array while keeping its corresponding values unchanged. We can use it to check if a key exists by finding if it is included in the returned array.
const user = {
name: 'aditya',
age: 23
};
const keys = Object.keys(user);
const checkForName = keys.includes('name');
const checkForEmail = keys.includes('email');
console.log(checkForUserName); // true
console.log(checkForUserEmail); // false
4. Using Strict Inequality
If you try to access some value using a key that does not exist, JavaScript returns undefined. We can use this operation with a strict inequality (!==) operator to know whether the specific key is undefined or not.
It’s just that this method will fail if the key value itself is undefined.
const user = {
name: 'aditya',
age: 23
};
const checkIfNameDefined = user['name'] !== undefined;
const checkIfEmailDefined = user['email'] !== undefined;
console.log(checkIfNameDefined); // true
console.log(checkIfEmailDefined); // false
Summary
In short, checking if a key exists in a JavaScript object can be done using several methods. You can choose the one based on your needs:
- Use the in operator when you have to check for both own and inherited properties.
- Use hasOwnProperty() when you want to ensure that the key is not inherited.
- Use Object.keys() when you need a list of all keys or want to perform operations on them.
- Only use strict inequality if you are okay if an undefined property is treated as not existing. As it doesn’t differentiate between non-existent properties and properties set to undefined.
If you are new to JavaScript:
- JavaScript Variables
- JavaScript if…else Conditional Statement
- JavaScript Array
- JavaScript Object
- Scope In JavaScript
- JavaScript Error Handling
Reference
https://stackoverflow.com/questions/1098040/checking-if-a-key-exists-in-a-javascript-object