How to add and remove properties from objects in JavaScript ?

13 Jan, 2022
In this article, we will try to understand how to add properties to an object as well as how to add or remove the properties from an object in JavaScript.
Before we actually go and see the addition and removal of properties from an object let us first understand the basics of an object in JavaScript.
Object:
An object in JavaScript is the collection of properties.
A single property in a JavaScript object is actually the association between the name (or key ) and a value.
An object can contain a different number of properties which is further having different names as well as values.
Syntax: By using the following syntax one can easily create an object with a different number of properties.
let object_name =
{
    property_name: value,
    ...
}
Now that we have understood the basic details associated with the object in JavaScript, let us see some examples to add properties in an object as well as how to remove properties from an object.
Adding/Removing Properties from an Object:
As depicted in the above pictorial representation, we can easily add or remove several properties from an object in JavaScript by following certain methods or techniques.
For adding any property, one could either use object_name.property_name = value (or) object_name[“property_name”] = value.
For deleting any property, one could easily use delete object_name.property_name (or)  delete object_name[“property_name”].
Let us see some examples in order to have a better understanding of how to add and remove properties from an object.
Example 1: In this example, we first create an object, and further we will be adding some properties to it.
Javascript
<script>    let object = {        name: "ABC",        email: "xyz@abc.com"    };    console.log(object);      // Adding some properties into the    // above created object...    object.age = 10;    object.contact = 123467890;    object.place = "Earth";    object["country"]= "India";      console.log(object);</script>
Output:
{ name: 'ABC', email: 'xyz@abc.com' }
{
  name: 'ABC',
  email: 'xyz@abc.com',
  age: 10,
  contact: 123467890,
  place: 'Earth',
  country: 'India'
}
Example 2: In this example, we will first create an object and then remove some properties.
Javascript
<script>    let object = {        name: "ABC",        email: "xyz@abc.com",        age: 10,        contact: 1234567890,        place: "Earth",        country: "India",    };    console.log(object);      // Removing some properties     // from the above created object    delete object.age; // age property deletion    console.log(object);          // country property deletion    delete object["country"];     console.log(object);    delete object.place; // place property deletion    console.log(object);</script>
Output:
{
  name: 'ABC',
  email: 'xyz@abc.com',
  age: 10,
  contact: 1234567890,
  place: 'Earth',
  country: 'India'
}
{
  name: 'ABC',
  email: 'xyz@abc.com',
  contact: 1234567890,
  place: 'Earth',
  country: 'India'
}
{
  name: 'ABC',
  email: 'xyz@abc.com',
  contact: 1234567890,
  place: 'Earth'
}
{
 name: 'ABC', 
 email: 'xyz@abc.com', 
 contact: 1234567890
}
Example-3:
In this example we will remove properties from the object by using another approach.
This is the newest approach which doesn’t alter the original object.
This approach is called Object Destructuring with rest parameters usage.
Javascript
let person_data = {    first_name: "ABC",    last_name: "DEF",    age: 20,    eye_color: "brown",    place: "XYZ",};  let { eye_color, ...remainingObject } = person_data;console.log("Original Object...");console.log(person_data);console.log("Remaining Object.....");console.log(remainingObject);  //Another way of Object Destructuing Approach Implementation......  let property_name = "place";let { [property_name]: removedProperty, ...restObject } = person_data;console.log("Remaining Object");console.log(restObject);  //Another way of Object Destructuing Approach Implementation......let { place, age, ...leftObject } = person_data;console.log("Remaining Object");console.log(leftObject);  // This code is contributed by Aman Singla....
Output:
Original Object...
{ first_name: 'ABC', last_name: 'DEF', age: 20, 
    eye_color: 'brown', place: 'XYZ' }
Remaining Object.....
{ first_name: 'ABC', last_name: 'DEF', age: 20, place: 'XYZ' }
Remaining Object
{ first_name: 'ABC', last_name: 'DEF', age: 20, eye_color: 'brown' }
Remaining Object
{ first_name: 'ABC', last_name: 'DEF', eye_color: 'brown' }
amansingla
javascript-object
JavaScript-Questions
Picked
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Remove elements from a JavaScript Array
Difference Between PUT and PATCH Request
Roadmap to Learn JavaScript For Beginners
JavaScript | Promises
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?