In this article, we will try to analyze how we may handle an undefined key (or a property of an object) in JavaScript using certain techniques or approaches (via some coding examples).
Firstly let us quickly analyze how we may create an object with certain keys along with their values using the following syntax:
Syntax:
let object_name = {
property_name : value,
...
}
Let us now see the following illustrated quick example which will help us to understand the object creation syntax:
Example: In this example, we will simply create an object with certain properties having certain values in them.
Javascript
<script> let employee_details = { firstName: "ABC", lastName: "DEF", age: 22, designation: "Technical Content Writer", organizationName: "neveropen", }; console.log(employee_details); console.log( `Complete name of an employee is ${employee_details.firstName} ${employee_details.lastName}` ); </script> |
Output:
{
firstName: 'ABC',
lastName: 'DEF',
age: 22,
designation: 'Technical Content Writer',
organizationName: 'neveropen'
}
Complete name of an employee is ABC DEF
Now as we have understood the object creation process, let us see some of the following illustrated approaches/ conditions/ cases through which we would easily understand the problem statement (which is handling of an undefined key):
Approach 1: In this approach, we will use the same object that we have created in the previous example and will further try to access a key that is not defined in that object and also will handle the error.
Example 1:
Javascript
<script> let employee_details = { firstName: "ABC", lastName: "DEF", age: 22, designation: "Technical Content Writer", organizationName: "neveropen", }; console.log( `Address of an employee is : ${employee_details?.address ?? "not found"}` ); </script> |
Output:
Address of an employee is : not found
Example 2:
Javascript
<script> let employee_details = { firstName: "ABC", lastName: "DEF", age: 22, designation: "Technical Content Writer", organizationName: "neveropen", }; console.log( `Address of an employee is : ${"address" in employee_details ? employee_details.address : "not found" }` ); </script> |
Output:
Address of an employee is : not found
Approach 2: In this approach, we will use the same object but here we will add one more key (or property) explicitly with the value as “undefined” and then will see the output while accessing it.
Example:
Javascript
<script> let employee_details = { firstName: "ABC", lastName: "DEF", age: 22, designation: "Technical Content Writer", organizationName: "neveropen", address: undefined, }; console.log( `Address of an employee is : ${ employee_details?.address === undefined ? "not defined" : employee_details.address }` ); </script> |
Output:
Address of an employee is : not defined
