Article Categories

Selected Reading

How to access JavaScript properties?

Javascript Web Development Object Oriented Programming

In JavaScript, there are three main ways to access object properties. Each method has specific use cases and advantages depending on the situation.

Three Methods to Access Properties

Dot notation: object.property
Square bracket notation: object['property']
Object destructuring: let {property} = object

Method 1: Using Dot Notation

The dot notation is the most common and readable way to access properties when the property name is known at compile time.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dot Notation Example</title>
</head>
<body>
    <h2>Dot Notation Access</h2>
    <div id="result1"></div>

    <script>
        let person = {
            name: "John",
            age: 30,
            city: "New York"
        };

        let result = document.getElementById("result1");
        result.innerHTML = `
            Name: ${person.name}<br>
            Age: ${person.age}<br>
            City: ${person.city}
        `;
    </script>
</body>
</html>

Method 2: Using Square Bracket Notation

Square brackets are useful when property names contain spaces, special characters, or when accessing properties dynamically.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Square Bracket Example</title>
</head>
<body>
    <h2>Square Bracket Access</h2>
    <div id="result2"></div>

    <script>
        let data = {
            "user name": "Alice",
            "user-age": 25,
            "full address": "123 Main St"
        };

        let propertyName = "user name";
        let result = document.getElementById("result2");
        
        result.innerHTML = `
            User Name: ${data["user name"]}<br>
            User Age: ${data["user-age"]}<br>
            Dynamic Access: ${data[propertyName]}
        `;
    </script>
</body>
</html>

Method 3: Using Object Destructuring

Destructuring allows you to extract multiple properties into variables in a single statement, making code cleaner and more readable.

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

    <script>
        let product = {
            id: 101,
            name: "Laptop",
            price: 999,
            brand: "TechCorp"
        };

        // Destructuring multiple properties
        let {id, name, price} = product;
        
        // Destructuring with renaming
        let {brand: manufacturer} = product;

        let result = document.getElementById("result3");
        result.innerHTML = `
            ID: ${id}<br>
            Name: ${name}<br>
            Price: $${price}<br>
            Manufacturer: ${manufacturer}
        `;
    </script>
</body>
</html>

Comparison of Methods

Method	Syntax	Best Use Case	Dynamic Access
Dot Notation	`obj.prop`	Known property names	No
Square Brackets	`obj['prop']`	Special characters, dynamic access	Yes
Destructuring	`let {prop} = obj`	Multiple properties, cleaner code	No

Complete Example: All Methods

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>All Property Access Methods</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .result { background: #f0f0f0; padding: 10px; margin: 10px 0; }
        button { padding: 10px 20px; font-size: 16px; }
    </style>
</head>
<body>
    <h2>JavaScript Property Access Methods</h2>
    <p>Object: {a: 22, b: 44, "special-key": 100}</p>
    <button onclick="accessProperties()">Access Properties</button>
    <div class="result" id="output"></div>

    <script>
        function accessProperties() {
            let obj = { a: 22, b: 44, "special-key": 100 };
            let output = document.getElementById("output");
            
            // Method 1: Dot notation
            let dotResult = obj.a;
            
            // Method 2: Square bracket notation
            let bracketResult = obj['b'];
            let specialKey = obj['special-key'];
            
            // Method 3: Destructuring
            let {a, b} = obj;
            
            output.innerHTML = `
                <strong>Dot Notation:</strong> obj.a = ${dotResult}<br>
                <strong>Square Brackets:</strong> obj['b'] = ${bracketResult}<br>
                <strong>Special Key:</strong> obj['special-key'] = ${specialKey}<br>
                <strong>Destructuring:</strong> {a, b} = {${a}, ${b}}
            `;
        }
    </script>
</body>
</html>

Key Points

Use dot notation for simple, known property names
Use square brackets when property names have special characters or for dynamic access
Use destructuring when extracting multiple properties or when you want cleaner variable names
Square bracket notation allows computed property names using variables

Conclusion

JavaScript offers three flexible ways to access object properties. Choose dot notation for simplicity, square brackets for dynamic access, and destructuring for extracting multiple properties efficiently.

AmitDiwan

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

328 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next