5 Cosas que debes saber sobre el operador ‘delete’ en JavaScript

Nube Colectiva

hace 4 años

Demo

En JavaScript existe el operador delete, el cual es utilizado para eliminar la propiedad de un objeto y después de eliminar la propiedad, esa propiedad ya no puede ser accesible y devuelve el valor undefined, pero hay otras cosas interesantes que es importante saber sobre el operador delete en JavaScript y en este Post te las comparto.

Antes de continuar con este Post, te recomiendo escuchar el Podcast: “5 Consejos para ser un Programador más Productivo” (No son los clásicos consejos técnicos de programación, si no de rutinas y buenos hábitos cotidianos):
Spotify:

Sound Cloud:

Bien ahora continuemos con el Post: 5 Cosas que debes saber sobre el operador ‘delete’ en JavaScript.

Cuando se invoca al operador delete para eliminar una propiedad, JavaScript retorna true o caso contrario retorna false, esto solo es efectivo en las propiedades de un objeto y no tiene efecto en los nombres de variables o funciones.

El operador delete no debe ser utilizado en las propiedades de objetos predefinidos en JavaScript como window, Math y Date. Esto puede hacer que la aplicación funcione de manera inestable. Bien veamos a continuación algunos cosas sobre el operador delete.

Eliminar Propiedades de un objeto

La única manera para eliminar completamente las propiedades de un objeto en JavaScript es usando el operador delete:


var jugo = {
    nombre: "Jugo de Naranja",
    precio: "2.50",
    stock: 36
}
console.log(delete jugo.precio); // Elimino el 'precio' 
console.log(jugo); 

// Tras ejecutar el comando console.log(jugo), obtengo solamente: 
{
    nombre: "Jugo de Naranja",
    stock: 36
}

var jugo = {

nombre: "Jugo de Naranja",

precio: "2.50",

stock: 36

}

console.log(delete jugo.precio); // Elimino el 'precio'

console.log(jugo);

// Tras ejecutar el comando console.log(jugo), obtengo solamente:

{

nombre: "Jugo de Naranja",

stock: 36

}

Tras ejecutar el comando console.log(jugo) en la consola de comandos de Chrome Dev Tools, solo me devuelve nombre y stock, el precio se elimino.

Si la propiedad que se intenta eliminar no existe, el operador delete no tendrá ningún efecto y retornará true.

No podemos eliminar variables con la sentencia ‘var’

Mediante el operador delete se puede eliminar las propiedades de un objeto, pero no se pueden eliminar las propiedades declaradas con la sentencia var:


var stock = 36;

console.log(delete stock);
console.log(stock);

var stock = 36;

console.log(delete stock);

console.log(stock);

En el código anterior, al ejecutar el comando console.log(stock) en la consola de comandos de Chrome Dev Tools, me devuelve el valor de stock, ya que no se ha podido eliminar.

Y si declaro directamente la variable stock sin la sentencia var:


stock = 36;

console.log(delete stock);
console.log(stock);

stock = 36;

console.log(delete stock);

console.log(stock);

Al ejecutar el comando console.log(stock) en la consola de comandos de Chrome Dev Tools, me devuelve true, ya que elimine la variable stock exitosamente.

Eliminar valores de un matriz

Ya que las matrices en JavaScript son objetos, los elementos se pueden eliminar mediante el operador delete:


var jugos = ["Jugo de Naranja", "Jugo de Fresa", "Jugo de Papaya", "Jugo de Lúcuma", "Jugo de Mango"];

console.log(delete jugos[2]); // Elimino el 3r valor, es decir el 'Jugo de Papaya' 
console.log(jugos[2]); // Al ejecutar, obtengo 'undefined' 
console.log(jugos); // Al ejecutar, obtengo ["Jugo de Naranja", "Jugo de Fresa", empty, "Jugo de Lúcuma", "Jugo de Mango"];
console.log(JSON.stringify(jugos)); // Al ejecutar, obtengo ["Jugo de Naranja", "Jugo de Fresa", null, "Jugo de Lúcuma", "Jugo de Mango"];

var jugos = ["Jugo de Naranja", "Jugo de Fresa", "Jugo de Papaya", "Jugo de Lúcuma", "Jugo de Mango"];

console.log(delete jugos[2]); // Elimino el 3r valor, es decir el 'Jugo de Papaya'

console.log(jugos[2]); // Al ejecutar, obtengo 'undefined'

console.log(jugos); // Al ejecutar, obtengo ["Jugo de Naranja", "Jugo de Fresa", empty, "Jugo de Lúcuma", "Jugo de Mango"];

console.log(JSON.stringify(jugos)); // Al ejecutar, obtengo ["Jugo de Naranja", "Jugo de Fresa", null, "Jugo de Lúcuma", "Jugo de Mango"];

En el código anterior eliminé el 3er valor del array jugos, puedes ver que al imprimir el array jugos de diferentes maneras en la consola de comandos de Chrome Dev Tools, obtengo todos los datos, menos el 3er valor, es decir Jugo de Papaya, ya que este ha sido eliminado.

