Article Categories

Selected Reading

Can we convert two arrays into one JavaScript object?

Javascript Web Development Object Oriented Programming

In JavaScript, you can convert two arrays into a single object by using one array as keys and another as values. This is useful when you have related data stored in separate arrays.

Using forEach() Method

The most common approach is to use forEach() to iterate through the keys array and map each key to its corresponding value:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Convert Arrays to Object</title>
</head>
<body>
    <h1>Convert Two Arrays into One JavaScript Object</h1>
    
    <div>
        <p><strong>Keys Array:</strong> ["firstName", "lastName", "age"]</p>
        <p><strong>Values Array:</strong> ["Rohan", "Sharma", 21]</p>
    </div>
    
    <button onclick="convertArrays()">Convert to Object</button>
    <div id="result"></div>
    
    <script>
        function convertArrays() {
            const keys = ["firstName", "lastName", "age"];
            const values = ["Rohan", "Sharma", 21];
            const resultObj = {};
            
            // Using forEach to create object
            keys.forEach((key, index) => {
                resultObj[key] = values[index];
            });
            
            // Display result
            document.getElementById("result").innerHTML = 
                "<h3>Resulting Object:</h3><pre>" + 
                JSON.stringify(resultObj, null, 2) + "</pre>";
        }
    </script>
</body>
</html>

Using Object.fromEntries() and map()

A more modern approach uses Object.fromEntries() combined with map():

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modern Array to Object Conversion</title>
</head>
<body>
    <h1>Modern Approach: Object.fromEntries()</h1>
    
    <button onclick="modernConvert()">Convert Using Object.fromEntries()</button>
    <div id="modernResult"></div>
    
    <script>
        function modernConvert() {
            const keys = ["name", "city", "country"];
            const values = ["Alice", "Paris", "France"];
            
            // Modern one-liner approach
            const resultObj = Object.fromEntries(
                keys.map((key, index) => [key, values[index]])
            );
            
            document.getElementById("modernResult").innerHTML = 
                "<h3>Result:</h3><pre>" + 
                JSON.stringify(resultObj, null, 2) + "</pre>";
        }
    </script>
</body>
</html>

Using reduce() Method

You can also use reduce() to build the object:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reduce Method Approach</title>
</head>
<body>
    <h1>Using reduce() Method</h1>
    
    <button onclick="reduceConvert()">Convert Using reduce()</button>
    <div id="reduceResult"></div>
    
    <script>
        function reduceConvert() {
            const keys = ["product", "price", "quantity"];
            const values = ["Laptop", 999, 5];
            
            // Using reduce to build object
            const resultObj = keys.reduce((obj, key, index) => {
                obj[key] = values[index];
                return obj;
            }, {});
            
            document.getElementById("reduceResult").innerHTML = 
                "<h3>Result:</h3><pre>" + 
                JSON.stringify(resultObj, null, 2) + "</pre>";
        }
    </script>
</body>
</html>

Comparison of Methods

Method	Readability	Performance	Browser Support
`forEach()`	Good	Fast	All browsers
`Object.fromEntries()`	Excellent	Good	ES2019+
`reduce()`	Good	Fast	All modern browsers

Key Points

Both arrays should have the same length for proper mapping
The first array serves as object keys, the second as values
Object.fromEntries() is the most concise modern approach
forEach() offers the best browser compatibility

Conclusion

Converting two arrays into an object is straightforward using forEach(), Object.fromEntries(), or reduce(). Choose Object.fromEntries() for modern applications or forEach() for broader browser support.

AmitDiwan

Updated on: 2026-03-15T23:18:59+05:30

254 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next