In this article, we will explore how to retrieve values from a JavaScript object using its corresponding keys.
How to define and access an object in JavaScript?
JavaScript objects can be instantiated in several ways, including:
- using the let keyword
- utilizing the const keyword
Utilizing let keyword
We will employ the let keyword to instantiate the object by utilizing curly braces.
Creating the object using the following code:
let product = {
name : 'Refrigerator',
company : 'LG',
price : 27000,
quantity : 2,
};
Accessing the object using the dot notation:
console.log(product.name);
console.log(product.company);
console.log(product.price);
console.log(product.quantity);
Output:
In the output, we observe that the properties of the "product" object are being accessed through dot notation.
Utilizing const keyword
We will employ the const keyword and instantiate the object using curly braces.
Creating the object using the following code:
const person = {
firstName : 'Anurag',
lastName : 'Kashyap',
age : 23,
address : 'Faridabad',
};
Accessing the object using the bracket notation:
console.log(person['firstName']);
console.log(person['lastName']);
console.log(person['age']);
console.log(person['address']);
Output:
In the output, we observe that the properties of the object "person" are being accessed through the bracket notation.
There are various ways in which we can get the value by its key. The following are the methods to get the value of the JavaScript object:
- Object.keys method
- Object.entries method
- Object.values method
Utilizing the Object.keys method
The Object.keys function can be employed to retrieve values associated with keys in a JavaScript Object.
Demonstration 1:
We will employ the Object.keys method to retrieve the value associated with the "user" object through its key.
Code:
let user ={
greet : "Hey",
name : "Neeraj",
age : 20,
};
let keys = Object.keys(user);
console.log(user.greet);
console.log(user.name);
console.log(user.age);
Output:
Below is the output that allows us to observe the values associated with the "user" object through its keys.
Demonstration 2:
We will retrieve the values associated with the object "employee" by employing the Object.keys method.
Code:
let employee ={
name : "Shekhar",
age : 25,
department : "Software Development",
salary : 51000,
};
let keys = Object.keys(employee);
console.log(employee.name);
console.log(employee.age);
console.log(employee.department);
console.log(employee.salary);
Output:
Below is the output that allows us to observe the values associated with the object "employee" through its keys.
Utilizing the Object.entries method
The Object.entries function can be employed to retrieve values associated with keys within a JavaScript Object.
Demonstration 1:
We will employ the Object.entries function to retrieve the values from the "student" object.
Code:
let student ={
name : "Ashu",
age : 24,
subject : "Hindi",
marks : 75,
};
let entries = Object.entries(student)
console.log(student.name);
console.log(student.age);
console.log(student.subject);
console.log(student.marks);
Output:
In the output displayed, we can observe the attributes of the object referred to as "student".
Demonstration 2:
We will employ the Object.entries method in conjunction with the map function to retrieve the values from the "car" object.
Code:
let car ={
name : "Audi",
model : "Q7",
doors : 5,
volume : "740 L",
};
let entries = Object.entries(car)
let detail = entries.map( ([key, val] = entry) => {
return `The ${key} is ${val}`;
});
console.log(detail);
Output:
Below is the output showcasing the properties of the object referred to as "car".
Demonstration 3:
We will employ the Object.entries method in conjunction with the filter function to obtain the values from the object named "series".
Code:
let series ={
name : "Sacred Games",
platform : "Netflix",
seasons : 2,
episodes : 16,
};
let web = Object.entries(series)
let detail = web.filter( ([key, val] = entry) => {
return `The ${key} is ${val}`;
});
console.log(detail);
Output:
Below is the output where we can observe the values associated with the object named "series."
Utilizing the Object.values method
In JavaScript, we can retrieve the values of an object by employing the Object.values method.
Demonstration 1:
We will employ the Object.values function in order to retrieve the values from the object named "cricketer."
Code:
const cricketer = {
name : 'MS Dhoni',
age : 42,
roll : 'WK-Batsman',
};
let values = Object.values(cricketer);
console.log(values);
Output:
Below is the output demonstrating the attributes of the object referred to as "cricketer".
Demonstration 2:
We will employ the Object.values function to retrieve the values from the object named "course."
Code:
const course = {
name : 'B.Tech',
duration : 4,
};
let values = Object.values(course);
console.log(values);
Output:
Below is the output where we can observe the attributes of the object referred to as "course".
Conclusion:
In this article, we have explored the concept of retrieving values from a JavaScript object using keys. We have examined several approaches, including the Object.keys method, the Object.entries method, and the Object.values method.