Object.entries in Javascript
Published: 2023-02-17 09:06:18

---
title: Object.entries in Javascript
published: true
description: #javascript #perfomance #programming
tags: 
# cover_image: https://images.app.goo.gl/3qQAu4XMZHiccRgc6
# Use a ratio of 100:42 for best results.
# published_at: 2023-02-17 08:40 +0000
---

`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

```jsx

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 

```jsx
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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries) 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. 

```jsx
// 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. 

```jsx
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.