How to Get an Object's Key or Value by Index in JavaScript
In JavaScript, objects are fundamentally unordered collections of key-value pairs. Unlike arrays, they do not have a numerical index that you can use to directly access the "first" or "second" property. However, since the introduction of ES2015, the order of an object's keys is preserved in a predictable way for most operations.
This guide will teach you how to leverage this predictable ordering to get a key or value by its index. You will learn to use the Object.keys(), Object.values(), and Object.entries() methods to effectively access object properties by their position.
The Core Concept: Objects are Not Natively Indexed
It is crucial to understand that you cannot do this:
const myObj = { name: 'Alice', age: 30 };
// ⛔️ This does NOT work. Objects don't have numerical indexes.
const firstValue = myObj[0]; // Returns undefined
To access properties by index, you must first convert the object's keys or values into an array, which is indexed. The modern Object static methods are the perfect tools for this.
How to Get an Object's Key by Index
The Object.keys() method returns an array of an object's own enumerable property keys in a consistent order. You can then access an element of this array by its index.
For example, you have an object and need to find the name of its second property. You can do in this way:
const user = { name: 'Alice', age: 30 };
// 1. Get an array of the object's keys.
const keys = Object.keys(user);
console.log(keys); // Output: ['name', 'age']
// 2. Access the key at the desired index.
const firstKey = keys[0];
const secondKey = keys[1];
console.log(firstKey); // Output: "name"
console.log(secondKey); // Output: "age"
How to Get an Object's Value by Index
Similarly, the Object.values() method returns an array of an object's own enumerable property values.
You have an object and need to get its first value without knowing the key's name.
const user = { name: 'Alice', age: 30 };
Solution:
const user = { name: 'Alice', age: 30 };
// 1. Get an array of the object's values.
const values = Object.values(user);
console.log(values); // Output: ['Alice', 30]
// 2. Access the value at the desired index.
const firstValue = values[0];
console.log(firstValue); // Output: "Alice"
This is the most direct way to get a value by its position.
How to Get a [Key, Value] Pair by Index
If you need both the key and the value at a specific index, the Object.entries() method is the right tool. It returns an array of the object's own enumerable [key, value] pairs.
const user = { name: 'Alice', age: 30, country: 'Canada' };
// 1. Get an array of [key, value] pairs.
const entries = Object.entries(user);
console.log(entries);
/* Output:
[
[ 'name', 'Alice' ],
[ 'age', 30 ],
[ 'country', 'Canada' ]
]
*/
// 2. Access the pair at the desired index.
const secondEntry = entries[1];
console.log(secondEntry);
// Output: ['age', 30]
// You can use array destructuring for a cleaner result
const [key, value] = entries[1];
console.log(`Key: ${key}, Value: ${value}`);
// Output: Key: age, Value: 30
Conclusion
While JavaScript objects are not indexed like arrays, you can reliably access their properties by a numerical index by first converting them into an array.
- To get a key by index, use
Object.keys(obj)[index]. - To get a value by index, the most direct method is
Object.values(obj)[index]. - To get both the key and value by index, use
Object.entries(obj)[index].
These modern, built-in methods provide a clean and declarative way to work with object properties in a predictable, ordered manner.