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
Object.fromEntries() method in JavaScript.
The Object.fromEntries() method in JavaScript converts an iterable of key-value pairs (like arrays or Maps) into an object. It's the reverse operation of Object.entries().
Syntax
Object.fromEntries(iterable)
Parameters
iterable: An iterable containing key-value pairs, such as an array of arrays or a Map.
Return Value
Returns a new object with properties derived from the key-value pairs in the iterable.
Example: Converting Array of Arrays
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Object.fromEntries() Example</title>
</head>
<body>
<h1>Object.fromEntries() Method</h1>
<div id="result"></div>
<script>
// Array of key-value pairs
let entries = [['firstName', 'Rohan'], ['lastName', 'Sharma'], ['age', 22]];
// Convert to object
let person = Object.fromEntries(entries);
// Display result
document.getElementById('result').innerHTML =
`<p>Original array: ${JSON.stringify(entries)}</p>
<p>Converted object: ${JSON.stringify(person)}</p>
<p>person.firstName: ${person.firstName}</p>`;
</script>
</body>
</html>
Original array: [["firstName","Rohan"],["lastName","Sharma"],["age",22]]
Converted object: {"firstName":"Rohan","lastName":"Sharma","age":22}
person.firstName: Rohan
Example: Converting Map to Object
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Map to Object Conversion</title>
</head>
<body>
<div id="output"></div>
<script>
// Create a Map
let myMap = new Map();
myMap.set('name', 'Alice');
myMap.set('city', 'New York');
myMap.set('country', 'USA');
// Convert Map to object
let obj = Object.fromEntries(myMap);
document.getElementById('output').innerHTML =
`<p>Map entries: ${JSON.stringify([...myMap])}</p>
<p>Converted object: ${JSON.stringify(obj)}</p>`;
</script>
</body>
</html>
Map entries: [["name","Alice"],["city","New York"],["country","USA"]]
Converted object: {"name":"Alice","city":"New York","country":"USA"}
Common Use Cases
Reversing Object.entries(): Transform an object back after processing its entries.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Filtering Object Properties</title>
</head>
<body>
<div id="demo"></div>
<script>
let originalObj = {a: 1, b: 2, c: 3, d: 4};
// Filter properties with values greater than 2
let filteredObj = Object.fromEntries(
Object.entries(originalObj).filter(([key, value]) => value > 2)
);
document.getElementById('demo').innerHTML =
`<p>Original: ${JSON.stringify(originalObj)}</p>
<p>Filtered: ${JSON.stringify(filteredObj)}</p>`;
</script>
</body>
</html>
Original: {"a":1,"b":2,"c":3,"d":4}
Filtered: {"c":3,"d":4}
Browser Compatibility
Object.fromEntries() is supported in ES2019 (ES10) and works in all modern browsers. For older browsers, consider using a polyfill.
Conclusion
Object.fromEntries() provides an elegant way to convert iterables of key-value pairs into objects. It's particularly useful for transforming data structures and working with Maps or filtered object entries.
201 Views
