Change object keys from underscore format to camelCase format

Question

I'm trying to get this:

  const obj = {
    keyFirst: 'firstVal',
    keySecond: 'secondVal',
  };

from this:

  const obj = {
    key_first: 'firstVal',
    key_second: 'secondVal',
  };

...so to change underscore key format to camelCase format.

I tried to achieve it by using reduce function:

  const renameKeys = obj => Object
    .keys(obj)
    .reduce((acc, key) => {
      const modifiedKey = key.replace(/_([a-z])/g, function f(g) {
        return g[1].toUpperCase();
      });
      return ({
        ...acc,
        ...{ [modifiedKey]: obj[key] },
      }, {});
    });

  console.log(renameKeys(obj));

But this won't work and return empty objects. How can I change it to achieve my goal?

Answer 1

The problem is

  return ({
    ...acc,
    ...{ [modifiedKey]: obj[key] },
  }, {});

You're unintentionally using the comma operator - although the new object is evaluated, the whole expression inside the parentheses evaluates to the final value in the comma-separated list, which is the empty object, which becomes the accumulator on the next iteration.

Don't use the comma operator in the return, and pass {} as a second argument to reduce instead:

  const obj = {
    key_first: 'firstVal',
    key_second: 'secondVal',
  };

  const renameKeys = obj => Object
    .keys(obj)
    .reduce((acc, key) => {
      const modifiedKey = key.replace(/_([a-z])/g, function f(g) {
        return g[1].toUpperCase();
      });
      return ({
        ...acc,
        ...{ [modifiedKey]: obj[key] },
      });
    }, {});

  console.log(renameKeys(obj));

Also, rather than using Object.keys, you might consider Object.entries instead, because [modifiedKey]: value is probably a bit clearer than [modifiedKey]: obj[key]:

const obj = {
  key_first: 'firstVal',
  key_second: 'secondVal',
};

const renameKeys = obj => Object
  .entries(obj)
  .reduce((acc, [key, val]) => {
    const modifiedKey = key.replace(/_([a-z])/g, g =>  g[1].toUpperCase());
    return ({
      ...acc,
      ...{ [modifiedKey]: val },
    });
  }, {});

console.log(renameKeys(obj));