Agregar y eliminar elementos de un arreglo en Javascript

En este post veremos los métodos más utilizados para agregar y eliminar elementos de un arreglo en Javascript. No hay una sola forma de hacerlo ya que depende enteramente de la situación, en cualquier caso te muestro algunos ejemplos:

Agregando elementos:

Push: Agrega un elemento al final del arreglo
Unshift: Agrega un elemento al principio del arreglo
Splice: Agrega/elimina elementos a partir de una posición especifica

Eliminando elementos:

Pop: Elimina el ultimo elemento del arreglo
Shift: Elimina el primer elemento del arreglo
Splice: Agrega/elimina elementos a partir de una posición especifica

Otros ejemplos con Splice:

Eliminando más de un elemento
Reemplazando un elemento por otro
Reemplazando varios elementos por otros

Ejemplos:

Supongamos que tenemos un arreglo de razas de la edad media:

var races = ["Orc", "Elf", "Human", "Dwarf", "Faun"];

Agregando elementos:

Push

Agregamos un elemento «Goblin» en la última posición del arreglo

races.push("Goblin");
//Original: ["Orc", "Elf", "Human", "Dwarf", "Faun"]
//Resultado: ["Orc", "Elf", "Human", "Dwarf", "Faun", "Goblin"]

Unshift

Agregamos un elemento «Goblin» en la primera posición del arreglo

races.unshift("Goblin");
//Original: ["Orc", "Elf", "Human", "Dwarf", "Faun"]
//Resultado: ["Goblin", "Orc", "Elf", "Human", "Dwarf", "Faun"]

Splice

Insertamos a Goblin en la posición 2 del arreglo (0, 1, 2…), y corremos a Human a la posición 3, etc.

races.splice(2,0,"Goblin");
//Original: ["Orc", "Elf", "Human", "Dwarf", "Faun"]
//Resultado: ["Orc", "Elf", "Goblin", "Human", "Dwarf", "Faun"]

Eliminando elementos:

Pop

Eliminemos el último elemento del arreglo (Faun)

races.pop();
//Original: ["Orc", "Elf", "Human", "Dwarf", "Faun"]
//Resultado: ["Orc", "Elf", "Human", "Dwarf"]

Shift

Eliminemos el primer elemento del arreglo (Orc)

races.shift();
//Original: ["Orc", "Elf", "Human", "Dwarf", "Faun"]
//Resultado: ["Elf", "Human", "Dwarf", "Faun"]

Splice

Eliminamos 1 elemento (Human), en la posición 2 del arreglo (0, 1, 2…)

races.splice(2,1);
//Original: ["Orc", "Elf", "Human", "Dwarf", "Faun"]
//Resultado: ["Orc", "Elf", "Dwarf", "Faun"]

Otros ejemplos con Splice:

Eliminando más de un elemento

En el ejemplo eliminamos 2 elementos (Elf y Human) a partir de la posición 1 (0, 1, 2…)

races.splice(1,2);
//Original: ["Orc", "Elf", "Human", "Dwarf", "Faun"]
//Resultado: ["Orc", "Dwarf", "Faun"]

Reemplazando un elemento por otro

En el ejemplo reemplazamos 1 elemento en la posición 3 (Dwarf) y agregamos «Gnome» a partir de esta posición (0, 1, 2…)

races.splice(3,1,"Gnome");
//Original: ["Orc", "Elf", "Human", "Dwarf", "Faun"]
//Resultado: ["Orc", "Elf", "Human", "Gnome", "Faun"]

Reemplazando varios elementos por otros

En el ejemplo eliminamos 2 elementos a partir de la posición 2 (Human, Dwarf) e insertamos otros 3 (Gnome, Goblin y Centaur) a partir de esa misma posición

races.splice(2,2,"Gnome", "Goblin", "Centaur");
//Original: ["Orc", "Elf", "Human", "Dwarf", "Faun"]
//Resultado: ["Orc", "Elf", "Gnome", "Goblin", "Centaur", "Faun"]

Espero que este post sobre «agregar y eliminar elementos de un arreglo en javascript» haya sido de tu utilidad, te invito a compartirlo si sabés de alguien que lo necesite. También puedes encontrar mas publicaciones como esta en: