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!
fetch API
One of the worst kept secrets about AJAX on the web is that the underlying API for it,
XMLHttpRequest
, wasn’t really made for what we’ve been using it for. We’ve done well to create elegant APIs around XHR but we know we can do better. Our effort to…Chris Coyier’s Favorite CodePen Demos
David asked me if I’d be up for a guest post picking out some of my favorite Pens from CodePen. A daunting task! There are so many! I managed to pick a few though that have blown me away over the past few months. If you…
jQuery Link Nudging
A few weeks back I wrote an article about MooTools Link Nudging, which is essentially a classy, subtle link animation achieved by adding left padding on mouseover and removing it on mouseout. Here’s how to do it using jQuery: The jQuery JavaScript It’s important to keep…