Skip to main content

Access First property of a javascript object

The First property of an object can be accessed, by using the Object.values() method.

The Object.values() method returns an array of a given object's own enumerable property values starting from 0 to N(N number of properties). The functionality is the same as that of for..in loop, but the only difference being for...in loop enumerates properties in the prototype chain as well

const object = {
a: 'Andrew',
b: 42,
c: false
};

const firstValue= Object.values(object)[0];
console.log(firstValue); // Andrew

Object.values() returns an array whose elements are the enumerable property values found on the object. The ordering of the properties is the same as that given by looping over the property values of the object manually.

Access First Property using Object.Values Example


const object1 = { a: 'bar', b: 42 };
console.log(Object.values(object1)); // ['bar', 42]

// Array-like object
const arrayLikeObj1 = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Object.values(arrayLikeObj1 )); // ['a', 'b', 'c']

// Array-like object with random key ordering but
// the values are returned in a sorted order of the keys
const arrayLikeObj2 = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Object.values(arrayLikeObj2 )); // ['b', 'c', 'a']

info

Object.values is not natively supported by Internet Explorer.

First Property for Internet Explorer using Object.Keys

For IE add a polyfill for it or use babel to compile your code to an older version of JavaScript that the browser can understand. An alternate to Object.values for IE would be to use Object.keys

const object = {a: '1', b: '2', c: '3'};

const keys = Object.keys(object)
console.log(keys)// ['a', 'b', 'c']

To access the First Value, use the code below.

const object = {a: '1',b: '2', c: '3'};

const keys = Object.keys(object);
// Values present in keys = ['a','b','c']

const value = obj[keys[0]];
// value = 1
console.log(value);

The Object.values should be your default go-to method however if you have to support Internet Explorer and don't use babel, the Object.keys method is better approach.


Thanks for reading!

If you liked this article, feel free to check out and explore more topics @socialcol.com