Cómo insertar un elemento en un índice específico de un array en Javascript

Cuando empezamos a trabajar con las estructuras de datos en JavaScript por lo general la primera con la que nos debemos familiarizar es con los arreglos.

Así que es muy probables que ya sepas las operaciones básicas y métodos que podemos utilizar para modificar el contenido de dicho arreglo, por ejemplo sabemos:

¿Cómo insertar un elemento al final de un arreglo?

Con el método .push() agregamos un elemento en el último indíce de un arreglo como en el siguiente código:

Copiarjs
const arreglo = [1, 2, 3, 4];
arreglo.push(5);
console.log(arreglo); // [1,2,3,4,5]

¿Cómo insertar un elemento al principio de un arreglo?

Gracias al método .unshift() podemos insertar un valor en el índice 0 de un arreglo, como puedes apreciar en el siguiente código:

Copiarjs
const arreglo = [1, 2, 3, 4];
arreglo.unshift(0);
console.log(arreglo); // [10,,2,3,4]

Hasta aquí todo bien pero sabes Cómo poner un elemento en un indíce concreto de un arreglo usando javascript, pues es por eso que seguramente hayas entrado a este artículo, aśi que vamos al grano de una buena vez. 😀 😀

Insertando elementos dentro de un arreglo con el método .splice()

Para empezar que es lo que hace el método .splice() pues según la documentación de mozilla hace esto:

Y eso es precisamente lo que necesitamos.

Argumentos del método .splice()

• El primer argumento es el índice a partir de donde comenzará a cambiar el array
• El segundo es opcional e indica la cantidad de valores que se deben quitar de la matriz, para no eliminar ningún elemento establecemos su valor en 0
• Po último los valores que desees agregar.

Pongamos el ejemplo de una matriz de números [1,2,5,6] y necesitamos agregar el 3 y el 4 de forma que la matriz este ordenada.

Debemos agregar el 3 y el 4 desde el índice 2 de la siguiente forma:

Copiarjs
const nums = [1, 2, 5, 6];

nums.splice(2, 0, 3, 4);

console.log(nums);
// [1, 2, 3, 4, 5, 6]

Con eso ya hemos insertado un elemento en un índice específico de un array pero aún pódemos pulir un poco este código y hacerlo reutilizable en una función:

Copiarjs
function insertElemInArr(array, index, ...elementsArray) {
  array.splice(index, 0, ...elementsArray);
  return array;
}

const nums = [1, 2, 5, 6];

console.log(insertElemInArr(nums, 2, 3, 4));
// [1, 2, 3, 4, 5, 6]