Skip to content
the poor coder

how to access key value pair in javascript

Poor Man
Published
Reading time
3 min read
On this page

How to Access Key Value Pair in Javascript?#

Accessing key value pair in JavaScript is an essential task when working with objects. It allows you to retrieve, update or delete values from an object using their respective keys. There are several ways to access key value pair in JavaScript, and here are a few:

Using Dot Notation#

One of the most common ways to access key value pair in JavaScript is by using dot notation. This method involves referencing the object name followed by a dot (.) and then the key name. Here is an example:

Text

const obj = {
  name: "John",
  age: 30,
  hobbies: ["reading", "swimming", "gaming"]
};

console.log(obj.name); // Output: "John"
console.log(obj.age); // Output: 30
console.log(obj.hobbies); // Output: ["reading", "swimming", "gaming"]

In the code above, we have an object called "obj," which contains three key value pairs. We used dot notation to access the values by referencing the object name and the respective key name.

Using Bracket Notation#

Another way to access key value pairs in JavaScript is by using bracket notation. This method involves referencing the object name followed by square brackets ([]), containing the key name as a string. Here is an example:

Text

const obj = {
  name: "John",
  age: 30,
  hobbies: ["reading", "swimming", "gaming"]
};

console.log(obj["name"]); // Output: "John"
console.log(obj["age"]); // Output: 30
console.log(obj["hobbies"]); // Output: ["reading", "swimming", "gaming"]

In the code above, we used bracket notation to access the key value pairs of the "obj" object. We enclosed the key name in square brackets and passed it as a string.

Using Object.keys()#

If you want to access all the keys of an object at once, you can use the Object.keys() method. This method returns an array of all the keys in the object. Here is an example:

Text

const obj = {
  name: "John",
  age: 30,
  hobbies: ["reading", "swimming", "gaming"]
};

const keys = Object.keys(obj);
console.log(keys); // Output: ["name", "age", "hobbies"]

In the code above, we used the Object.keys() method to retrieve all the keys of the "obj" object. We stored the returned array in a variable called "keys."

Using Object.values()#

If you want to access all the values of an object at once, you can use the Object.values() method. This method returns an array of all the values in the object. Here is an example:

Text

const obj = {
  name: "John",
  age: 30,
  hobbies: ["reading", "swimming", "gaming"]
};

const values = Object.values(obj);
console.log(values); // Output: ["John", 30, ["reading", "swimming", "gaming"]]

In the code above, we used the Object.values() method to retrieve all the values of the "obj" object. We stored the returned array in a variable called "values."

Using Object.entries()#

If you want to access both the keys and values of an object at once, you can use the Object.entries() method. This method returns an array of arrays, where each sub-array contains a key-value pair. Here is an example:

Text

const obj = {
  name: "John",
  age: 30,
  hobbies: ["reading", "swimming", "gaming"]
};

const entries = Object.entries(obj);
console.log(entries); // Output: [["name", "John"], ["age", 30], ["hobbies", ["reading", "swimming", "gaming"]]]

In the code above, we used the Object.entries() method to retrieve all the key-value pairs of the "obj" object. We stored the returned array of arrays in a variable called "entries."

These are some of the ways you can access key value pair in JavaScript. It's important to choose the right method based on your needs and the structure of your objects.

Keep going

2023

how to sort an array

How to Sort an Array If you have an array and you want to order its elements in a specific way, you need to use a sorting algorithm. There are several sorting algorithms available, but two of the most commonly used are…

javascript2 min read
2023

jquery mobile or desktop

jQuery Mobile or Desktop? As a web developer, I have had some experience with both jQuery Mobile and jQuery Desktop. Both frameworks have their pros and cons, and which one to use really depends on the specific project…

javascript1 min read
2023

node.js folder structure

Node.js Folder Structure If you are new to Node.js, it can be daunting to create a folder structure that will work for your project. The structure you choose will depend on the size and complexity of your project. Here…

javascript1 min read
ESC