Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.
Object.assign()
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. The basic syntax to create a new object with lowercase keys using Object.assign().
Example
<html>
<body>
<div id="myDiv"></div>
<script>
var original = {name: "John", AGE: 25};
var lowercase = Object.assign({}, original);
document.getElementById("myDiv").innerHTML = JSON.stringify(lowercase);
</script>
</body>
</html>
In this example, the function Object.assign() generates a new object and gives it the properties of the original object. The identical keys from the old object will be present in the new one, but they will be in lowercase.
You can traverse over the keys of the original object using the Object.keys() function and change them to lowercase before passing them to Object.assign() −
Example
<html>
<body>
<div id="myDiv"></div>
<script>
var original = { name: "John", AGE: 25 };
var lowercase = Object.assign(
{},
...Object.keys(original).map((k) => ({
[k.toLowerCase()]: original[k],
}))
);
document.getElementById("myDiv").innerHTML = JSON.stringify(lowercase);
</script>
</body>
</html>
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.
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. The fundamental syntax for making a new object with lowercase keys using a for-in loop is −
Example
<html>
<body>
<div id="myDiv"></div>
<script>
var original = { name: "John", AGE: 25 };
var lowercase = {};
for (var key in original) {
lowercase[key.toLowerCase()] = original[key];
}
document.getElementById("myDiv").innerHTML = JSON.stringify(lowercase);
</script>
</body>
</html>
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.
JSON.parse() and JSON.stringify()
Using the JSON.parse() and JSON.stringify() methods is a third way to create a new object with lowercase keys. When employing these techniques to construct new objects with lowercase keys, the fundamental syntax is −
Example
<html>
<body>
<div id="myDiv"></div>
<script>
var original = { name: "John", AGE: 25 };
var lowercase = JSON.parse(JSON.stringify(original).toLowerCase());
document.getElementById("myDiv").innerHTML = JSON.stringify(lowercase);
</script>
</body>
</html>
In this example, the JSON.stringify() method is used to convert the original object to a JSON string. The toLowerCase() method is then used to convert all the keys in the JSON string to lowercase.
Finally, the JSON.parse() method is used to convert the JSON string back into a JavaScript object. By using this method, a new object is created that has the same keys as the original object but all of the keys are lowercase.
The fact that this method requires converting the object to a string and back again makes it less effective than the first two approaches. It also only functions with simple objects; it might not function with objects that have unique properties or methods.
Conclusion
In this article, we looked at various JavaScript ways for constructing a new object with lowercase keys. A quick and effective way to generate a new object with the same keys as an existing object but all lowercase is to use the Object.assign() method. Another choice for iterating over an object's keys and producing a new object with the same keys but lowercase is the for-in loop. Lowercase keys can also be used to build a new object using the JSON.parse() and JSON.stringify() methods, although this method is less effective and might not work with all sorts of objects.
2K+ Views
