Dictionary Objects in JavaScript and TypeScript

TL;DR: when using an object as a dictionary in TypeScript/ES6, iterate through it using `Object.keys()`.

Coming from statically typed languages, I keep looking for a Map or Dict type in TypeScript (or JavaScript). People use objects for this, though. Objects have key-value pairs in them, and you can add them and delete them and declare them statically and it looks nice, especially in literals.

const dictionary = { 
   impute: “attribute to”,
   weft: “the holding-still strings on a loom”,
}

But using a JavaScript object as a dictionary has its quirks.

There are three ways to iterate through the values in the object. (This is TypeScript syntax.)

Flip through the enumerable keys defined on an object:

for (const key of Object.keys(dictionary)) {
   const value = dictionary[key]
   console.log(`${key} -> ${value}`)
}

This one makes the most sense to me; it’s what I expect from a dictionary. It flips through the values in an array of the keys defined on that object directly, no prototypal inheritance considered. This is how JSON.stringify() prints your object.

Flip through the enumerable keys defined on that object and its prototype chain:

for (const key in dictionary) {
   const value = dictionary[key]
   console.log(`${key} -> ${value}`)
}

This is the easiest one to write. It flips through the keys defined on the object and its prototype chain. If you’re using an ordinary object for this, and no one has done anything bizarre like add an enumerable property to Object, it’s fine. tslint hates it though; it bugs me about “for(…in…) statements must be filtered with an if statement.” tslint is like “OMG, you do not know what is on that thing’s prototype chain it could be ANYTHING”

I find it backwards that for(…in…) flips through property names of an object, while for(…of…) flips through values in an array. This confuses me daily in TypeScript. If you accidentally use for(…of…) instead of for(…in…) on an object, then you’ll see 0 iterations of your loop. Very sneaky. If you accidentally use for(…in…) on an array, you get the indices instead of the values, also confusing. TypeScript and tslint don’t warn about either error, as far as I can tell. 🙁

Flip through the enumerable and non-enumerable keys defined on that object:

for (const key of Object.getOwnPropertyNames(dictionary)) {
   const value = dictionary[key]
   console.log(`${key} -> ${value}`)
}

This one flips through only keys on the object, not its prototype chain, and also gives you the names of non-enumerable properties. You probably don’t want those.

What are non-enumerable properties?

Conceptually, they’re properties that don’t make sense to flip through, that we don’t want JSON.stringify() to look at. They’re hidden from for(…in…) iteration and from Object.keys(). You can still access them on the object. For instance, constructors of TypeScript classes are non-enumerable properties. Methods on built-in types like Array and object are non-enumerable. They stay out of the way.

When would we want to flip through them, like in Object.getOwnPropertyNames()?
I don’t know, maybe for debugging.

Why make a non-enumerable property?
I hit a use case for this today: serializing an instance of a class with recursive fields. JSON.stringify() can’t print recursive structures.

Side quest: Making recursive objects printable

In TypeScript, every field in a class instance (including any inherited field) is an enumerable property, returned from Object.keys() and printed by JSON.stringify(). See this TreeNode class that tracks its children, and its children track it:

Printing an instance of TreeNode gives me: `TypeError: Converting circular structure to JSON` waah 🙁

Here’s a tricky way to say “Hey JavaScript, don’t print that _parent field”. Explicitly override its enumerable-ness in the constructor.

We can get tricky with TypeScript class fields. After all, they get tricky with us.

Properties on a class instance

In TypeScript, class instance fields show up in Object.keys() and accessor-based properties (like with getters and setters) do not. They’re properties on the prototype, which is the class itself. So if you want to see accessor properties, use for(…in…) on class instances. That gets the enumerable properties from the prototype chain. Watch out: these include methods.

Why iterate through the properties on a class? I don’t know, maybe for debugging again. If you do it, I suggest skipping methods. This makes tslint happy because its an if statement:

for (const propertyName in classInstance) {
  if (typeof classInstance[propertyName] !== “function”) {
    console.log(`${propertyName}=${classInstance[propertyName]}`);
  }
}

Recommendations

If you have a class instance, access its properties with dot notation, like treeNode.children. That way TypeScript can help you avoid mistakes. If you have a dictionary object, access its properties with index notation, like dictionary[“impute”] (and turn off the angry tslint rule). Class instances have specific types; dictionary objects are type object. Access the contents of a dictionary using Object.keys().