Object.entries in Javascript

Object.entries in javascript is the most fascinating thing I’ve come across this week. Historically, iterating over objects hasn’t always been the sexiest thing to do. As a comparison, beginner javascript engineers deal with for loops over arrays on a regular basis, but objects have not always had that same je ne se quios about them. Ofcourse with ECMAScript6, the for...in loop came to be and life became a little easier. Object.entries however, is a welcome progression down this path of iterating over objects, and over this article I'll be showing you just how elegant this tool is for crunching your objects in JS. Let’s dive in.

Syntax

Getting syntax out of the way is how I like to go, so this is how that works

const inevitableObj = {1: "rain", 2: "tax" }

Object.entries(inevitableObj)

Where inevitableObj is an object we are looking to work through with.

Usage

Using Object.entries to iterate over an object is as easy as this

const inevitableObj = {1: "rain", 2: "tax" }

for (const [key, value] of Object.entries(inevitableObj)) {
  console.log(`this is key: ${key}. this is value: ${value}. use this information wisely`);
}

This is particularly great because you can isolate the key and value for use as you wish without needing to write anything more complicated than is up there.

With great power, comes great responsibility, so before you wield this tool, there are a couple of things you should know

• According to the MDN docs here, Object.entries returns “An array of the given object's own enumerable string-keyed property key-value pairs. Each key-value pair is an array with two elements: the first element is the property key (which is always a string), and the second element is the property value”. This is fancy talk for saying that the an object will be convert into a nested array of values with each key value pair in an array all wrapped with an main array.

• Randomised strings used as keys in objects will be arranged into what javascript considers to be hierarchical order. This just means that Object.entries will reorder an object with random key pairings.
  

// So this 
const randomKeys = { 332: "object", 211: "in", 12: "keys", 9: "ordered" }; 

// passes through this 
console.log(Object.entries(randomKeys)); 

// to become this
//[ ['9', 'ordered'], ['12', 'keys'], ['211', 'in'], ['332', 'object'] ]

• Careful, as non-objects will be coerced into objects. Strings will be split into characters, assigned a 0-index numbering and then made into a nested array. It looks like this.

console.log(Object.entries("fuego");

// [['0', 'f'], ['1', 'u'], ['2', 'e'], ['3', 'g'], ['5', 'o']]

One final thing. Now this one, I haven't used in development but I can’t wait to use it. The Object.entries operator is allows a conversion from an Object to a Map allowing even more versatility around how data is presented. This is particularly useful because Maps have built-in methods like forEach, values, keys, and entries, which make it easy to iterate over the keys and values, get arrays of keys or values, or manipulate the map's content. While objects have methods, they are not built into the object and they need to be accessed through the Object constructor.

So that’s it! Object cherrypicking, rearrangement and an undue amount of coercion done just right all through Object.entries. This was a quick brain dump so please let me know what you think in the comments or my socials. Cheers and do have a fantastic day.