Article Categories

Selected Reading

Can we check if a property is in an object with JavaScript?

Javascript Web Development Object Oriented Programming

JavaScript provides multiple ways to check if a property exists in an object. The most common approaches are using the in operator, hasOwnProperty() method, and Object.hasOwn() method.

Using hasOwnProperty() Method

The hasOwnProperty() method checks if the object has a specific property as its own (not inherited from the prototype chain).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Property Check</title>
    <style>
        body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
        .result { font-size: 18px; margin: 20px 0; }
        button { padding: 10px; margin: 10px 0; }
    </style>
</head>
<body>
    <h2>hasOwnProperty() Method</h2>
    <div class="result" id="result1"></div>
    <button onclick="checkProperty()">Check Property</button>

    <script>
        let obj = { firstName: "Rohan", lastName: "Sharma", age: 21 };
        
        function checkProperty() {
            let result = document.getElementById('result1');
            if (obj.hasOwnProperty("firstName")) {
                result.innerHTML = "? Object has 'firstName' property";
            } else {
                result.innerHTML = "? Object does not have 'firstName' property";
            }
        }
    </script>
</body>
</html>

Using the 'in' Operator

The in operator checks for both own properties and inherited properties from the prototype chain.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Using 'in' Operator</title>
    <style>
        .output { font-family: monospace; background: #f5f5f5; padding: 10px; margin: 10px 0; }
    </style>
</head>
<body>
    <h2>Checking Properties with 'in' Operator</h2>
    <div class="output" id="output"></div>
    <button onclick="runChecks()">Run Checks</button>

    <script>
        function runChecks() {
            let obj = { name: "Alice", age: 30 };
            let output = document.getElementById('output');
            let results = [];
            
            results.push("'name' in obj: " + ('name' in obj));
            results.push("'age' in obj: " + ('age' in obj));
            results.push("'city' in obj: " + ('city' in obj));
            results.push("'toString' in obj: " + ('toString' in obj)); // inherited
            
            output.innerHTML = results.join('<br>');
        }
    </script>
</body>
</html>

Using Object.hasOwn() (Modern Approach)

The Object.hasOwn() method is a modern alternative to hasOwnProperty(), introduced in ES2022.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Object.hasOwn() Method</title>
    <style>
        .comparison { display: flex; gap: 20px; }
        .method { border: 1px solid #ddd; padding: 15px; flex: 1; }
    </style>
</head>
<body>
    <h2>Comparing Different Methods</h2>
    <div class="comparison">
        <div class="method" id="hasown-result"><h3>Object.hasOwn()</h3></div>
        <div class="method" id="hasownprop-result"><h3>hasOwnProperty()</h3></div>
    </div>
    <button onclick="compareMethod()">Compare Methods</button>

    <script>
        function compareMethod() {
            let user = { username: "john_doe", email: "john@example.com" };
            
            let hasOwnResult = document.getElementById('hasown-result');
            let hasOwnPropResult = document.getElementById('hasownprop-result');
            
            // Object.hasOwn() results
            let hasOwnResults = [
                "username: " + Object.hasOwn(user, 'username'),
                "email: " + Object.hasOwn(user, 'email'),
                "phone: " + Object.hasOwn(user, 'phone')
            ];
            
            // hasOwnProperty() results
            let hasOwnPropResults = [
                "username: " + user.hasOwnProperty('username'),
                "email: " + user.hasOwnProperty('email'),
                "phone: " + user.hasOwnProperty('phone')
            ];
            
            hasOwnResult.innerHTML += "<br>" + hasOwnResults.join('<br>');
            hasOwnPropResult.innerHTML += "<br>" + hasOwnPropResults.join('<br>');
        }
    </script>
</body>
</html>

Comparison of Methods

Method	Checks Own Properties	Checks Inherited Properties	Browser Support
`hasOwnProperty()`	Yes	No	All browsers
`in` operator	Yes	Yes	All browsers
`Object.hasOwn()`	Yes	No	Modern browsers (ES2022)

Key Points

Use hasOwnProperty() to check only direct properties of an object
Use in operator when you need to include inherited properties
Object.hasOwn() is the recommended modern approach
All methods return a boolean value

Conclusion

For checking object properties, Object.hasOwn() is the modern standard, while hasOwnProperty() remains widely used for backward compatibility. Choose the in operator when you need to include inherited properties.

AmitDiwan

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

154 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next