Article Categories

Selected Reading

How to de-structure an imported object in JavaScript?

Javascript Web Development Object Oriented Programming

Destructuring allows you to extract specific properties from imported objects in JavaScript modules. This is particularly useful when you only need certain properties from a larger object.

Basic Destructuring Syntax

When importing an object, you can destructure it immediately or after import:

// Method 1: Destructure after import
import person from "./sample.js";
let {firstName, lastName, age} = person;

// Method 2: Direct destructuring (named exports)
import {firstName, lastName, age} from "./sample.js";

Example: Complete Implementation

sample.js (Module file)

export default {
    firstName: 'Rohan',
    lastName: 'Sharma',
    age: 22,
    city: 'Mumbai',
    profession: 'Developer'
};

Main HTML file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Destructuring Imported Object</title>
    <style>
        body {
            font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
            padding: 20px;
        }
        .result {
            font-size: 18px;
            font-weight: 500;
            color: rebeccapurple;
            margin: 20px 0;
        }
        .btn {
            background: #007bff;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>Destructure an Imported Object</h1>
    <div class="result"></div>
    <button class="btn">Show Destructured Values</button>
    
    <script type="module">
        import person from './sample.js';
        
        // Destructure specific properties
        let {firstName, lastName, age} = person;
        
        let resEle = document.querySelector('.result');
        let btnEle = document.querySelector('.btn');
        
        btnEle.addEventListener('click', () => {
            resEle.innerHTML = `
                <strong>Destructured Properties:</strong><br>
                firstName = ${firstName}<br>
                lastName = ${lastName}<br>
                age = ${age}
            `;
        });
    </script>
</body>
</html>

Advanced Destructuring Techniques

With default values and renaming:

<script type="module">
    import person from './sample.js';
    
    // Destructuring with renaming and default values
    let {
        firstName: fName,
        lastName: lName,
        age,
        salary = 50000  // default value if property doesn't exist
    } = person;
    
    console.log(fName);    // 'Rohan'
    console.log(lName);    // 'Sharma'
    console.log(age);      // 22
    console.log(salary);   // 50000 (default value)
</script>

Output

When you click the button, the destructured properties will be displayed:

Destructured Properties:
firstName = Rohan
lastName = Sharma
age = 22

Key Benefits

Cleaner Code: Extract only needed properties
Better Performance: Avoid accessing object properties repeatedly
Flexibility: Rename properties and set default values
Readability: Clear indication of which properties are used

Conclusion

Destructuring imported objects makes your code cleaner and more efficient. It allows you to extract only the properties you need while providing flexibility for renaming and default values.

AmitDiwan

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

221 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next