How to add and remove the property of the object in JavaScript ?

Yes in JavaScript it is possible to add the dynamic property to the object and remove the property form the object. There is several way to add and remove the property in object of the JavaScript.

Add the property in Object.

There is two way to add the property in object.

1. First Way

You can add the property in object like we add the new element to the array, Yes It is so easy to add the property to the object.

var object = {
        FirstName: "XYZ"
};

document.write("Property in the Object");
for (var prop in object) {
        document.write(prop);
}

object["LastName"] = "ABC";
// Here new property "LastName" added to the object.

document.write("New Property \"LastName\" add to the Object.");
for (var prop in object) {
        document.write(prop);
}

//Property in the Object
//
//FirstName
//
//New Property "LastName" add to the Object. 
//
//FirstName
//LastName

By above code we add the new property “LastName” to the object. We can also access that property like we access the another property.

var object = {
        FirstName: "XYZ"
};

object["LastName"] = "ABC";

alert("First Name: " + object.FirstName);
alert("Last Name: " + object.LastName);

//First Name: XYZ
//Last Name: ABC

As you seen in above example, I access the newly added LastName property like we access the another property of the object in JavaScript.

2. Second Way

We can also use the defineProperty function, It was the static function of the Object class. By using this function we can add the new property to object.

var object = {
        FirstName: "XYZ"
};

Object.defineProperty(object, "LastName", {
        value: "ABC",
        writable: true,
        enumerable: false,
        configurable: false
});

alert("First Name: " + object.FirstName);
alert("Last Name: " + object.LastName);

//First Name: XYZ
//Last Name: ABC

we can also change the value of the newly created property of object like we change the value of the another property.

var object = {
        FirstName: "XYZ"
};

Object.defineProperty(object, "LastName", {
        value: "ABC",
        writable: true,
        enumerable: false,
        configurable: false
});

alert("Last Name: " + object.LastName);

object.LastName = "New value.";

alert("Last Name: " + object.LastName);

//Last Name: ABC
//Last Name: New value.

Remove the property from the object.

We can also remove the any property of the object using the delete statement. It was so easy to use.

var object = {
        FirstName: "XYZ",
        LastName: "ABC"
};

document.write("Propperties of the object.");
for (var prop in object) {
        document.write(prop);
}

delete object["LastName"];

document.write("Propperties of the object.");
for (var prop in object) {
        document.write(prop);
}

//Propperties of the object. 
//
//FirstName
//
//LastName
//
//Propperties of the object. 
//
//FirstName

After deleting the property we does not able to access that property. If you going to access that property, you got the message like undefined.

var object = {
        FirstName: "XYZ",
        LastName: "ABC"
};

delete object["LastName"];

document.write("Propperties of the object.");
for (var prop in object) {
        document.write(prop);
}

alert(object.LastName); //undefined

//Propperties of the object. 
//
//FirstName

I hope you enjoy this article. Please comment down your review about this.

Happy Coding!!!

🙂