How to access the first value of an object using JavaScript?

In this article, you will understand how to access the first value of an object using JavaScript.

The first value of an object refers to the value of the first property in the object. JavaScript provides several methods to retrieve this value, depending on whether you're working with objects or arrays.

Using Object.values() for Objects

The Object.values() method returns an array of all enumerable property values, making it easy to access the first value.

const inputObject = {1: 'JavaScript', 2: 'Python', 3: 'HTML'};
console.log("A key-value pair object is defined and its values are: ", inputObject);

console.log("\nThe first value of the object is: ");
const firstValue = Object.values(inputObject)[0]; 
console.log(firstValue);

A key-value pair object is defined and its values are:  { '1': 'JavaScript', '2': 'Python', '3': 'HTML' }

The first value of the object is: 
JavaScript

Direct Array Access

For arrays, you can directly access the first element using bracket notation with index 0.

const arrayObject = ['JavaScript', 'Python', 'HTML'];
console.log("An array object is defined and its values are: ", arrayObject);

console.log("\nThe first value of the array is: ");
const firstValue = arrayObject[0]; 
console.log(firstValue);

An array object is defined and its values are:  [ 'JavaScript', 'Python', 'HTML' ]

The first value of the array is: 
JavaScript

Using for...in Loop

Another approach is to use a for...in loop to get the first property value directly.

const sampleObject = {name: 'John', age: 25, city: 'New York'};

function getFirstValue(obj) {
    for (let key in obj) {
        return obj[key]; // Returns first value and exits
    }
}

const firstValue = getFirstValue(sampleObject);
console.log("First value using for...in loop:", firstValue);

First value using for...in loop: John

Comparison of Methods

Key Points

• Object.values() works for both objects and arrays but creates a new array

• Direct bracket notation [0] is fastest for arrays

• The for...in loop provides early exit capability

• Property order in objects is guaranteed for string keys in insertion order (ES2015+)

Conclusion

Use Object.values()[0] for objects and direct [0] access for arrays. The for...in approach offers more control when you need conditional logic for retrieving the first value.