¿Cómo agregar y eliminar propiedades de objetos en JavaScript?

En este artículo, intentaremos comprender cómo agregar propiedades a un objeto y cómo agregar o eliminar las propiedades de un objeto en JavaScript.

Antes de ir y ver la adición y eliminación de propiedades de un objeto, primero comprendamos los conceptos básicos de un objeto en JavaScript.

Objeto:

• Un objeto en JavaScript es la colección de propiedades.
• Una sola propiedad en un objeto de JavaScript es en realidad la asociación entre el nombre (o clave) y un valor.
• Un objeto puede contener un número diferente de propiedades que además tienen diferentes nombres y valores.

Sintaxis: al usar la siguiente sintaxis, se puede crear fácilmente un objeto con un número diferente de propiedades.

let object_name =
{
    property_name: value,
    ...
}

Ahora que hemos entendido los detalles básicos asociados con el objeto en JavaScript, veamos algunos ejemplos para agregar propiedades en un objeto y cómo eliminar propiedades de un objeto.

Agregar/eliminar propiedades de un objeto:

• Como se muestra en la representación pictórica anterior, podemos agregar o eliminar fácilmente varias propiedades de un objeto en JavaScript siguiendo ciertos métodos o técnicas.
• Para agregar cualquier propiedad, se podría usar nombre_objeto.nombre_propiedad = valor (o) nombre_objeto[“nombre_propiedad”] = valor .
• Para eliminar cualquier propiedad, se podría usar fácilmente delete object_name.property_name ( o)   delete object_name[“property_name”] .

Veamos algunos ejemplos para comprender mejor cómo agregar y quitar propiedades de un objeto.

Ejemplo 1: En este ejemplo, primero creamos un objeto y luego le agregaremos algunas propiedades.

<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>

Producción:

{ name: 'ABC', email: 'xyz@abc.com' }
{
  name: 'ABC',
  email: 'xyz@abc.com',
  age: 10,
  contact: 123467890,
  place: 'Earth',
  country: 'India'
}

Ejemplo 2: En este ejemplo, primero crearemos un objeto y luego eliminaremos algunas propiedades.

<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>

Producción:

{
  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
}

Ejemplo-3:

• En este ejemplo, eliminaremos propiedades del objeto usando otro enfoque.
• Este es el enfoque más nuevo que no altera el objeto original.
• Este enfoque se denomina Destrucción de objetos con el uso de parámetros de descanso.

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....

Producción:

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' }