Skip to main content

How to Get the First Property of a JavaScript Object

In JavaScript, a common task is to access the "first" property of an object. However, this is a more nuanced operation than it appears. Historically, JavaScript objects were unordered collections of key-value pairs, meaning there was no reliable concept of a "first" or "last" property.

While modern JavaScript (ES2015 and newer) has introduced a defined order for object properties based on their insertion, it's crucial to understand that an object's primary purpose is not to be an ordered list like an array. This guide will explain this key distinction and show you the modern, reliable methods for accessing the first property of an object using Object.keys(), Object.values(), and Object.entries().

Object Property Order in JavaScript​

Before ES2015, the order of properties in a plain JavaScript object was not guaranteed. Different JavaScript engines could list them in different orders, making any attempt to get the "first" property unreliable.

Since ES2015, the property order is defined and predictable: keys are iterated in the order they were inserted (for non-integer keys). While this makes the following methods reliable in modern environments, you should always remember that if the order of your data is critically important, an Array or a Map is a more appropriate data structure.

This is the most common and straightforward method. It involves getting an array of all the object's keys and then simply taking the first element from that array.

The logic:

  1. Use Object.keys() to get an array of the object's property names in insertion order.
  2. Access the first element of the array at index 0.

The solution:

const user = {
  name: 'John Doe',
  age: 30,
  email: 'john.doe@example.com'
};

// Step 1: Get an array of keys
const keys = Object.keys(user); // ['name', 'age', 'email']

// Step 2: Get the first key
const firstKey = keys[0];

// Step 3: Use the key to get the value
const firstValue = user[firstKey];

console.log(keys)                           // Output: ['name', 'age', 'email']
console.log(`First Key: ${firstKey}`);      // Output: First Key: name
console.log(`First Value: ${firstValue}`);  // Output: First Value: John Doe
note

You can also write this as a concise one-liner:

const firstValue = user[Object.keys(user)[0]];
console.log(firstValue); // Output: John Doe

Solution 2: Get the First Value Directly with Object.values()​

If you only need the first value and don't care about its key, Object.values() is a more direct approach.

The logic:

  1. Use Object.values() to get an array of the object's values in insertion order.
  2. Access the first element of the array at index 0.

The solution:

const user = {
  name: 'John Doe',
  age: 30,
  email: 'john.doe@example.com'
};

const firstValue = Object.values(user)[0];

console.log(firstValue); // Output: John Doe
note

You can also use array destructuring for a clean, readable assignment:

const [firstValue] = Object.values(user);
console.log(firstValue); // Output: John Doe

Solution 3: Get the First Key and Value Together with Object.entries()​

If you need both the first key and its corresponding value, Object.entries() is the most efficient method. It returns an array of [key, value] pairs.

The logci

  1. Use Object.entries() to get an array of [key, value] pairs.
  2. Access the first element of the array ([0]), which will be the first [key, value] pair.
  3. Use array destructuring to assign the key and value to their own variables.

The solution:

const user = {
  name: 'John Doe',
  age: 30,
  email: 'john.doe@example.com'
};

const firstEntry = Object.entries(user)[0];
// firstEntry is ['name', 'John Doe']

const [firstKey, firstValue] = firstEntry;

console.log(`First Key: ${firstKey}`);      // Output: First Key: name
console.log(`First Value: ${firstValue}`);  // Output: First Value: John Doe

An Older Method to Avoid: The for...in Loop​

You can use a for...in loop with a break statement to get the first enumerable property of an object. However, this method is not recommended for this task.

The Problematic Code:

const user = { name: 'John Doe', age: 30 };
let firstKey;

for (const key in user) {
  firstKey = key;
  break; // Exit the loop after the first iteration
}

console.log(firstKey); // Output: name

Why you should avoid this:

  • No Guaranteed Order (Historically): The iteration order of for...in was not specified in older JavaScript standards, making it unreliable.
  • Iterates Over the Prototype Chain: A for...in loop will also iterate over inherited properties, not just the object's own properties, which can lead to unexpected results.
note

Use Object.keys(), Object.values(), or Object.entries() for a predictable and reliable outcome.

Conclusion​

While JavaScript objects were traditionally unordered, modern standards provide a predictable order based on property insertion.

To get the first property of an object, you have several reliable options:

  • Use Object.keys(obj)[0] to get the first key. This is the most common and versatile approach.
  • Use Object.values(obj)[0] to get the first value directly.
  • Use Object.entries(obj)[0] to get the first [key, value] pair efficiently.

Avoid using the older for...in loop for this task, as it is less reliable and can have unintended side effects.

Table of Contents