Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create a new object from the specified object, where all the keys are in lowercase in JavaScript?
There are many methods for creating new objects from older ones in JavaScript. Creating a new object with the same keys as an existing object but with all the keys in lowercase is a common use case. When working with data from many sources that have irregular key casing, this can be helpful. We'll look at various JavaScript ways to create new objects with lowercase keys in this blog post.
However, before doing so, it's important to remember that while creating a new object with lowercase keys might be helpful when working with data from various sources, it's also important to be mindful of the possible consequences of changing the key casing.
For example, it could break current code that expects keys to be in a particular case or it could interfere with external APIs or databases that anticipate keys to be in a particular case. Before changing the key casing of an object, always run a comprehensive test on your code and take the specific requirements of your use case into account.
Using Object.assign() with Object.keys()
A new object can be created by joining one or more existing objects together using the builtin JavaScript method Object.assign(). By generating a new object with the same keys as the original one but all the keys in lowercase, it is also possible to alter the key casing of an object.
Example
<html>
<body>
<div id="myDiv"></div>
<script>
var original = { name: "John", AGE: 25, Email: "john@example.com" };
var lowercase = Object.assign(
{},
...Object.keys(original).map((k) => ({
[k.toLowerCase()]: original[k],
}))
);
document.getElementById("myDiv").innerHTML = JSON.stringify(lowercase);
</script>
</body>
</html>
{"name":"John","age":25,"email":"john@example.com"}
This approach uses the Object.keys() method to get an array of the keys of the original object. The Array.map() method is used to iterate over the keys and create a new object with the same keys but in lowercase. The new object is then passed to Object.assign() using the spread operator.
Using for-in Loop
Using a for-in loop to iterate over the keys of the original object and produce a new object with the same keys but in lowercase is another way to build a new object with lowercase keys.
Example
<html>
<body>
<div id="myDiv"></div>
<script>
var original = { name: "John", AGE: 25, Email: "john@example.com" };
var lowercase = {};
for (var key in original) {
lowercase[key.toLowerCase()] = original[key];
}
document.getElementById("myDiv").innerHTML = JSON.stringify(lowercase);
</script>
</body>
</html>
{"name":"John","age":25,"email":"john@example.com"}
In this example, the toLowerCase() function is used to change each key from uppercase to lowercase and assign the relevant value to the new object. The for-in loop then loops over the keys of the original object.
Using Object.entries() and Object.fromEntries()
A more modern approach uses Object.entries() to get key-value pairs and Object.fromEntries() to reconstruct the object with modified keys.
Example
<html>
<body>
<div id="myDiv"></div>
<script>
var original = { name: "John", AGE: 25, Email: "john@example.com" };
var lowercase = Object.fromEntries(
Object.entries(original).map(([key, value]) => [key.toLowerCase(), value])
);
document.getElementById("myDiv").innerHTML = JSON.stringify(lowercase);
</script>
</body>
</html>
{"name":"John","age":25,"email":"john@example.com"}
This method is cleaner and more readable. Object.entries() creates an array of [key, value] pairs, which are then mapped to [lowercaseKey, value] pairs and converted back to an object using Object.fromEntries().
Using reduce() Method
The reduce() method can also be used to accumulate properties into a new object with lowercase keys.
Example
<html>
<body>
<div id="myDiv"></div>
<script>
var original = { name: "John", AGE: 25, Email: "john@example.com" };
var lowercase = Object.keys(original).reduce((acc, key) => {
acc[key.toLowerCase()] = original[key];
return acc;
}, {});
document.getElementById("myDiv").innerHTML = JSON.stringify(lowercase);
</script>
</body>
</html>
{"name":"John","age":25,"email":"john@example.com"}
The reduce() method iterates through the object keys and builds a new object with lowercase keys, accumulating the result in the accumulator object.
Comparison of Methods
| Method | Readability | Performance | Browser Support |
|---|---|---|---|
| Object.assign() + map | Medium | Good | ES6+ |
| for-in loop | High | Best | All browsers |
| Object.entries/fromEntries | High | Good | ES2019+ |
| reduce() | Medium | Good | ES5+ |
Conclusion
In this article, we explored various JavaScript methods for constructing a new object with lowercase keys. The Object.entries() and Object.fromEntries() approach offers the cleanest syntax for modern browsers, while the for-in loop provides the best performance and compatibility. Choose the method that best fits your project's requirements and browser support needs.
3K+ Views
