Cómo masterizar Array.splice en 3 minutos


En esta entrada te muestro el múltiple funcionamiento de la función splice() en los arreglos JavaScript.

Esta función sirve para realizar tres operaciones:

  1. Eliminar elementos del arreglo.
  2. Añadir elementos al arreglo.
  3. Realizar las operaciones anteriores a la vez.

Sintaxis

La función necesita dos parámetros como mínimo: inicio y cantidad. El parámetro inicio significa la posición inicial de la operación que se va a realizar, mientras que cantidad especifica el número de elementos en el arreglo que se quieren eliminar.

Eliminar elementos

var frutas = ['limon', 'naranja', 'pera'];
frutas.splice(1,2); // ['limon']

El snippet anterior especifica que se eliminen dos elementos a partir de la primera posición (incluyéndola), por lo que en este caso el arreglo se queda solo con el primer elemento: frutas = ['limon'].

Añadir elementos

Como el segundo parámetro especifica la cantidad de elementos que se quieren eliminar, debemos pasar el valor 0. Acto seguido especificamos como nuevos parámetros los elementos que queremos añadir a partir de la posición brindada en el primer parámetro.

El código necesario para añadir dos frutas en la penúltima posición del arreglo es el siguiente:

var frutas = ['limon', 'naranja', 'pera'];
frutas.splice(2,0,'banana','piña');

console.log(frutas);
// ['limon', 'naranja', 'banana', 'piña', 'pera'];

Observa cómo la función acepta una cantidad indefinida de nuevos elementos y no un arreglo de elementos como un único tercer parámetro.

Ambas operaciones a la vez

Finalmente, si el segundo parámetro no es 0 y se agregan elementos al final, se realizan ambas operaciones a partir de la posición inicial dada en el primer parámetro:

var frutas = ['limon', 'naranja', 'pera'];
frutas.splice(1,2,'banana','piña');

console.log(frutas);
// ['limon', 'banana', 'piña'];

Observa que las frutas naranja y pera no se encuentran dentro del arreglo al realizar la operación, pues especificamos que “se elimine a partir de la posición 1, dos elementos, y luego se añadan en esa misma posición los valores banana y piña“.

Conclusión

Bien, he ahí Array.prototype.splice() servido en sopa. Me ha sido muy útil esta función en el trabajo con arreglos.

No se debe confundir con Array.prototype.slice(inicio , [fin]), la cual su función es solamente devolver una porción del arreglo original en un nuevo arreglo, sin modificar el original.

splice() por el contrario sí modifica el arreglo original, por lo que debes tener esto en cuenta y tomar precauciones en caso que necesites la variable original luego.