Object.entries
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!
Contents
Create a CSS Cube
CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals. Add animation and you’ve got something really neat. Unfortunately each CSS cube tutorial I’ve read is a bit…
Serving Fonts from CDN
For maximum performance, we all know we must put our assets on CDN (another domain). Along with those assets are custom web fonts. Unfortunately custom web fonts via CDN (or any cross-domain font request) don’t work in Firefox or Internet Explorer (correctly so, by spec) though…
GitHub-Style Sliding Links
GitHub seems to change a lot but not really change at all, if that makes any sense; the updates come often but are always fairly small. I spotted one of the most recent updates on the pull request page. Links to long branch…
Rotate Elements with CSS Transformations
I’ve gone on a million rants about the lack of progress with CSS and how I’m happy that both JavaScript and browser-specific CSS have tried to push web design forward. One of those browser-specific CSS properties we love is CSS transformations. CSS transformations…
[ad_2]
Source link