JS – Create a reverse conversion map object

Objects are one of JavaScript’s most powerful features. They allow developers to do a lot of neat stuff. Even if you do not use the more advanced features, objects come in very handy. I personally like to use objects as conversion maps. By that I mean I may have value X that, in the process of the script, needs to be changed to value Y. However, X may be many things, and each individual one needs to be converted into it’s unique corresponding Y value. Because of such, using .replace() would be cumbersome, because I would have to set up a lot of inflexible if...else if...else conditions to handle all the cases. I do have the switch statement at my disposal, and that would do the trick, but I want something a bit more elegant. So I use an object and simply use value X as the key to value Y. Simple as that. Then to make sure Y is valid, I only need a simple if (y === undefined) { condition.

However, what if the circumstances are reversed? I have value Y and need value X, and I still want to use my object-as-a-conversion-map system? Well, I could create a second object that is the reverse of my first one, but that requires maintaining two individual objects, and that may not be efficient. What am I to do?

Automatically make a reverse conversion map object, of course!

The best way to do this is to have your reverse object created only once. Recreating it every time the function is called is a wasted resource. That is why you run your process either in a preparation function that runs only the first time the function is called, or run it on page load, really your choice/what dictates your choice. This means your objects will need to be scoped in a way your code can access it, but that should not be an issue.

To automatically create your reverse object, we will use a self-executing function. In case you forgot what that is, a self-executing function looks like so:

(function() {
  // Do stuff here
})();

It is a tricky syntax at first, but if you use it enough you will get the hang of it. What we are doing is creating an anonymous function that is wrapped inside a pair of parentheses. These parentheses will scope all variables used to just that function, so they cannot be accessed outside it. This is a good time to point out that you cannot initialize your reverse object inside this function, otherwise you will not be able to access it. πŸ˜‰ Finally, we add another pair of parentheses at the end, making the function self-executing. If you need to include any parameters/pass any arguments, you do so in this pair and in the pair right after the function keyword.

Next, we need to iterate over our first object, which will name objectX as well as initialize our empty, reverse object, objectY (I know, such creative names. In production code, you would definitely use more descriptive variable names.). We do this using a for...in loop with the recommend hasOwnProperty() condition for safety.

var objectY = {},
    objectX = {
  "a" : "apple",
  "g" : "ginger",
  "o" : "orange",
  "p" : "pear",
  "st": "sweetarts"
};

(function() {
  for (var key in objectX) {
    if (objectX.hasOwnProperty(key)) {
      // Do stuff here
    }
  }
})();

Now comes probably the trickiest statement in the whole tutorial: making the value of key in objectX the key in objectY and key the corresponding value in objectY. In reality, it is easier done than said. πŸ˜‰

objectY[objectX[key]] = key;

This is simply the standard syntax for assigning a key-value pair in an object. The fun part here is using the value in objectX for the new key, objectX[key]. That is why the line looks scary at first. πŸ˜‰

Finally, we put it all together, and this is the final code! πŸ˜€

var objectY = {},
    objectX = {
  "a" : "apple",
  "g" : "ginger",
  "o" : "orange",
  "p" : "pear",
  "st": "sweetarts"
};

(function() {
  for (var key in objectX) {
    if (objectX.hasOwnProperty(key)) {
      objectY[objectX[key]] = key;
    }
  }
})();

Enjoy your newly created automatically created reverse conversion map object, everyone!
-le717

Advertisements

Triangular Reactions

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s