Article Categories

Selected Reading

Setting property in an empty object using for loop in JavaScript.

Javascript Web Development Object Oriented Programming

In JavaScript, you can populate an empty object with properties using various loop methods. The most common approaches are the for...in loop and the for...of loop with Object.entries().

Using for...in Loop

The for...in loop iterates over all enumerable properties of an object, making it ideal for copying properties from one object to another.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Setting Properties with for...in Loop</title>
</head>
<body>
    <h1>Setting Properties in Empty Object</h1>
    <div id="result"></div>
    <button onclick="populateObject()">Populate Object</button>

    <script>
        // Source object with properties
        let sourceObj = {
            firstName: "Rohan",
            lastName: "Sharma",
            age: 14,
            grade: 8
        };
        
        // Empty object to populate
        let emptyObj = {};
        
        function populateObject() {
            // Clear previous results
            document.getElementById("result").innerHTML = "";
            
            // Use for...in loop to copy properties
            for (let key in sourceObj) {
                emptyObj[key] = sourceObj[key];
            }
            
            // Display the populated object
            let output = "<h3>Populated Object:</h3>";
            for (let key in emptyObj) {
                output += `Key: ${key} | Value: ${emptyObj[key]}<br>`;
            }
            
            document.getElementById("result").innerHTML = output;
        }
    </script>
</body>
</html>

Using for...of with Object.entries()

For more modern JavaScript, you can use Object.entries() with a for...of loop to achieve the same result.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Setting Properties with for...of Loop</title>
</head>
<body>
    <h1>Using Object.entries() Method</h1>
    <div id="output"></div>
    <button onclick="copyProperties()">Copy Properties</button>

    <script>
        let originalObj = {
            name: "JavaScript",
            type: "Programming Language",
            year: 1995
        };
        
        let newObj = {};
        
        function copyProperties() {
            // Using for...of with Object.entries()
            for (let [key, value] of Object.entries(originalObj)) {
                newObj[key] = value;
            }
            
            // Display results
            let result = "<h3>Properties copied successfully:</h3>";
            console.log("New object:", newObj);
            
            for (let [key, value] of Object.entries(newObj)) {
                result += `${key}: ${value}<br>`;
            }
            
            document.getElementById("output").innerHTML = result;
        }
    </script>
</body>
</html>

Dynamic Property Assignment

You can also create properties dynamically using loops with computed property names:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Property Assignment</title>
</head>
<body>
    <h1>Dynamic Property Creation</h1>
    <div id="demo"></div>
    <button onclick="createDynamicProperties()">Create Properties</button>

    <script>
        function createDynamicProperties() {
            let dynamicObj = {};
            let properties = ["prop1", "prop2", "prop3"];
            let values = ["Value A", "Value B", "Value C"];
            
            // Create properties using for loop
            for (let i = 0; i < properties.length; i++) {
                dynamicObj[properties[i]] = values[i];
            }
            
            // Display the created object
            let display = "<h3>Dynamically Created Object:</h3>";
            for (let key in dynamicObj) {
                display += `${key}: ${dynamicObj[key]}<br>`;
            }
            
            document.getElementById("demo").innerHTML = display;
            console.log("Dynamic object:", dynamicObj);
        }
    </script>
</body>
</html>

Key Points

for...in loop is the traditional method for iterating over object properties
Object.entries() with for...of provides a more modern approach
Both methods allow you to copy properties from existing objects to empty objects
Properties can be created dynamically using bracket notation obj[key] = value

Conclusion

Setting properties in empty objects using loops is fundamental in JavaScript. The for...in loop remains the most straightforward method, while Object.entries() offers more flexibility for modern development.

AmitDiwan

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

510 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next