Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to add and remove properties from objects in JavaScript ?

  • Difficulty Level : Expert
  • Last Updated : 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' }

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!