Article Categories

Selected Reading

Object de-structuring in JavaScript.

Javascript Web Development Object Oriented Programming

Object destructuring is a JavaScript feature that allows you to extract multiple properties from an object and assign them to variables in a single statement. It provides a clean and concise way to work with object properties.

Syntax

const { property1, property2, property3 } = object;

Basic Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Object Destructuring</title>
</head>
<body>
    <h1>Object Destructuring Example</h1>
    <div id="output"></div>

    <script>
        const person = {
            firstName: "John",
            lastName: "Doe", 
            age: 25,
            city: "New York"
        };

        // Destructure the object
        const { firstName, lastName, age, city } = person;

        // Display results
        const output = document.getElementById('output');
        output.innerHTML = `
            <p>First Name: ${firstName}</p>
            <p>Last Name: ${lastName}</p>
            <p>Age: ${age}</p>
            <p>City: ${city}</p>
        `;
    </script>
</body>
</html>

Renaming Variables

You can assign object properties to variables with different names:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Destructuring with Renaming</title>
</head>
<body>
    <div id="result"></div>

    <script>
        const user = {
            username: "alice123",
            email: "alice@example.com",
            role: "admin"
        };

        // Rename variables during destructuring
        const { username: name, email: userEmail, role: userRole } = user;

        document.getElementById('result').innerHTML = `
            <p>Name: ${name}</p>
            <p>Email: ${userEmail}</p>
            <p>Role: ${userRole}</p>
        `;
    </script>
</body>
</html>

Default Values

You can provide default values for properties that might not exist:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Destructuring with Defaults</title>
</head>
<body>
    <div id="demo"></div>

    <script>
        const config = {
            host: "localhost",
            port: 3000
            // database property is missing
        };

        // Use default values for missing properties
        const { host, port, database = "myapp", timeout = 5000 } = config;

        document.getElementById('demo').innerHTML = `
            <p>Host: ${host}</p>
            <p>Port: ${port}</p>
            <p>Database: ${database} (default)</p>
            <p>Timeout: ${timeout} (default)</p>
        `;
    </script>
</body>
</html>

Nested Object Destructuring

You can destructure nested objects by specifying the nested structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nested Destructuring</title>
</head>
<body>
    <div id="nested-result"></div>

    <script>
        const employee = {
            name: "Sarah",
            position: "Developer",
            address: {
                street: "123 Main St",
                city: "Boston",
                zipcode: "02101"
            }
        };

        // Destructure nested object
        const { 
            name, 
            position, 
            address: { street, city, zipcode } 
        } = employee;

        document.getElementById('nested-result').innerHTML = `
            <p>Name: ${name}</p>
            <p>Position: ${position}</p>
            <p>Street: ${street}</p>
            <p>City: ${city}</p>
            <p>Zipcode: ${zipcode}</p>
        `;
    </script>
</body>
</html>

Comparison: Traditional vs Destructuring

Method	Code Lines	Readability	Performance
Traditional Assignment	More	Verbose	Same
Object Destructuring	Fewer	Clean & Concise	Same

Common Use Cases

Extracting data from API responses
Function parameter destructuring
Importing specific modules
Swapping variables
Working with configuration objects

Conclusion

Object destructuring simplifies variable assignment from objects, making code more readable and concise. It's particularly useful when working with complex objects and function parameters, reducing boilerplate code significantly.

AmitDiwan

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

155 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next