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.

     

    Etiquetas:

    Deja una respuesta

    Tu direcci贸n de correo electr贸nico no ser谩 publicada. Los campos obligatorios est谩n marcados con *