How To Get An Object’s Value By Index In JavaScript?

If you don’t know how to get an object’s value by index in JavaScript, don’t worry. We will give you simple ways to do it in this article like using Object. keys() method or Object.values() method. 

Get an object’s value by index in JavaScript

Object in JavaScript is an abstract concept used to represent a (concrete) object. In which attributes are used to describe the characteristics and properties of the object.

In essence, an object is a collection of keys and values. The key is called the attribute, and the value is the corresponding value of the attribute.

• Object that can contain no properties is called an empty object.
• Object must be a proper noun, not a common noun. 

Use Object.keys() method

Object. keys() is a method used to create an array with all an object’s keys.

Syntax:

Object.keys(object)

Parameter: None

Because this method returns an array of critical values, we can access it using the key’s index. So we can use the index we’re looking for to get the critical value we’re looking for and then access the value from the object as usual. This method works quite effectively.

import React, { useState } from "react";

const Object = { cat: "Tom", mouse: "Jerry" };
const keys = Object.keys(object);

function App() {
  const [value, setValue] = useState("");
  return (
    <div className="App">
      <h2>Get an Object's Value by Index in JavaScript | LearnShareIT</h2>
      <h3>{JSON.stringify(value)} </h3>
      <button
        onClick={() => {
          setValue(object[keys[0]]);
        }}
      >
        Get value
      </button>
    </div>
  );
}

export default App;

Output:

As in the example above, when you use the Object. keys() method on the given object, it will return an array containing the keys of the object [“cat”, “mouse”]. When you press the button on the screen, the program will access the value whose key[0] in the array above is “cat”. So we can get an object’s value by index in JavaScript, or you can refer to the below.

Use Object.values() method

The Object. values() method returns an enumerable array of property values ​​of a given object itself, in the same order provided by a for … in the loop.

Syntax:

Object.values(obj);

Parameter: None

Because just like Object. keys() method, Object. values() also returns an array of object values​​, and with an array, we can use the index to access its elements. For example, we point to the value Object. values(Object)[0], then ide will return the first value of the values ​​array. See the example below:

Code:

import React, { useState } from "react";

const Object = { cat: "Tom", mouse: "Jerry" };

function App() {
  const [value, setValue] = useState("");
  return (
    <div className="App">
      <h2>Get an Object's Value by Index in JavaScript | LearnShareIT</h2>
      <h3>{JSON.stringify(value)} </h3>
      <button
        onClick={() => {
          setValue(Object.values(object)[0]);
        }}
      >
        Get value
      </button>
    </div>
  );
}

export default App;

With this approach, we don’t need to find the array of the Object’s keys like in the first way, but we will get an object’s value from the index we already know. Hope these methods are helpful to you.

Summary

To summarize, there are many ways to get an object’s value by index in JavaScript. After reading this article, we probably know that you should use Object.values() method because it is easier to access values ​​by index.

Maybe you are interested:

• Check if an object is empty in JavaScript
• Check if a key exists in a javaScript object
• Check if an Object Property is Undefined in JavaScript

Nathaniel Kirk

Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.

---

Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs