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

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:

console.log(Object.keys(obj));
// 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:

console.log(Object.values(obj));
// 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.

console.log(Object.entries(obj));
// 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);
console.log(Object.fromEntries(objEntries));
// 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"]];
console.log(Object.fromEntries(arr));
// 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