This write-up will demonstrate the approaches to get the object’s first key name using JavaScript.
How to Get the First Key Name of an Object in JavaScript?
The following approaches can be utilized to get the object’s first key name using JavaScript:
- “Object.keys()” method.
- “Object.entries()” method.
- “Custom Function” approach.
Approach 1: Get the Object’s First Key Name in JavaScript By Object.keys() Method
The “Object.keys()” method gives an array iterator object with the object’s keys. This method, as the name specifies, can be utilized to access the object’s first key name directly by simply indexing it once.
Syntax
In the above syntax:
- “obj” refers to an iterable object or the initialized dictionary.
Example
Go through the following code snippet:
console.log("The object array is: ", keyObj)
console.log("The first key name of an object is:", Object.keys(keyObj)[0]);
- Firstly, create an object with the specified “key-value” pair and display it.
- Now, apply the “Object.keys()” method and index it with “0”. This will result in accessing the object’s first key name directly.
Output
In the above output, the object’s first key name is retrieved directly.
Approach 2: Get the Object’s First Key Name in JavaScript Using the Object.entries() Method
The “Object.entries()” method is utilized to give the object’s key-value pairs passed as the parameter. This method can be applied to access the object key name by indexing its corresponding value first.
Syntax
In this syntax:
- “obj” indicates the object whose property [key – value] pairs are to be returned.
Example
Go through the following lines of code:
let keyObj = { name: 'David', id: 1, city: "London" };
console.log("The object array is: ", keyObj)
console.log("The first key name of an object is:", Object.entries(keyObj)[0][0])
console.log("The first key name and value of an object is:", Object.entries(keyObj)[0])
</script>
- First, define the object with the stated name value pairs and display it.
- After that, apply the “Object.entries()” method by indexing it twice with “0” to access the first key name of the specified object.
- In the next step, get both the key and values by applying the stated method in the previous step using the indexing once only. This will result in accessing the name as well as the value with respect to the index.
Output
Approach 3: Get the First Key Name of an Object in JavaScript Using the Custom Function Approach
This approach can be applied to define a separate function for extracting the object’s key name by passing the created object and a specific value in it.
Example
The below-given code snippet illustrates the discussed concept:
function getkeyObj(object, value) {
return Object.keys(object).find(key => object[key] === value);
}
let keyObj = {city: 'Abu Dhabi', country: 'Dubai', };
console.log("The object array is: ", keyObj)
console.log("The first key name of an object is:",(getkeyObj(keyObj, 'Abu Dhabi')))
</script>
In the above js code:
- First, define a function named “getkeyObj()” with the specified parameters. The “object” here refers to the created object and “value” refers to the value against the particular “key”.
- In its definition, apply the “Object.keys()” method having the created object as its parameter.
- Also, apply the “find()” method to extract the object’s key by comparing the corresponding object in which it is contained and the value against it(object key).
- After that, initialize the object similarly with the stated “key-value” pairs and display it.
- Finally, fetch the object’s first key name by passing the created object and the value against the first key name as the parameters of the defined function.
Output
We have discussed the convenient approaches to get the object’s first key name in JavaScript.
Conclusion
The “Object.keys()” method, the “Object.entries()” method, or the “custom function” approach can be utilized to get the object’s first key name in JavaScript. The Object.keys() method is easy to implement and can be applied to access the key name directly as the name specifies. The Object.entries() method can be implemented by indexing twice to access the key name of an object. This approach is preferable in the case of accessing the values rather than the keys. The custom function approach can be used to define a specific function and pass the name of the object and the key’s corresponding value to get it. This blog demonstrates how to get the object’s first key name in JavaScript.
