JavaScript: eliminar una propiedad de un objeto

En este tutorial, veremos cómo eliminar una propiedad de un objeto de JavaScript. Cubriremos el operador de eliminación, así como la sintaxis {...rest} y el método reduce().

Introducción

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

Por ejemplo:

1
2
3
4
5
const dog = {
    name: "Sandy",
    age: 3,
    emoji: "🐶"
}

Aquí, nombre: "Sandy", edad: 3 y 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 determinado.

Quitar una propiedad de un objeto

El operador delete

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
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 operador delete se usa para eliminar las propiedades name y score del objeto student.

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

1
console.log(student.age) // undefined

Además, el operador delete devuelve un valor booleano que indica si la eliminación fue exitosa:

1
2
3
4
5
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 se eliminó, nos recibe:

1
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 generar otro objeto con todas las mismas propiedades pero con una.

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

  1. La propiedad que queremos eliminar
  2. Un objeto que representa el resto del objeto.
1
2
3
4
5
6
7
8
9
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 hacer 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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
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 método reduce(), 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 y modifica el acumulador (que puede considerar como un resultado temporal para cada paso) y lo devuelve. Veamos este método en acción:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
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 maneras. Hemos visto que usar delete mutará el objeto. Por lo tanto, hemos discutido un par de formas: la sintaxis ...rest y el método reduce(), para eliminar una propiedad de un objeto sin mutarlo.