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

Incredible Demos

  • By
    Animated AJAX Record Deletion Using jQuery

    I'm a huge fan of WordPress' method of individual article deletion. You click the delete link, the menu item animates red, and the item disappears. Here's how to achieve that functionality with jQuery JavaScript. The PHP - Content & Header The following snippet goes at the...

  • By
    Create a Context Menu with Dojo and Dijit

    Context menus, used in the right type of web application, can be invaluable.  They provide shortcut methods to different functionality within the application and, with just a right click, they are readily available.  Dojo's Dijit frameworks provides an easy way to create stylish, flexible context...

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!