Reflecting over JavaScript object properties, or more commonly object maps, is something that I always forget and have to look up over and over again, so I'm writing it down in hopes I can remember and have an easy place to look it up.

Iterating over a JavaScript Object

JavaScript has a rudimentary object iteration mechanism built into it so if you have an object and you want to get at all the properties and values of an object you can simply do:

Getting a property by Name

Getting Object Properties by Index

What's not so straight forward is if you want to get both the value as well as the key - as a key value pair. This seems an odd request at first but it comes up frequently if you need to query or filter the data in any way using map, find or filter functions for example.

Quite frequently I want to be able to retrieve values for a specific key value pair where I may not know what the key name is, but only the index (most commonly the first item).

Enter the Object.keys() method which allows you to get a specific property name by index:

JavaScript Maps as Dictionaries

For me I run into this most commonly with object maps. Lots of applications including my own use object maps for holding lists of values or enumerated types. For example, in Markdown Monster I have a list of emoji's that are kept as a map with the markdown expansion (ie :smile:) as the key and the actual Emoji character as the value.

We often treat maps as dictionaries to hold look up values. But the interface to do this really sucks because a map is not really a good structure to filter or search because of the clunky object parsing interface you have to go through. However, I still use them because maps happen to serialize much nicer than an explicit object.

So this

emojis: {
":100:" : "💯",
":1234:" : "🔢",
}

is a bit cleaner than:

emojis: {
key: ":100:", value: "💯",
key: ":1234:" value: "🔢"
}

But the latter is easier to deal with if you use array.map/filter/find etc:

There's really no easy equivalent that you can use for a map that works the same.

A few simple Helpers

In order query a map a few helpers come in handy.

The following functions facilitate some of these tasks. Note you can also hang these off the Object prototype to make available natively on all objects, but I try to avoid that especially for low use case features like this so the functions below explicitly pass in the object to work on 😄.

Get Key and Value by Index

The last scenario is an infrequent iteration one where you may need to get a property by its index. For example, you may have a filtered list where you know there's a fixed result and you just want to grab a specific result - typically the first one.