JavaScript: eliminar una propiedad de un objeto

Introducción

Un objeto en JavaScript es una colección de pares clave-valor. Uno de estos pares clave-valor se denomina propiedad de objeto. Tanto las claves como los valores de las propiedades pueden ser de cualquier tipo de datos: número, cadena, matriz, objeto, etc.

Por ejemplo:

const dog = {
    name: "Sandy",
    age: 3,
    emoji: "🐶"
}

Aquí, name: "Sandy", age: 3y emoji: "🐶" son las propiedades de un objeto perro.

En este artículo, veremos algunas formas de eliminar una propiedad de un objeto y compararlas para comprender qué método es apropiado en un contexto dado.

Eliminar una propiedad de un objeto

El operador de eliminación

La forma semánticamente correcta de eliminar una propiedad de un objeto es la delete operador. Veámoslo en acción:

const student = {
    name: "Jane",
    age: 16,
    score: {
        maths: 95,
        science: 90
    }
}

// Deleting a property from an object
delete student.age
delete student["score"]

console.log(student) // {name: "Jane"}

En el ejemplo anterior, el delete operador se utiliza para eliminar el name y score propiedades del student objeto.

Intentar acceder a cualquiera de las propiedades eliminadas volverá undefined:

console.log(student.age) // undefined

También el delete El operador devuelve un valor booleano que significa si la eliminación fue exitosa:

if (delete student.age) {
    console.log("Removed 'age' property from student");
} else {
    console.log("Failed to remove 'age' property, perhaps it doesn't exist?");
}

Si ejecutamos este código, dado que la propiedad ya está eliminada, nos saludan:

Failed to remove 'age' property, perhaps it doesn't exist?

Nuevo objeto sin la propiedad

Si no queremos modificar un objeto en el lugar, pero también queremos una versión del mismo sin una propiedad específica, podemos simplemente generar otro objeto con las mismas propiedades, excepto una.

En los casos en que conocemos el nombre de la propiedad que queremos eliminar, podemos usar la desestructuración de objetos para descomprimir el objeto en 2 partes:

• La propiedad que queremos eliminar
• Un objeto que representa el resto del objeto.

const car = {
    brand: "Ford",
    color: "blue",
    yearOfManufacturing: 2019
}

const {yearOfManufacturing, ...rest} = car;

console.log(rest); // {brand: "Ford", color: "blue"}

Sin embargo, si no sabemos el nombre exacto de la propiedad que queremos eliminar, necesitaremos crear un filtro que verifique si una propiedad cumple con los criterios de eliminación.

Por ejemplo, eliminemos todas las propiedades que tienen un valor numérico:

const developer = {
  name : "Fred",
  dailyCoffeIntake : 2,
  favoriteLanguage : "Haskell",
  age : 27
};

const keysToKeep = Object.keys(developer).filter(
  (key)=> {
    return !Number.isInteger(developer[key])
});

const newDeveloper = {};
keysToKeep.forEach((key)=>{
  newDeveloper[key] = developer[key]
});

console.log(newDeveloper); // {name: "Fred", favoriteLanguage: "Haskell"}

La función reduce ()

Alternativamente, podemos usar el reduce() método, que es un método de matriz incorporado que toma una colección y una función de reducción como argumento.

Luego, la función itera a través de todos los elementos de la colección, modifica el acumulador (que puede considerar como un resultado temporal para cada paso) y lo devuelve. Veamos este método en acción:

const dog = {
    name: "Sandy",
    age: 3,
    emoji: "🐶"
}

const newDog = Object.keys(dog).reduce((accumulator, key) => {
    // Copy all except emoji
    if(key !== "emoji"){
        accumulator[key] = dog[key]
    }
    return accumulator
}, {})

console.log(newDog) // {name: "Sandy", age: 3}

Conclusión

En este artículo, hemos visto cómo eliminar una propiedad de un objeto de varias formas. Hemos visto que usar delete mutará el objeto. Entonces, hemos discutido un par de formas: la ...rest sintaxis y reduce() método, para eliminar una propiedad de un objeto sin mutarlo.