Get First Property of a Javascript Object

The general requirement we encounter while working with javascript objects is to get the first key-value pair of an object. This article demonstrates easy ways to get a javascript object’s first key/value/property using different methods and various example illustrations.

Table of Contents:

Using Object.keys()

Javascript’s Object.keys() returns an array of enumerable property names of the object. The method iterates the keys in the same order as that of a standard loop.

Example:-

Get the first key-value pair of the object { personFirstName: ‘George’, personLastName: ‘Smith’, dateOfBirth: ‘Nov 14 1984’ , city : ‘Santiago’}

Advertisements

Code:-

let personObject =  { personFirstName: 'George', personLastName: 'Smith', dateOfBirth: 'Nov 14 1984' , city : 'Santiago'};
var firstPropertyName = Object.keys(personObject)[0]; 
var firstPropertyValue = personObject[Object.keys(personObject)[0]]; 
console.log(firstPropertyName + ": " + firstPropertyValue);

Output:-

personFirstName: George

Explanation:-

Here, in the above code, we get an array of all the property names in the Object.keys(personObject). Then in the variable firstPropertyName we access the first element of this array as key, and personObject[Object.keys(personObject)[0]] gives the first property value.

Using iteration

Example:-

Get the first key-value pair of the object { personFirstName: ‘George’, personLastName: ‘Smith’, dateOfBirth: ‘Nov 14 1984’ , city : ‘Santiago’}

Code:-

let personObject =  { personFirstName: 'George', personLastName: 'Smith', dateOfBirth: 'Nov 14 1984' , city : 'Santiago'};
for (var k in personObject) 
{
      console.log( k + ": " + personObject[k]);
      break;
 }

Output:-

personFirstName: George

Explanation:-

Here, in the above code, we iterate the object using a for-in loop but as soon as we get the first property from variable k and first property-value using personObject[k], the loop is broken using the break command.

Using Object.values()

Javascript’s Object.values() returns an array of enumerable property values of the object.

Example:-

Get the first value of the object { personFirstName: ‘George’, personLastName: ‘Smith’, dateOfBirth: ‘Nov 14 1984’ , city : ‘Santiago’}

Code:-

let personObject =  { personFirstName: 'George', personLastName: 'Smith', dateOfBirth: 'Nov 14 1984' , city : 'Santiago'};
var firstPropertyValue = Object.values(personObject)[0]; 
console.log(firstPropertyValue);

Output:-

George

Explanation:-

Here, in the above code, we get an array of all the property values in the Object.values(personObject). Then in the variable firstPropertyValue, we access the first element of this array.

Using Object.entries()

Javascript’s Object.entries() returns an array of enumerable key-value pairs of the object.

Example:-

Get the first key-value pair of the object { personFirstName: ‘George’, personLastName: ‘Smith’, dateOfBirth: ‘Nov 14 1984’ , city : ‘Santiago’}

Code:-

let personObject =  { personFirstName: 'George', personLastName: 'Smith', dateOfBirth: 'Nov 14 1984' , city : 'Santiago'};
var firstPropertyName = Object.entries(personObject)[0][0];
var firstPropertyValue = Object.entries(personObject)[0][1];
console.log(firstPropertyName + ": " + firstPropertyValue);

Output:-

personFirstName: George

Explanation:-

  • Here, in the above code, we get an array of all the key-value pairs of the object personObject using Object.entries(personObject) .
  • Then in the variable firstPropertyName we access the first key(Object.entries(personObject)[0][0]) from this array.
  • In the variable firstPropertyValue we access the first value (Object.entries(personObject)[0][1]) from this array.

I hope this article helped you get the first key/value/property of an object in javascript. Good Luck !!!

Leave a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top