Object.entries() & Object.values() in EcmaScript2017 (ES8) with examples

Paul Shan Fri Feb 17 2017

The two new utility apis Object.entries(obj) & Object.values(obj) are in stage 4 at the moment and Chrome & Firefox has already included them in the browsers as ES8 feature. Though there is a chance for these two apis to get changed as the spec is still not finalized. However, stage 4 proposals hardly changes.

Object.entries(obj)

This new api in Object.entries takes an object as a parameter and return an array of arrays. The signature of the method is like Object.entries(value : any) : Array<[string,any]>. So the array elements inside the returned array will have a string in it’s position zero, which will be the key of the processed object and in position 1 it will hold the value against that particular key.

let obj = {
    prop1: {
        a: "something"
    },
    name: "Paul",
    company: ["Void", "Canvas"]
};

Object.entries(obj); 
//[ ["prop1", {a: "something"}], ["name", "Paul"], ["company", ["Void", "Canvas"]] ]

If the given object has any Symbol property; Object.entries will simply ignore that. Just like the symbols are ignored in any other operations like Object.keys() or even in JSON.stringify().

let obj = {
    name: "Paul",
    company: ["Void", "Canvas"],
    Symbol("foo"): "bar"
};

Object.entries(obj); 
//[ ["name", "Paul"], ["company", ["Void", "Canvas"]] ]

Benefits of Object.entries(obj)

The conversion of Object to Map is super easy now. As Map constructor can receive an array of arrays as argument and Object.entries also returns that, converting an array; so the object to Map conversion is like below now.

    let obj = {
        name: "Paul",
        company: ["Void", "Canvas"]
    };
    let map = new Map(Object.entries(obj));

Iteration through an object’s property was one of the commonly used code snippet in JavaScript code base. But Now it’s easier than never before. No need to use Object.keys(obj).forEach or hasOwnProperty() kind of check. It’s simple as below now.

let obj = {
    name: "Paul",
    company: ["Void", "Canvas"]
};

for(var [k, v] of Object.entries(obj)){
    console.log(`key is ${k}. Value is ${v}`);
}

Object.values(obj)

It’s similar to Object.keys(obj); only difference is it returns the list of values instead of keys, as the name suggests. The signature is like Object.values(value : any) : Array<any>.

let obj = {
    name: "Paul",
    company: ["Void", "Canvas"]
};

Object.values(obj);
//["Paul", ["Void", "Canvas"]]

There was a lot of discussion on whether this api should be included as we have for-of loop already. But finally it’s in stage 4 and browsers have already started implementation, so probably it will remain there.

vanilla jsES8

Written By

Object.entries() & Object.values() in EcmaScript2017 (ES8) with examples