It is very likely that in your day-to-day JavaScript programming you will have encountered the problem that is ‘how can I maintain a collection of constants in the form of string literals, and reference these strings by a name?’ If you have posed this question, and are still waiting for an answer, then I am happy to give it to you: key mirrors.

What is a key mirror?

A key mirror is an object where for each property, the key is the same as the value. They are most useful as a collection of constants that ‘give back’ their own definition, and many languages already provide an integrated solution for this behaviour in the form of an enum. Unfortunately, JavaScript doesn’t… so we use ‘key mirrors’ instead.

1
2
3
4
{
    SOME_USEFUL_CONST: 'SOME_USEFUL_CONST',
    ANOTHER_USEFUL_CONST: 'ANOTHER_USEFUL_CONST'
}

When should I use a key mirror?

Key mirrors are useful for a number of reasons of course, so here are some use-cases where key mirrors will help you out:

Auto-completion: You want your IDE to auto-complete string literals that are common in your code. Introducing key mirrors for this purpose will help you avoid nasty typos that are otherwise inevitable, especially if you are working with a team of developers.

Time-saving and consolidation: You find yourself typing multiple string literals more than once, and they serve a common purpose.

Check for legality of a value: You want to easily check that a value is ‘legal’ by using that value as a key in the keyMirror.

1
2
3
var COLOURS = {red: 'red', green: 'green', blue: 'blue'};
var colour = COLOURS.red;
var legalValue = !!COLOURS[colour];


Track original key (From Jordan, Pioneering Inventor of the keyMirror): don’t forget the benefit of being able to track the original key that was used to generate the value in logs or debugging. If COLOURS is a keyMirror, then the value tracks its original key name, whereas if it’s a mapping from keys to integers, you have to consult some far removed piece of code to recall what original concept that number was mapped from.

1
2
3
4
5
6
function doSomething(val) {
    // What is val?
    console.log(val);
}

doSomething(COLOURS.red);

How do I create a key mirror?

As always, there is more than one solution. So here are a few… take your pick!

Using React

The React library comes packaged with a key mirror helper module, react/utils/keyMirror.

1
2
3
4
5
6
7
8
var keyMirror = require('react/utils/keyMirror');
var COLOURS = {
    red: true,
    green: true,
    blue: true
};
var mirror = keyMirror(COLOURS);
console.log(mirror); // {red: 'red', green: 'green', blue: 'blue'}

But if you aren’t using React, it’s easy to build your own:

Using lodash:

We can use the _.reduce method to take any Object or Array and create a key mirror from it. In the case of an Array, we take each element and use its value as the key and value. For an Object we do the same by first using the Object.keys method, which (unsurprisngly) returns an Array of an object’s keys.

1
2
3
4
5
6
7
8
9
var _ = require('lodash');

function keyMirror(keys) {
    keys = Array.isArray(keys) ? keys : Object.keys(keys);
    return _.reduce(keys, function(res, v) {
        res[v] = v;
        return res;
    }, {});
}

Using JavaScript:

Or if you want to avoid using any libraries, perhaps as you think the other methods are overkill, then create your own from scratch:

1
2
3
4
5
6
function keyMirror(keys) {
    keys = Array.isArray(keys) ? keys : Object.keys(keys);
    var mirror = {};
    keys.forEach(v => mirror[v] = v);
    return mirror;
}

Using npm:

Check out one of the many key mirror libraries published on npm.