JavaScript - defineProperties() method

revision:


Category : object

The Object.defineProperties() static method defines new or modifies existing properties directly on an object, returning the object.

Syntax :

        Object.defineProperties(obj, props)
    

Parameters:

obj : required. The object on which to define or modify properties.

props : required . An object whose keys represent the names of properties to be defined or modified and whose values are objects describing those properties. Each value in props must be either a data descriptor or an accessor descriptor; it cannot be both.

Examples:

            const object1 = {};
            Object.defineProperties(object1, {
                property1: {
                    value: 42,
                    writable: true
                },
                property2: {}
            });
            console.log(object1.property1);
            // Expected output: 42

        

Practical examples

example: using Object.defineProperties() method

code:
                    <div>
                        <p id="obj-1"></p>
                        <p id="obj-2"></p>
                        <p id="obj-3"></p>
                    
                    </div>
                    <script>
                        const obj = {};
                        Object.defineProperties(obj, {
                            property1: {
                                value: true,
                                writable: true,
                            },
                        property2: {
                            value: "Hello",
                            writable: false,
                        },
                        // etc. etc.
                        });
                        document.getElementById("obj-1").innerHTML = "properties defined : " + obj.property1;
                        document.getElementById("obj-2").innerHTML = "properties defined : " + obj.property2;
                        document.getElementById("obj-3").innerHTML = "properties defined : " + obj.property2.writable;
                    </script>
                

example: using Object.defineProperties() method

code:
                    <div>
                        <p id="obj-4"></p>
                        <p id="obj-5"></p>
                        <p id="obj-6"></p>
                        <p id="obj-7"></p>
                    </div>
                    <script>
                        const object1 = {};
                        Object.defineProperties(object1, {
                        prop1: {
                            value: "JavaScript",
                            writable: true,
                        },
                        prop2: {
                            value: "TypeScript",
                            writable: false,
                        },
                        });
                        console.log(object1.prop1); // JavaScript
                        console.log(object1.prop2); // TypeScript
                        // This works since prop1 is writable
                        document.getElementById("obj-4").innerHTML = "properties defined : " + object1.prop1;
                        document.getElementById("obj-5").innerHTML = "properties defined : " + object1.prop2;
            
                        object1.prop1 = "React";
                        console.log(object1.prop1); // React
                        document.getElementById("obj-6").innerHTML = "properties defined : " + object1.prop1;
                        // TypeError: Cannot assign to read only property 'prop2' of object '#<Object>'
                        object1.prop2 = "Node";
                        console.log(object1.prop2); // TypeScript
                        document.getElementById("obj-7").innerHTML = "properties defined : " + object1.prop2;
                    </script>
                

example: add new peroperties to an object

code:
                    <div>
                        <p id="def-1"></p>
                    </div>
                    <script>
                        const person = {
                            firstName: "John",
                            lastName: "Doe"
                        };
            
                        Object.defineProperties(person, {
                            language: {value: "en"},
                            year: {value: "Hello"}
                        });
                            
                        document.getElementById("def-1").innerHTML = person.language + " ,  " + person.year;
                    </script>