Object.entries

By  on  

Navigating and managing data structures is a really important skill for every level of engineer to have and improve upon. Over the years, the JavaScript language has continued to provide more methods for managing data structures, from Object.keys to Object.values and so on. One of my favorites is Object.entries, an API that provides the keys and values via an array of arrays. Let's have a look!

Consider the following object:

const obj = {
    name: "David",
    color: "green",
    balance: 100
}

Traditionally we'd have iterated over keys via a for loop, then use array syntax to get values:

const obj = {
    name: "David",
    color: "green",
    balance: 100
}

for (const key in obj) {
    const value = obj[key];
}

We do have Object.keys() and Object.values() to get each now, but neither method provides a relationship to the parent key or value. I really love using Object.entries to maintain that relationship and get both the key and value:

Object.entries({
    name: "David",
    color: "green",
    balance: 100
}).forEach(([key, value]) => console.log(key, value))

/*
name David
color green
balance 100
*/

Object.entries is such a useful method when you need both a key and value. Throw away those old for loops and Array-like syntaxes and use Object.entries like a pro!

Recent Features

  • By
    Conquering Impostor Syndrome

    Two years ago I documented my struggles with Imposter Syndrome and the response was immense.  I received messages of support and commiseration from new web developers, veteran engineers, and even persons of all experience levels in other professions.  I've even caught myself reading the post...

  • By
    Responsive and Infinitely Scalable JS Animations

    Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() - this is the hook that allows Javascript code to synchronize with a web browser's native paint loop. Animations using this method can run at 60 fps and deliver fantastic...

Incredible Demos

  • By
    MooTools Zebra Table Plugin

    I released my first MooTools class over a year ago. It was a really minimalistic approach to zebra tables and a great first class to write. I took some time to update and improve the class. The XHTML You may have as many tables as...

  • By
    Create a Download Package Using MooTools Moousture

    Zohaib Sibt-e-Hassan recently released a great mouse gestures library for MooTools called Moousture. Moousture allows you to trigger functionality by moving your mouse in specified custom patterns. Too illustrate Moousture's value, I've created an image download builder using Mooustures and PHP. The XHTML We provide...

Discussion

  1. I had a big discussion on this over at StackOverflow : https://stackoverflow.com/q/66074709/126833

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!