How to map key value arrays

JavaScript polyfill, by , Saturday, April 19th, 2014

We are going to write a function that creates a map object from two arrays passed to it as parameters. The two parameters are going to be assumed to be; keyArray; containing the map keys, and valArray; containing the matching value. Writing such a function in JavaScript is fairly simple, and we are going to look at a few approaches, starting with a simple for-loop solution.

mapArrays function with for-loop

This is the most obvious way to solve the task of mapping two arrays, and most likely the approach most widely used. While I will spoil the fun by saying that it is not the most elegant solution, it is however still a good place to start, if for nothing else, its simplicity, so lets have a look at the code;

  1. var mapArrays = function(keyArray, valArray) {
  2. "use strict";
  3. var map = {},
  4. kLen = keyArray.length,
  5. i;
  6. for (i = 0; i < kLen; i++) {
  7. map[keyArray[i]] = valArray[i];
  8. }
  9. return map;
  10. };

While this code works, it makes some assumptions that in any given instance might or might not be justified. The most obvious assumption made is, that the parameters passed always are arrays. While this might be the case, it still is a good idea to check for it, and a good way to do that is using the Array.isArray method. For browsers that do not natively support this method, you can use the Array.isArray polyfill that I have written. Now lets implement this and see where that leaves us;

  1. var mapArrays = function(keyArray, valArray) {
  2. "use strict";
  3. var map = {},
  4. kLen,
  5. i;
  6. if (Array.isArray(keyArray) && Array.isArray(valArray)) {
  7. kLen = keyArray.length;
  8. for (i = 0; i < kLen; i++) {
  9. map[keyArray[i]] = valArray[i];
  10. }
  11. } else {
  12. throw new TypeError('Parameter is not an Array');
  13. }
  14. return map;
  15. };

Now the function will throw a TypeError if it is fed anything else but arrays, which would be the appropriate way to deal with this situation. Now while this is a workable and straight forward solution to our task, we can do better than this, but using some build in functionality of the array object.

mapArrays method with Array.prototype.reduce

The array object in JavaScript got the Array.prototype.reduce method with the ECMAScript 5.1 specifications, and is supported by most major browsers. But if an important part of your visitors use older browsers then you can use my Array.prototype.reduce polyfill. (If you do not know how this method works, I highly recommend checking out the documentation on it, provided by the Mozilla foundation here: Array.prototype.reduce documentation) To understand how this method can help us simplify the task, lets have a look at the code;

  1. var mapArrays = function(keyArray, valArray) {
  2. "use strict";
  3. if (Array.isArray(keyArray) && Array.isArray(valArray)) {
  4. return keyArray.reduce(function(map, key, i) {
  5. map[key] = valArray[i];
  6. return map;
  7. }, {});
  8. } else {
  9. throw new TypeError('Parameter is not an Array');
  10. }
  11. };

The way this code works is that just like in the previous example, we first check if the parameters are actually arrays at line 3, and if not, we throw a TypeError, in line 9 of the code. If on the other hand, they are arrays we at line 4 return the result of calling the Array.prototype.reduce method on the keyArray, passing it two parameters; a callback function, which is called on each element in the keyArray, and an initialValue which is used as the map argument on the first call of the callback. Since we want an object map, our initialValue is the object literal {}. If you have read the documentation on the reduce method, you will know, that the callback function is called with the four parameters; previousValue, currentValue, index, and array, where the array parameter is the array the reduce method was called on. For our purpose, the only information we need, is the previousValue, which is our object map, that we eventually want to return, the currentValue, which is the current key from the keyArray, and the index. With this information, we at line 5 make the currentValue (the key parameter) a property of our map object and set it to be equal to the corresponding value in the valArray. We then at line 6 return the map object, which then will become the previousValue (map parameter) in the next invocation, and so on until we have reached the end of the keyArray.

Which of these solutions you choose to use, is of course up to you, and you can use this code in any way you want, though I would appreciate that you reference this website if you choose to use it in your own articles.