How to Get an Object’s Keys and Values in JavaScript

  • 3 min read
  • December 16, 2020
linkedin twitter facebook reddit
linkedin twitter facebook reddit

In JavaScript, getting the keys and values that comprise an object is very easy. You can retrieve each object’s keys, values, or both combined into an array.

The examples below use the following object:

const obj = { name: 'Daniel', age: 40, occupation: 'Engineer', level: 4 };

Getting an object’s keys

The Object.keys() method returns an array of strings containing all of the object’s keys, sorted by order of appearance:

// Expected output: ["name", "age", "occupation", "level"]

Here, as well as in the following examples, we pass in the object from which the data is needed as a parameter.

Getting an object’s values

The Object.values() method returns an array of strings containing all of the object’s field values, sorted by order of appearance:

// Expected output: ["Daniel", 40, "Engineer", 4]

Getting an object’s entries

The Object.entries() method returns an array of arrays. Each array consists of a pair of values. The first string is the name of a key in the object, the second is its corresponding value. In the example below, the first element in the array is [“name”, “Daniel”]. In this sub-array, “name” is the first key of the object obj, and “Daniel” is the first value of the object.

// Expected output: [["name", "Daniel"], ["age", 40], ["occupation", "Engineer"], ["level", 4]]

Tip: It is possible to recreate the original object using the return value of the Object.entries() method.

Reform an object

Given an array of key-value pairs as returned by Object.entries(), we can use the same output to recreate the original object. This is achieved with Object.fromEntries():

const objEntries = Object.entries(obj);
// Expected output: {name: "Daniel", age: 40, occupation: "Engineer", level: 4}

The Object.fromEntries() method forms an object out of an iterable argument. You cannot simply pass an array with two elements, as this is not the format returned by Object.entries(). The input to Object.fromEntries() needs to be an array of arrays, as provided in the example above. It is important to note, though, that, arrays that do not obey the “two items rule” will still be processed. You can see this in the following example:

const arr = [[4, 28, 167, "JavaScript"], ["One", "Two", "Three"], ["hello"]];
// Expected output: {4: 28, One: "Two", hello: undefined}

In the example above, the first array element has four items, the second array element has three items and the third array element has only one item. In each of these cases, only the first two items are used when forming an object. If there is only a single element present, the corresponding value of that element is undefined.


Related Articles:

JavaScript – Objects explained

JavaScript – How to Use JSON.stringify

JavaScript – How to Use Asynchronous Functions

Related Posts

How to Use Array reduce method in JavaScript

How to Use Array reduce method in JavaScript

The Array object’s reduce method is an iteration method which, similar to other iteration methods (map(), forEach(), filter() etc.) helps us work through all of the

How to Use the Array push() Method in JavaScript

How to Use the Array push() Method in JavaScript

The Array push() method adds elements to the end of an array. Basic Array.push() example The following example shows how to use the Array.push() method to

How to Change CSS Using JavaScript

How to Change CSS Using JavaScript

Cascading Style Sheets (CSS) is used to design the layout of a webpage. CSS is a set of structured rules describing the layout of elements in