Explaining The Basics of The JavaScript Object.keys, Object.values, and Object.entries Methods

When working with data we may have the need to translate an object into an array. These methods allows us to easily do so.

To begin, we are given an object that contains a list of US states and their capitals.

const states = {"AZ": "Phoenix","NY": "Albany","VA": "Richmond","Wisconsin": "Madison"}

Object.keys()

If we are asked to return all the keys (Javascript objects are written as “key: value” pairs) we would use the Object.keys() method.

function displayKeys(){

const states = {"AZ": "Phoenix","NY": "Albany","VA": "Richmond","Wisconsin": "Madison"}

return Object.keys(states); // We pass the object as the argument.

// This statement will return an array of [ 'AZ', 'NY', 'VA', // 'Wisconsin' ].}

displayKeys(); // Function Call

Simple enough?

Object.values()

Object.values is a very similar method to Object.keys. However, it returns an array with the values of the submitted object instead of the keys.

(Key: ->Value)

Here’s what it looks like in action.

function displayValues(){

const states = {"AZ": "Phoenix","NY": "Albany","VA": "Richmond","Wisconsin": "Madison"}

return Object.values(states); // We pass the object as the argument.

// This statement will return an array of [ 'Phoenix', 'Albany', // 'Richmond', 'Madison' ].

}

displayValues(); // Function Call

Object.entries()

Finally, we have the Object.entries method which is slightly different to the previous two methods. Object.entries does not choose any specific portion of the key-value pair, but rather translates both the key as well as the value. The difference here is that Object.entries return an array of arrays while the Object.keys and Object.values methods both return a single array.

Here, using the Object.entries method, there is one array which wraps the entire translated object, and each key-value pair from the object is positioned in its own separate sub-array.

Here’s an example of the array within an array that will be returned.

[ [ 'AZ', 'Phoenix' ],[ 'NY', 'Albany' ],[ 'VA', 'Richmond' ],[ 'Wisconsin', 'Madison' ] ]

Here’s a full example of the Object.entries method.

function displayEntries(){

const states = {"AZ": "Phoenix","NY": "Albany","VA": "Richmond","Wisconsin": "Madison"}

return Object.entries(states);// We pass the object as the argument.// This statement will return an array of:// [ [ 'AZ', 'Phoenix' ], [ 'NY', 'Albany' ],// [ 'VA', 'Richmond'], [ 'Wisconsin', 'Madison' ] ]

}

displayEntries(); // Function Call

Ordering of Returned Elements

The ordering of the items in the array depends on the type of key in the key-value pair. If numeric keys are used, then the values will be ordered in the array based on the numeric value of their keys

For example:

const states = {4: "Phoenix",1: "Albany",2: "Richmond",3: "Madison"}

// The resulting array will be ordered like so:

[ [ '1', 'Albany' ],[ '2', 'Richmond' ],[ '3', 'Madison' ],[ '4', 'Phoenix' ] ]

If the keys are not numerical, the elements in the returned array will be in the order they were originally in.

Wrapping Up

Please be aware that the keyword “keys”, “values”, or “entries” must be lowercase.

Additionally, if you pass in a non-object as the argument to your method, the method will attempt to coerce that item into an object which will then be translated to an array. This may be the cause of some unusual errors.

Example:

function displayEntries(){

const notAnObject = "Medium.com/@MendelBak"

return Object.values(notAnObject);// The result of this would be:// [ 'M', 'e', 'd', 'i', 'u', 'm', '.', 'c', 'o', 'm', '/', '@',// 'M', 'e', 'n', 'd', 'e', 'l', 'B', 'a', 'k' ]}

displayEntries(); // Function Call

If you enjoyed this article please share it or applaud in order to help others to find it.

If you have any questions or comments, please leave a comment below.