How To Merge Two Array of String Into A Key/Value Pair (Object) In JavaScript

There are different ways to merge two arrays in JavaScript. You can use one of the following:

1. using the spread operator e.g. [ ...array1, ...array2]

2. using Array.prototype.concat()

3. using Array.prototype.push()

None of those will help if you need to merge two arrays to a Map or key/value pair for specific use. Given the example form below, we want to convert the separate array of keys and values, into an object.

How do we merge the form data to give us an object like what you see below?

{
  "DB_URL": "example.com",
  "NODE_ENV": "production"
}

Solution

We're going to create a function that takes in two arguments: one for the array of keys, and the other for the values. That function will use the reduce() method to produce an object of key/value pair.

This is how the function will look like:

function mergeArraysToMap(keys: string[], values: string[]): { [key: string]: string } {
  if (keys.length !== values.length) {
    throw new Error("The number of keys and values must be the same.");
  }

  // Use reduce to create the key/value map
  const mergedMap: { [key: string]: string } = keys.reduce((map, key, index) => {
    map[key] = values[index];
    return map;
  }, {});

  return mergedMap;
}

The mergeArraysToMap function takes two arrays (keys and values) as arguments. It checks if the number of keys and values is the same and then uses the reduce method to create the key/value map. Then it returns the merged key/value pair.

We can take this further and ensure that we don't accept an empty string for the key or value. For that, we can modify the reduce method as follows:

const mergedMap: { [key: string]: string } = keys.reduce(
    (map, key, index) => {
      if ((key && !values[index]) || (!key && values[index]))
        throw new Error("invalid key/pair");

      if (key && values[index]) map[key] = values[index];
      return map;
    },
    {} as Record<string, string>
  );

With that implementation, we can be sure that we will get a valid key/value pair.

You can play around with the code on the TypeScript playground using this link.

Comments

[Ben Calder]

Good use of reduce but the conditions you add could be improved:

• no need to check for truthy value && falsy value. Just check for !key || !value
• the first guard condition renders the following check for truthy values redundant. It can be removed
• worth adding a warning that your test for truthy values will fail on zero if someone wants to apply this to numeric properties

[Peter Mbanugo]

Thanks for the contribution. Using !key || !value will cause an error when both key and value are empty. In this case, I'd want them to be treated as null/undefined. That is, don't throw an error but don't add them to the Map.

For numeric properties, it can be adapted to cover that specific usecase.