Lowercase all Keys in an Object using JavaScript

avatar

Borislav Hadzhiev

Wed Nov 03 20212 min read

Lowercase all Keys in an Object #

To lowercase all keys in an object, use the Object.keys() method to get an array of the object's keys. Call the reduce() method, passing it an empty object as the initial value and on each iteration lowercase the key, assign the key-value pair to the object and return the result.

index.js
function toLowerKeys(obj) { return Object.keys(obj).reduce((accumulator, key) => { accumulator[key.toLowerCase()] = obj[key]; return accumulator; }, {}); } const obj = { NAME: 'Tom', AGE: 30, }; console.log(toLowerKeys(obj)); // ๐Ÿ‘‰๏ธ {name: 'Tom', age: 30}

We created a reusable function that converts an object's keys to lowercase.

The first step is to use the Object.keys method to get an array of the object's keys.

index.js
const obj = { NAME: 'Tom', AGE: 30, }; console.log(Object.keys(obj)); // ๐Ÿ‘‰๏ธ ['NAME', 'AGE']

Next, we used the Array.reduce method to iterate over the array of keys.

We passed an empty object as the initial value for the accumulator variable.

On each iteration, we lowercase the key, assign the key-value pair to the accumulated object and return the result.

The reduce method will return an object where all keys are converted to lowercase.

An alternative approach is to use the Object.entries and Object.fromEntries methods.

To lowercase all keys in an object:

  1. Use the Object.entries() method to get an array of key-value pairs.
  2. Use the map() method to lowercase all keys in the array.
  3. Call the Object.fromEntries() method on the result.
index.js
function toLowerKeys(obj) { // ๐Ÿ‘‡๏ธ [ ['NAME', 'Tom'], ['AGE', 30] ] const entries = Object.entries(obj); return Object.fromEntries( entries.map(([key, value]) => { return [key.toLowerCase(), value]; }), ); } const obj = { NAME: 'Tom', AGE: 30, }; console.log(toLowerKeys(obj)); // ๐Ÿ‘‰๏ธ {name: 'Tom', age: 30}

The first step is to get an array of key-value pairs using the Object.entries method.

index.js
const obj = { NAME: 'Tom', AGE: 30, }; // ๐Ÿ‘‡๏ธ๏ธ๏ธ [ ['NAME', 'Tom'], ['AGE', 30] ] console.log(Object.entries(obj));

Then we use the Array.map method to iterate over the array of key-value pairs.

We use destructuring assignment to pull out the key and value of each array and assign them to a variable.

index.js
const [key, value] = ['NAME', 'Tom']; console.log(key); // ๐Ÿ‘‰๏ธ "NAME" console.log(value); // ๐Ÿ‘‰๏ธ "Tom"

On each iteration, we return a new array, where the key is converted to lowercase.

This gives us an array of key-value pairs where all keys are lowercase.

index.js
// ๐Ÿ‘‡๏ธ [ ['name', 'Tom'], ['age', 30] ] console.log( [ ['NAME', 'Tom'], ['AGE', 30], ].map(([key, value]) => { return [key.toLowerCase(), value]; }), );

The last step is to pass the array of key-value pairs to the Object.fromEntries method to convert it back to an object.

index.js
// ๐Ÿ‘‡๏ธ {name: 'Tom', age: 30} console.log( Object.fromEntries([ ['name', 'Tom'], ['age', 30], ]), );

This was a 3 step process:

  1. Get an array of key-value pairs
  2. Convert each key to lowercase
  3. Create an object using the key-value pair array
It's a matter of personal preference which approach you pick. I prefer the reduce method approach as it is more concise and direct.

Further Reading #

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee