Domina cómo eliminar elementos de un array con pop y un método personalizado delete dentro de una clase en JavaScript. Aprenderás a usar this, la length y la reindexación para mantener la estructura del array, devolviendo siempre el elemento eliminado. Explicación clara, ejemplos y código listos para usar.
¿Cómo eliminar el último elemento con pop en JavaScript?
Eliminar el último elemento es directo con pop: identifica el índice final con length - 1, guarda el valor, usa el keyworddelete para borrarlo del objeto data y reduce la length en 1. Así, también sabes qué elemento fue borrado, porque pop debe retornarlo.
¿Por qué usar length - 1 para el último índice?
Los índices inician en cero.
Si length es 3, el último índice es 2.
Evitas acceder a un índice que no existe.
¿Cómo se implementa pop dentro de una clase?
classMyArray{constructor(){this.length=0;this.data={};}// ... get y push ya implementados previamente.pop(){const lastIndex =this.length-1;const lastItem =this.data[lastIndex];deletethis.data[lastIndex];// keyword delete borra la propiedad.this.length--;return lastItem;}}
Puntos clave:
this.data[this.length - 1] obtiene el último elemento.
delete borra esa posición del objeto interno.
this.length-- mantiene la longitud correcta del array.
¿Cómo borrar por índice y reacomodar con delete y shift index?
Cuando no borras el último elemento, necesitas reacomodar índices. La idea: desde el índice eliminado, cada elemento se recorre una posición a la izquierda. Después, se borra el último duplicado y se reduce length.
¿Cuál es la diferencia entre el keyword delete y el método delete?
delete (palabra reservada): borra una propiedad del objeto, por ejemplo, delete this.data[i].
delete (método de la clase): tu método personalizado que recibe un index, reacomoda y devuelve el elemento borrado.
¿Cómo reindexar eficientemente con shift index?
Inicia el bucle en el índice a borrar para evitar recorrer desde cero.
Copia el valor de i + 1 en i para “correr” los elementos a la izquierda.
Borra el último índice y reduce length.
classMyArray{constructor(){this.length=0;this.data={};}// ... get y push ya implementados previamente.shiftIndex(index){for(let i = index; i <this.length-1; i++){this.data[i]=this.data[i +1];}deletethis.data[this.length-1];this.length--;}delete(index){const item =this.data[index];this.shiftIndex(index);return item;}}
Ejemplo práctico:
Agrega: Diego, Karen, Óscar con push.
pop() devuelve y borra Óscar (último).
delete(1) borra Karen y mueve Óscar a índice 1.
¿Qué habilidades desarrollas y qué sigue?
Este contenido fortalece tu base en estructuras de datos con clases de JavaScript:
Manejo de this, constructor, métodos y organización en clases.
Uso de índices y length para direccionar el último elemento.
Diferencia entre keyworddelete y método personalizado delete.
Reindexación con un bucle optimizado iniciando en el índice objetivo.
Patrón de retorno: el método devuelve el elemento eliminado.
Reto propuesto:
Implementa un método para agregar un elemento al inicio del array.
Implementa un método para eliminar un elemento al inicio del array.
¿Te animas a compartir tu solución o una mejora al algoritmo de reindexación? Deja tus ideas y dudas en los comentarios.
Domina cómo eliminar elementos de un array con pop y un método personalizado delete dentro de una clase en JavaScript. Aprenderás a usar this, la length y la reindexación para mantener la estructura del array, devolviendo siempre el elemento eliminado. Explicación clara, ejemplos y código listos para usar.
¿Cómo eliminar el último elemento con pop en JavaScript?
Eliminar el último elemento es directo con pop: identifica el índice final con length - 1, guarda el valor, usa el keyworddelete para borrarlo del objeto data y reduce la length en 1. Así, también sabes qué elemento fue borrado, porque pop debe retornarlo.
¿Por qué usar length - 1 para el último índice?
Los índices inician en cero.
Si length es 3, el último índice es 2.
Evitas acceder a un índice que no existe.
¿Cómo se implementa pop dentro de una clase?
class MyArray {
constructor() {
this.length = 0;
this.data = {};
}
// ... get y push ya implementados previamente.
pop() {
const lastIndex = this.length - 1;
const lastItem = this.data[lastIndex];
delete this.data[lastIndex]; // keyword delete borra la propiedad.
this.length--;
return lastItem;
}
}
Puntos clave:
this.data[this.length - 1] obtiene el último elemento.
delete borra esa posición del objeto interno.
this.length-- mantiene la longitud correcta del array.
¿Cómo borrar por índice y reacomodar con delete y shift index?
Cuando no borras el último elemento, necesitas reacomodar índices. La idea: desde el índice eliminado, cada elemento se recorre una posición a la izquierda. Después, se borra el último duplicado y se reduce length.
¿Cuál es la diferencia entre el keyword delete y el método delete?
delete (palabra reservada): borra una propiedad del objeto, por ejemplo, delete this.data[i].
delete (método de la clase): tu método personalizado que recibe un index, reacomoda y devuelve el elemento borrado.
¿Cómo reindexar eficientemente con shift index?
Inicia el bucle en el índice a borrar para evitar recorrer desde cero.
Copia el valor de i + 1 en i para “correr” los elementos a la izquierda.
Borra el último índice y reduce length.
class MyArray {
constructor() {
this.length = 0;
this.data = {};
}
// ... get y push ya implementados previamente.
shiftIndex(index) {
for (let i = index; i < this.length - 1; i++) {
this.data[i] = this.data[i + 1];
}
delete this.data[this.length - 1];
this.length--;
}
delete(index) {
const item = this.data[index];
this.shiftIndex(index);
return item;
}
}
Ejemplo práctico:
Agrega: Diego, Karen, Óscar con push.
pop() devuelve y borra Óscar (último).
delete(1) borra Karen y mueve Óscar a índice 1.
¿Qué habilidades desarrollas y qué sigue?
Este contenido fortalece tu base en estructuras de datos con clases de JavaScript:
Manejo de this, constructor, métodos y organización en clases.
Uso de índices y length para direccionar el último elemento.
Diferencia entre keyworddelete y método personalizado delete.
Reindexación con un bucle optimizado iniciando en el índice objetivo.
Patrón de retorno: el método devuelve el elemento eliminado.
Reto propuesto:
Implementa un método para agregar un elemento al inicio del array.
Implementa un método para eliminar un elemento al inicio del array.
¿Te animas a compartir tu solución o una mejora al algoritmo de reindexación? Deja tus ideas y dudas en los comentarios.
TODO ESTO SUCEDE DENTRO DE UN OBJETO,COMO S EVE ARRIBA...
Acordate que la idea de este ejercicio se basa en
en la primer parte, el usuario nos dara un numero = (index), y lo unico que nos importa de este metodo es la parte de this.shiftIndex(index), lo que esta parte es como el this.etc llama al metodo de la 2da parte:
Y si el usuario quiere borra ellie nos dara el index 1.Entonces volvemos al codigo:
ACLARACION: Cuando hablo de array, hablo de el objeto {
1:ariel
2:ellie
etc
} Pero al yo estra creando el array, le digo asi mas facil.pero todo el codigo, esta basado en el objeto, por eso el delete y todo eso.
Estamos en el loop: for(let i = index; i < this.length -1; i++) este empieza con el i = index, es decir, el bucle empieza con “ellie”, y terminara cuando nos quedemos sin array.
this.data[i] = this.data[i + 1]; Aca empieza el show, entonces la idea es eliminar a ellie, entonces ahora, ellie = this.data[i] pero yo la quiero eliminar, entonces la sobreescribiremos con this.data[i + 1] = (’nina’) ahora el array es [ariel,nina,nina,celular],
ahora nina = this.data[2] ⇒ se sobreescriibira con celular, y entonces quedara ⇒ [’ariel’,’’nina’,’celular’,’celular’]
Ahora ya no seguimos porque no hay mas array, entonces que sucede?
delete this.data[this.length -1] borramos la ultima posicion del array, es decir celular, ahora el array queda asi:[’ariel’,’’nina’,’celular’,undefined]
queda eliminar la longitud del array para que no sea vea el undefined ⇒ this.length--;
Por si no quedó claro lo que hace la palabra reservada delete simplemente "unsetea" cierto índice de un objeto, es decir, lo elimina, es similar a usar la función unset() en PHP.
.
Dejo un link con más información de esta palabra reservada:
Obviamente ahí alta un "2", shiftIndex irá posición por posición tomando el elemento de la siguiente posición (i + 1) y "jalándolo" a la posición actual (i)
Hay que tener validaciones para evitar problemas, por ejemplo, si queremos usar el metodo "pop" debemos validar que el length sea mayor a 0 (que tenga al menos un elemento).
// Agregar un elemento al inicio del array
unshift(item) {
for (let i = this.length; i > 0; i--) {
this.data[i] = this.data[i - 1];
}
this.data[0] = item;
this.length++;
return this.data;
}
// Eliminando el primer indice del arreglo
shift() {
this.shiftIndex(0);
}
Empecé haciendo los ejercicios de esta clase, y de repente todo se salió de control y voy por 400 lineas de código :smile:
Hasta ahora he implementado los siguientes métodos: forEach, at, concat, copyWithin, filter, find, findIndex, flat, includes, every, join, toString, indexOf, keys, values, entries, get, push, pop, shift, unshift, delete, splice, reduce.
Aquí dejo el enlace al repositorio:
Creo haber encontrado un error, en la funcion shiftIndex deberia ser ‘delelte this.data[index +1]’ ya que como está en el video solo sirve si eliminamos el penúltimo elemento… lo descubrí al intentar delete(2) un array de length 7 y me tiraba una excepción asi que lo deje así y me resulto
shiftIndex(index){
for (let i = index; i < this.length -1; i++) {
this.data[i] = this.data[i+1]
}
delete this.data[index +1]
this.length--;
}
si estoy equivocado me avisan pero me aprece que esta es la forma correcta
Con este metodo Agregamos elementos al inicio del array
// Agrega un elemento al inicio del arrayunshift(item){for(let i =this.length; i >0; i--){this.data[i]=this.data[i -1];}this.data[0]= item;this.length++;returnthis.data;}
Cómo estás Juan? Sabes que el this.length debería ir antes del ciclo for. De lo contrario, estarías borrando el último valor del array.
Sí, haces el shift correctamente y se reordenan los valores, pero el último valor se borra.
Sigue la lógica paso a paso del for, y verás por qué te lo digo.
Si te quedan dudas, chequealo en la consola de Chrome.
Si colocas el this.length antes del ciclo for, todo queda funcionando perfecto.
Un abrazo!
Gracias por el aporte!
Holaa, les paso una explicacion!
TODO ESTO SUCEDE DENTRO DE UN OBJETO,COMO S EVE ARRIBA...
Acordate que la idea de este ejercicio se basa en
en la primer parte, el usuario nos dara un numero = (index), y lo unico que nos importa de este metodo es la parte de this.shiftIndex(index), lo que esta parte es como el this.etc llama al metodo de la 2da parte:
shiftIndex(index){for(let i = index; i <this.length-1; i++){this.data[i]=this.data[i +1];}deletethis.data[this.length-1]this.length--;}
Lo primero es pensar supongamos en un array:
[’ariel’,’ellie’,’nina’,’celular’]
Y si el usuario quiere borra ellie nos dara el index 1.Entonces volvemos al codigo:
ACLARACION: Cuando hablo de array, hablo de el objeto {
1:ariel
2:ellie
etc
} Pero al yo estra creando el array, le digo asi mas facil.pero todo el codigo, esta basado en el objeto, por eso el delete y todo eso.
Estamos en el loop: for(let i = index; i < this.length -1; i++) este empieza con el i = index, es decir, el bucle empieza con “ellie”, y terminara cuando nos quedemos sin array.
this.data[i] = this.data[i + 1]; Aca empieza el show, entonces la idea es eliminar a ellie, entonces ahora, ellie = this.data[i] pero yo la quiero eliminar, entonces la sobreescribiremos con this.data[i + 1] = (’nina’) ahora el array es [ariel,nina,nina,celular],
ahora nina = this.data[2] ⇒ se sobreescriibira con celular, y entonces quedara ⇒ [’ariel’,’’nina’,’celular’,’celular’]
Ahora ya no seguimos porque no hay mas array, entonces que sucede?
delete this.data[this.length -1] borramos la ultima posicion del array, es decir celular, ahora el array queda asi:[’ariel’,’’nina’,’celular’,undefined]
queda eliminar la longitud del array para que no sea vea el undefined ⇒ this.length--;
LISTOOOO
Super! Me sirvio de mucho tu explacion muy amable!
Me alegra muchisimo! Cualquier cosa que necesites, hablame!
Por si no quedó claro lo que hace la palabra reservada delete simplemente "unsetea" cierto índice de un objeto, es decir, lo elimina, es similar a usar la función unset() en PHP.
.
Dejo un link con más información de esta palabra reservada:
Obviamente ahí alta un "2", shiftIndex irá posición por posición tomando el elemento de la siguiente posición (i + 1) y "jalándolo" a la posición actual (i)
Gracias , con tu explicacion ha quedado mas claro.
Vientos!!!! Gracias a tu explicacion pude entedner lo eu realmente hace esa funcion ya que no me quedaba claro a pesar de que vi un sinfin de veces la clase para poder entender pero ahora ya me quedo claro. Gracias!
Añadí la función de shift (eliminar el primer elemento del array)
Utilice la función de shiftIndex que ya teníamos para recorrer los elementos del array, espero que les sirva :D
Gracias por el dato.
No es necesario repetir el código, una vez teniendo el método delete queda en una línea
shift(){returnthis.delete(0);}
Hay que tener validaciones para evitar problemas, por ejemplo, si queremos usar el metodo "pop" debemos validar que el length sea mayor a 0 (que tenga al menos un elemento).
// Agregar un elemento al inicio del arrayunshift(item){for(let i =this.length; i >0; i--){this.data[i]=this.data[i -1];}this.data[0]= item;this.length++;returnthis.data;}// Eliminando el primer indice del arregloshift(){this.shiftIndex(0);}
Tomando el código que escribiste, le hice un análisis para entender que pasaba respecto a la logica y este fue el resultado:
unshift(item){for(let i =this.length; i >0; i--){this.data[i]=this.data[i -1];}this.data[0]= item;this.length++;returnthis.data;}
El ciclo inicia en this.length porque tiene que tomar la cantidad de elementos para trabajar como base,
luego ya recorrido el array, sabiendo cuantos elementos hay se asigna la ubicacion hacia atras,
es decir antes que el que estaba. Por eso el uso de this.data[i - 1]
Luego se asgina el index 0 al item a agregar, se agrega un elemento al array y se regresa el elemento agregado.
Empecé haciendo los ejercicios de esta clase, y de repente todo se salió de control y voy por 400 lineas de código :smile:
Hasta ahora he implementado los siguientes métodos: forEach, at, concat, copyWithin, filter, find, findIndex, flat, includes, every, join, toString, indexOf, keys, values, entries, get, push, pop, shift, unshift, delete, splice, reduce.
Aquí dejo el enlace al repositorio:
Impresionante :o
Creo haber encontrado un error, en la funcion shiftIndex deberia ser ‘delelte this.data[index +1]’ ya que como está en el video solo sirve si eliminamos el penúltimo elemento… lo descubrí al intentar delete(2) un array de length 7 y me tiraba una excepción asi que lo deje así y me resulto
shiftIndex(index){for(let i = index; i <this.length-1; i++){this.data[i]=this.data[i+1]}deletethis.data[index +1]this.length--;}
si estoy equivocado me avisan pero me aprece que esta es la forma correcta
No, de hecho el código que hizo el profesor está en lo correcto. Lo que hace el profesor es básicamente un shift hacia la izquierda de todos los elementos, es decir retrocede todos los elementos una casilla(Así sobreescribe el elemento que quiere eliminar). Por lo que al final es necesario eliminar el último elemento ya que ese elemento estaría repetido.
Esta bien el código de shiftIndex() de la clase, al re-ubicar todos los elementos a una posición anterior, siempre la posición del último elemento es la que sobrará y es por eso es eliminada usando this.length - 1. Espero que les sirva y me corrijan si es diferente. Muchas gracias.
Siguiendo la lógica, agregar o eliminar el primer elemento serian así las siguientes funciones en la clase:
unshift(index){for(let i =this.length; i >0; i--){this.data[i]=this.data[i -1];}this.data[0]= index;this.length++;return index;}shift(){const first =this.data[0];for(let i =0; i <this.length-1; i++){this.data[i]=this.data[i +1];}deletethis.data[this.length-1];this.length--;return first;}
Así me quedaron los métodos, se aceptan sugerencias para mejorar, gracias :D
Se puede hacer más simple con:
deleite this.data[this.length--];
.
De esta manera ya actualizamos el valor del length y obtenemos el último iten dek array al mismo tiempo
Disculpen los errores de tipeo es que estoy con problemas en el teclado jajaj
Esta muy bien la solucion pero es confuso para la legibilidad :D
si se llama pop cuando el objeto esta vacio this.length seguira disminuyendo, como se evita eso?
// Agregar un elemento al iniciounshift(item){this.unshiftIndex();this.data[0]= item;returnthis.data;}// Eliminar un elemento al inicioshift(){const item =this.data[0];this.shiftIndex(0);return item;}unshiftIndex(){for(let i =this.length; i >0; i--){this.data[i]=this.data[i -1];}this.length++;}
Modifique un poco el método Delete, ya que creo que se puede hacer uso dentro del ya establecido método pop.
_shiftIndex(index){for(let i = index; i <this.length; i++){this.data[i]=this.data[i +1]}this.pop()}delete(index){if(index >this.length){return"Out of bonds index"}elseif(index ===this.length-1){returnthis.pop()}else{const deletedItem =this.data[index]deletethis.data[this.index]this._shiftIndex(index)return deletedItem
}
Purde haber un error al usar. pop() sobre un array vacío.
Por que si this.data es un objeto, en el resto del ejercicio es tratado como un array?
Hola, lo que pasa es que las llaves del objeto son 0, 1, 2, 3, etc, por eso se acceden a los valores igual que en un array.
Recuerda que el objetivo es precisamente construir un array.
¿Esto siempre es asi? me refiero a que siempre las keys por default de un objeto son 0,1,2,3... ?
No hubiera sido mejor crear los nodos??? para hacer un stack??
En este caso solo son arrays, stack lo veras mas adelante, saludos :)
El array es una estructura de datos. El stack con sus particularidades es otro tipo de estructura de datos. Por ahora nos concentramos solo en los arrays
No le entendi el funcionamiento del ciclo for en ShiftIndex (T_T),
Alguien me puede explicar?
Hola! Lo que está haciendo el for en shiftIndex es cambiar los índices desde el index hasta el último elemento, eso hace que los elementos recorran un espacio hacia arriba del objeto, por lo que al borrar un elemento se cambian sus respectivos índices.
Espero haberte ayudado :DD
Hola, te paso un resumen:
TODO ESTO SUCEDE DENTRO DE UN OBJETO,COMO S EVE ARRIBA...
Acordate que la idea de este ejercicio se basa en
en la primer parte, el usuario nos dara un numero = (index), y lo unico que nos importa de este metodo es la parte de this.shiftIndex(index), lo que esta parte es como el this.etc llama al metodo de la 2da parte:
shiftIndex(index){for(let i = index; i <this.length-1; i++){this.data[i]=this.data[i +1];}deletethis.data[this.length-1]this.length--;}
Lo primero es pensar supongamos en un array:
[’ariel’,’ellie’,’nina’,’celular’]
Y si el usuario quiere borra ellie nos dara el index 1.Entonces volvemos al codigo:
ACLARACION: Cuando hablo de array, hablo de el objeto {
1:ariel
2:ellie
etc
} Pero al yo estra creando el array, le digo asi mas facil.pero todo el codigo, esta basado en el objeto, por eso el delete y todo eso.
Estamos en el loop: for(let i = index; i < this.length -1; i++) este empieza con el i = index, es decir, el bucle empieza con “ellie”, y terminara cuando nos quedemos sin array.
this.data[i] = this.data[i + 1]; Aca empieza el show, entonces la idea es eliminar a ellie, entonces ahora, ellie = this.data[i] pero yo la quiero eliminar, entonces la sobreescribiremos con this.data[i + 1] = (’nina’) ahora el array es [ariel,nina,nina,celular],
ahora nina = this.data[2] ⇒ se sobreescriibira con celular, y entonces quedara ⇒ [’ariel’,’’nina’,’celular’,’celular’]
Ahora ya no seguimos porque no hay mas array, entonces que sucede?
delete this.data[this.length -1] borramos la ultima posicion del array, es decir celular, ahora el array queda asi:[’ariel’,’’nina’,’celular’,undefined]
queda eliminar la longitud del array para que no sea vea el undefined ⇒ this.length--;
LISTOOOO
¿Cuál es la utilidad práctica de saber esto? Francamente no la imagino
De entrada entender como funcionan las estructuras de datos que vas a estar usando a lo largo de toda tu carrera además desarrollar tu pensamiento lógico y resolver los code challenges que te ponen en varias empresas en el proceso de selección.
la idea es entender como fumciona tu lenguaje por dentro , el por qué hace lo que hace.
puede sonar pesado pero no estamos obligados a tomar ningún curso