JavaScript - hasOwn() method

revision:

Category : object

The Object.hasOwn() static method returns true if the specified object has the indicated property as its own property. If the property is inherited, or does not exist, the method returns false.

Syntax : 

        Object.hasOwn(obj, prop)

Parameters:

obj : required. The JavaScript object instance to test.

prop : required. The String name or Symbol of the property to test.

Examples:

        const object1 = {
            prop: 'exists'
        };
        console.log(Object.hasOwn(object1, 'prop'));
          // Expected output: true
        console.log(Object.hasOwn(object1, 'toString'));
          // Expected output: false
        console.log(Object.hasOwn(object1, 'undeclaredPropertyValue'));
          // Expected output: false

Practical examples

example: using hasOwn() method to test for a property's existence.

code: 
                    <div>
                        <p id="has-1"></p>
                        <p id="has-2"></p>
                        <p id="has-3"></p>
                        <p id="has-4"></p>
                    </div>
                    <script>
                        const example = {};
                        Object.hasOwn(example, "prop"); // false - 'prop' has not been defined
                        document.getElementById("has-1").innerHTML = "has own property ? : " + Object.hasOwn(example, "prop");
                        example.prop = "exists";
                        Object.hasOwn(example, "prop"); // true - 'prop' has been defined
                        document.getElementById("has-2").innerHTML = "has own property ? : " + Object.hasOwn(example, "prop");
                        example.prop = null;
                        Object.hasOwn(example, "prop"); // true - own property exists with value of null
                        document.getElementById("has-3").innerHTML = "has own property ? : " + Object.hasOwn(example, "prop");
                        example.prop = undefined;
                        Object.hasOwn(example, "prop"); // true - own property exists with value of undefined
                        document.getElementById("has-4").innerHTML = "has own property ? : " + Object.hasOwn(example, "prop");
                    </script>

example: direct vs. inherited properties

code: 
                    <div>
                        <p id="has-5"></p>
                        <p id="has-6"></p>
                        <p id="has-7"></p>
                        <p id="has-8"></p>
                    </div>
                    <script>
                        const example1 = {};
                        example1.prop = "exists";
                        // `hasOwn` will only return true for direct properties:
                        Object.hasOwn(example1, "prop"); // true
                        Object.hasOwn(example1, "toString"); // false
                        Object.hasOwn(example1, "hasOwnProperty"); // false
                        document.getElementById("has-5").innerHTML = "has own property ? : " + Object.hasOwn(example1, "prop");
                        document.getElementById("has-6").innerHTML = "has own property ? : " + Object.hasOwn(example1, "toString");
                        document.getElementById("has-7").innerHTML = "has own property ? : " + Object.hasOwn(example1, "hasOwnProperty");
            
                    </script>

example: the Object.hasOwn() method and why to use it.

code: 
                    <div>
                        <p id="has-9"></p>
                        <p id="has-10"></p>
                        <p id="has-11"></p>
                        <p id="has-12"></p>
                        <p id="has-13"></p>
                        <p id="has-14"></p>
                    </div>
                    <script>
                        const person = { name: 'John' };
                        console.log(Object.hasOwn(person, 'name'));// true
                        document.getElementById('has-9').innerHTML = " has property 'name' : " + Object.hasOwn(person, 'name')
                        console.log(Object.hasOwn(person, 'age'));// false
                        document.getElementById('has-10').innerHTML = " has property 'age' : " + Object.hasOwn(person, 'age')
                        console.log(person.hasOwnProperty('name'));// true
                        document.getElementById('has-11').innerHTML = " has own property 'name' : " + Object.hasOwnProperty('name')
                        console.log(person.hasOwnProperty('age'));// false
                        document.getElementById('has-12').innerHTML = " has own property 'age' : " + Object.hasOwnProperty('age')
                        const person2 = Object.create({gender: 'male'});
                        console.log(Object.hasOwn(person2, 'gender')); // false
                        document.getElementById('has-13').innerHTML = " has property 'gender' : " + Object.hasOwn(person2, 'gender')
                        console.log(person.hasOwnProperty('gender')); //false
                        // gender is not an own property of person, it exist on the person2 prototype
                        document.getElementById('has-14').innerHTML = " has own property 'gender' : " + Object.hasOwnProperty('gender')
            
                    </script>