How To Access The First Property Of An Object In JavaScript

To access the first property of an object in JavaScript, I will use some built-in methods in javascript like Object.keys(), loop, Object.values(),..etc. Here are a few examples to help us understand and use them. Let’s read this article now.

Access the first property of an object in JavaScript

Method 1: Use Object.keys() method 

Object.keys() is a built-in Javascript method that returns an array iterator object with the keys in an object. We can use it to access the first property of an object in JavaScript.

Syntax:

Object.keys(myObject)

Parameters:

• myObject: Indispensable, is the Object that you want to get the first property.

Example:

let person = {
	FirstName: 'John',
	LastName: 'Smith',
	DateOfBirth: 'Sep 14 1990'
};
var firstPropertyName = Object.keys(person)[0]; 
var firstPropertyValue = person[firstPropertyName]; 
console.log(firstPropertyName + ": " + firstPropertyValue);

Output:

FirstName: John

In the above example, after I use Object.keys(), the program returns an array of iterator objects. I use it to get the key of the first property and use it to get the value, then output to the console that the value is the key/value of the first property.

We can take any property you want if you pass it in its correct position in the object.

let person = {
	FirstName: 'John',
	LastName: 'Smith',
	DateOfBirth: 'Sep 14 1990'
};
var secondPropertyName = Object.keys(person)[1]; 
var secondPropertyValue = person[secondPropertyName]; 
console.log(secondPropertyName + ": " + secondPropertyValue);

Output:

LastName: Smith

Same above, I just changed the position and got the second property.

Method 2: Use for loop

We can also use the for loop to access the first property of an object in JavaScript by traversing each property and printing its key/value in output. The result in this example is the first position.

Example:

let personObject = {
	FirstName: 'John',
	LastName: 'Smith',
	DateOfBirth: 'Sep 14 1990'
};

for (var k in personObject) {
  	console.log(k + ": " + personObject[k]);
  	break;
}

Output:

FirstName: John

We see that the return result is only one line, which means that in the for statement, we only output the value once, thanks to the break statement. Without this command, after this code we will get the result:

FirstName: John
LastName: Smith
DateOfBirth: Sep 14 1990

When we see that the program will output all the properties of the Object to the screen in this method, it is more complicated to get any property than when we use the Object.keys() method and Object.entries() method.

Method 3: Use Object.entries() method

Object.entries() is a built-in Javascript method that returns an array containing the listable key\value property of Object. We can use it to access the first property of an Object in JavaScript.

Syntax:

Object.entries(myObject)

Parameters:

• myObject: Indispensable, is the Object that you want to get the first property.

Example:

let person = {
	FirstName: 'John',
	LastName: 'Smith',
	DateOfBirth: 'Sep 14 1990'
};
var firstPropertyName = Object.entries(person)[0][0];
var firstPropertyValue = person[firstPropertyName];
console.log(firstPropertyName + ": " + firstPropertyValue);

Output:

FirstName: John

After calling Object, we see an array containing all the key values ​​in ‘person’. We get the first key from that array, and from that key, we get its value.

Like Object.keys(), we can get any position quickly. I would do it like this:

Example:

let person = {
	FirstName: 'John',
	LastName: 'Smith',
	DateOfBirth: 'Sep 14 1990'
};
var firstPropertyName = Object.entries(person)[2][0];
var firstPropertyValue = person[firstPropertyName];
console.log(firstPropertyName + ": " + firstPropertyValue);

Output:

DateOfBirth: Sep 14 1990

Summary

I have introduced several ways to access the first property of an object in JavaScript. The above ways are straightforward to implement, so focus and practice to help to you remember longer. I hope this article helps to you. Good luck.

Maybe you are interested:

• How to get the Class Name of an Object in JavaScript
• Check if an object is empty in JavaScript
• Check if a key exists in a javaScript object

Tom Joseph

My name is Tom Joseph, and I work as a software engineer. I enjoy programming and passing on my experience. C, C++, JAVA, and Python are my strong programming languages that I can share with everyone. In addition, I have also developed projects using Javascript, html, css.

Job: Developer
Name of the university: UTC
Programming Languages: C, C++, Javascript, JAVA, python, html, css