Para eliminar los elementos vacíos (empty, null, etc.) puedo ejecutar el siguiente código:


var limpiar = jugos.filter(function(e) {
    return e != null;
}); 

console.log(limpiar); 

// Tras ejecutar el comando console.log(limpiar); obtengo: 
["Jugo de Naranja", "Jugo de Fresa", "Jugo de Lúcuma", "Jugo de Mango"]

var limpiar = jugos.filter(function(e) {

return e != null;

});

console.log(limpiar);

// Tras ejecutar el comando console.log(limpiar); obtengo:

["Jugo de Naranja", "Jugo de Fresa", "Jugo de Lúcuma", "Jugo de Mango"]

Con esto tengo solo obtengo los valores disponibles en el array jugos.

No podemos eliminar objetos integrados o predefinidos en JavaScript

No es seguro eliminar objetos predefinidos del Lenguaje de Programación Javascript como Math, Date y window, por ejemplo si intento eliminar el objeto predefinido Math:


console.log(Math);
console.log(delete Math);
console.log(Math); // Al ejecutar este comando la consola me devuelve 'Uncaught ReferenceError: Math is not defined'

console.log(Math);

console.log(delete Math);

console.log(Math); // Al ejecutar este comando la consola me devuelve 'Uncaught ReferenceError: Math is not defined'

Puede causar inestabilidad en mi aplicación, me devuelve Uncaught ReferenceError: Math is not defined.

No podemos eliminar propiedades no Configurables

Las propiedades de un objeto, ademas de los valores, tienen 3 atributos especiales:

writable: Es true si el valor se puede cambiar, caso contrario es de solo lectura.
enumerable: Es true si aparece en bucles, caso contrario no aparece.
configurable: Es true si la propiedad se puede eliminar o los atributos se pueden modificar, caso contrario no se puede cambiar.

Veamos el ejemplo a continuación:


let jugo = {
    nombre: "Jugo de Naranja",
    precio: "2.50",
    stock: 36
}

let descripcion = Object.getOwnPropertyDescriptor(jugo, 'precio');
console.log(JSON.stringify(descripcion));

// Al ejecutar el comando console.log(JSON.stringify(descripcion)); obtengo una descripción con los 3 atributos especiales: 
{
    "value": "2.50",
    "writable": true,
    "enumerable": true,
    "configurable": true
}

let jugo = {

nombre: "Jugo de Naranja",

precio: "2.50",

stock: 36

}

let descripcion = Object.getOwnPropertyDescriptor(jugo, 'precio');

console.log(JSON.stringify(descripcion));

// Al ejecutar el comando console.log(JSON.stringify(descripcion)); obtengo una descripción con los 3 atributos especiales:

{

"value": "2.50",

"writable": true,

"enumerable": true,

"configurable": true

}

En el código anterior utilizo el método Object.getOwnPropertyDescriptor() para obtener una descripción del valor precio con sus atributos especiales value, writable, enumerable y configurable.

Y si al valor precio le configuro su atributo configurable a false con el método Object.defineProperty(), al intentar eliminar el precio JavaScript no me dejará hacerlo:


let jugo = {
    nombre: "Jugo de Naranja",
    precio: "2.50",
    stock: 36
}

Object.defineProperty(jugo, 'precio', {
    value: "2.50",
    configurable: false
});

console.log(delete jugo.precio); // Al intentar eliminar el precio me devuelve 'false'
console.log(jugo);

let jugo = {

nombre: "Jugo de Naranja",

precio: "2.50",

stock: 36

}

Object.defineProperty(jugo, 'precio', {

value: "2.50",

configurable: false

});

console.log(delete jugo.precio); // Al intentar eliminar el precio me devuelve 'false'

console.log(jugo);

En el código anterior al ejecutar el comando console.log(delete jugo.precio); me devuelve false, esto es porque le cambie el atributo configurable a false.

Y si le configuramos el modo estricto al código JavaScript:


'use strict'

let jugo = {
    nombre: "Jugo de Naranja",
    precio: "2.50",
    stock: 36
}

Object.defineProperty(jugo, 'precio', {
    value: "2.50",
    configurable: false
});

console.log(delete jugo.precio);
console.log(jugo);

'use strict'

let jugo = {

nombre: "Jugo de Naranja",

precio: "2.50",

stock: 36

}

Object.defineProperty(jugo, 'precio', {

value: "2.50",

configurable: false

});

console.log(delete jugo.precio);

console.log(jugo);

Me devuelve el error: Cannot delete property ‘precio’ of #<Object>

Conclusión

En este Post hemos observado 5 situaciones en donde el operador delete puede funcionar o no puede funcionar. Es importante conocer esta información, ya que cuando desarrolles un proyecto con JavaScript, se pueden presentar algunos de los errores que hemos visto en este Post, cuando intentas eliminar una propiedad de un objeto.

Nota

Los métodos , propiedades, etc. expuestos en este Post pueden dejar de existir o continuar en futuras versiones de JavaScript, esto no depende de mi si no de los Desarrolladores que dan soporte a JavaScript.
No olvides que debemos usar la Tecnología para hacer cosas Buenas por el Mundo.

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.