Demo
En JavaScript existeix l’operador delete, el qual és utilitzat per eliminar la propietat d’un objecte i després d’eliminar la propietat, aquesta propietat ja no pot ser accessible i torna el valor undefined, però hi ha altres coses interessants que és important saber sobre l’operador delete en JavaScript i en aquest Post te les comparteixo.
Abans de continuar amb aquest Post, et recomano escoltar el Podcast: “5 Consells per ser un Programador més productiu” (No són els clàssics consells tècnics de programació, sinó de rutines i bons hàbits quotidians): a Spotify:
Sound Cloud:
Bé ara continuem amb el Post: 5 Coses que cal saber sobre l’operador ‘delete’ en JavaScript.
Quan s’invoca a l’operador delete per eliminar una propietat, JavaScript retorna true o cas contrari retorna false, això només és efectiu en les propietats d’un objecte i no té efecte en els noms de variables o funcions.
l’operador delete no ha de ser utilitzat en les propietats d’objectes predefinits en JavaScript com window, Math i Dóna’t. Això pot fer que l’aplicació funcioni de manera inestable. Bé vegem a continuació alguns coses sobre l’operador delete.
eliminar Propietats d’un objecte
l’única manera per eliminar completament i les propietats d’un objecte en JavaScript és usant l’operador delete:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
var suc = {
nom: “suc de Taronja”,
preu: “2.50”,
estoc: 36
}
console.log (delete jugo.precio); // Elimino el ‘preu’
console.log (suc);
// Després d’executar la comanda console.log (suc), obtinc només:
{
nom: “Suc de Taronja”,
estoc: 36
}
|
Després d’executar la comanda console.log (suc) a la consola d’ordres de Chrome Dev Tools, només em torna nom i estoc, el preu s’elimino.
Si la propietat que s’intenta eliminar no existeix, l’operador delete no tindrà cap efecte i retornarà true.
no podem eliminar variables amb la sentència ‘var’
Mitjançant l’operador delete es pot eliminar les propietats d’un objecte, però no es poden eliminar les propietats declarades amb la sentència var:
|
1
2
3
4
|
var estoc = 36;
console.log (delete estoc);
console.log (estoc);
|
En el codi anterior, a l’executar la comanda console. log (estoc) a la consola d’ordres de Chrome Dev Tools, em torna el valor d’estoc, ja que no s’ha pogut eliminar.
I si declaro directament la variable estoc sense la sentència var:
|
1
2
3
4
|
estoc = 36;
console.log (delete estoc);
console.log (estoc);
|
A l’executar la comanda console.log (estoc) en la consola de comandaments de Chrome Dev Tools, em torna true, ja que elimini la variable estoc amb èxit.
Eliminar valors d’un matriu
ja que les matrius en JavaScript són objectes, els elements es poden eliminar mitjançant l’operador delete:
|
1
2
3
4
5
6
|
var sucs =;
console.log (delete sucs); // Elimino el 3r valor, és a dir el ‘Suc de papaia’
console.log (sucs); // A l’executar, obtinc ‘undefined’
console.log (sucs); // A l’executar, obtinc;
console.log (JSON.stringify (sucs)); // A l’executar, obtinc;
|
En el codi anterior vaig eliminar el 3r valor de l’array sucs , pots veure que a l’imprimir l’array sucs de diferents maneres a la consola d’ordres de Chrome Dev Tools, obtinc totes les dades, menys el 3er valor, és a dir Suc de Papaia, ja que aquest ha estat eliminat.
Per eliminar els elements buits (empty, null, etc.) puc executar el següent codi:
|
1
2
3
4
5
6
7
8
|
var netejar = jugos.filter (function (i) {
return i! = null;
});
console.log (netejar);
// Després d’executar la comanda console.log (netejar); obtinc:
|
Amb això tinc només obtinc els valors disponibles en l’array sucs.
No podem eliminar objectes integrats o predefinits en JavaScript
No és segur eliminar objectes predefinits de l’Llenguatge de Programació JavaScript com Math, Dóna’t i window, per exemple si intent eliminar l’objecte predefinit Math:
|
1
2
3
|
console.log (Math);
console.log (delete Math);
console.log (Math); // A l’executar aquesta comanda a la consola em torna ‘Uncaught ReferenceError: Math is not defined’
|
Pot causar inestabilitat en la meva aplicació, em torna Uncaught ReferenceError: Math is not defined.
no podem eliminar propietats no configurables
Les propietats d’un objecte , a més dels valors, tenen 3 atributs especials:
- writable: és true si el valor es pot canviar, cas contrari és de només lectura.
- enumerable: és true si apareix en bucles, cas contrari no apareix.
- configurable: És true si la propietat es pot eliminar o els atributs es poden modificar, cas contrari no es pot canviar.
Vegem l’exemple a continuació:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
let suc = {
nom: “Suc de Taronja”,
preu: “2.50”,
estoc: 36
}
let descripcion = Object.getOwnPropertyDescriptor (suc, ‘preu’);
console.log (JSON.stringify (descripció));
// A l’executar la comanda console.log (JSON.stringify (descripció)); obtinc una descripció amb els 3 atributs especials:
{
“value”: “2.50”,
“writable”: true,
“enumerable”: true,
“configurable”: true
}
|
En el codi anterior utilitzo el mètode Object.getOwnPropertyDescriptor () per a una descripció de la valor preu amb els seus atributs especials value, writable, enumerable i configurable.
I si a el valor preu li configura el seu atribut configurable a false amb el mètode Object.defineProperty (), a l’intentar eliminar el preu JavaScript no em deixarà fer-ho:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
let ju go = {
nom: “Suc de Taronja”,
preu: “2.50”,
estoc: 36
}
Object.defineProperty (suc, ‘preu’, {
value: “2.50”,
configurable: false
});
console.log (delete jugo.precio); // A l’intentar eliminar el preu em torna ‘false’
console.log (suc);
|
En el codi anterior a l’executar la comanda console.log (delete jugo.precio); em torna false, això és perquè li canviï l’atribut configurable a false.
Y si le configuramos el modo estricto al código JavaScript:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
‘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.