single-head-img

ES8 News – Object values and entries

July 14, 2017

ECMAScript8 – ES8 was officially released in the end of June. There are many new stuffs which will give more opportunities for developers to write code. After reading about some of them, I singed out one great feature from my perspective. That’s two new methods: Object.values and Object.entries and both of them are there to work with objects (I wrote more about objects in my previous post ES6 Class.

Object.values

This new ES8 method (Object.value) return an array of all property values from object. The order of given values is the same as that provided by for in loop. To get values from object by using this method, you must write very simple code, like:

Object.values(obj)

 

I made few examples to show you how to use this method properly and I will also explain multiple ways of usage. So, the first example will be with object where keys are characters (or words):

const obj = { a: 'string', word: 1 };
console.log( Object.values(obj) ); // ['string', 1]

 

As you can see, Object.value method doesn’t care so much about object keys, when keys are characters or words, so this method will return values in same way as properties were written to object (firstly, it returns “string”, than “1”).

Another example will be with objects without keys as numbers. The difference with keys as characters or numbers are that keys as numbers are ordering values in a numerical order, so to explain it better, I will write two scenarios there.

const obj = { 1: 'a', 2: 'b', 3: 'c' };
console.log( Object.values(obj) ); // ['a', 'b', 'c']

// second example - random key numbers
const obj2 = { 9: 'a', 1: 'b', 4: 'c' };
console.log( Object.values(obj2) ); // ['b', 'c', 'a']

 

When objects don’t have [key, value] pairs, Object.value method will return it like there is indexes from 0 to length of array. The same way it works if we set string as an object (second example).

const obj = ['js', 'es8', 'a', 9]; // same as { 0: 'js', 1: 'es8', 2: 'a', 3: 9 };
console.log( Object.values(obj) ); // ['js', 'es8', 'a', 9]

// second example - string as object
const obj2 = 'str'; // same as { 0: 's', 1: 't', 2: 'r'};
console.log( Object.values(obj2)); // ['s', 't', 'r']

 

Object.entries

Object.entries method returns [key, value] pairs and this method is working similar to Object.values method, so I will use same examples and all of them are below.

const obj = { a: 'string', word: 1 };
console.log( Object.entries(obj) ); // [["a", "string"], ["word], 1]

const obj2 = { 1: 'a', 2: 'b', 3: 'c' };
console.log( Object.entries(obj2) ); // [["1", "a"], ["2", "b"], ["3", "c"]]

const obj3 = { 9: 'a', 1: 'b', 4: 'c' };
console.log( Object.entries(obj3) ); // [["1", "b"], ["4", "c"], ["9", "a"]]

const obj4 = ['js', 'es8', 'a', 9];
console.log( Object.entries(obj4) ); // [["0", "js"], ["1", "es8"], ["2", "a"], ["3", 9]]

const obj5 = 'str';
console.log( Object.entries(obj5)); // [["0", "s"], ["1", "t"], ["2", "r"]]

 

You see that Object.values and Object.entries return same values, but Object.entries returns keys also, that’s main difference.

Conclusion

You see that this new functionalities will bring more opportunities to work with. ES8 gives many more methods and if I got any interesting like this, I would write about it. Till that moment, enjoy using Object.values and Object.entries methods.

LEAVE A COMMENT