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

Actualizado : 2023-11-06

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:

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:

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:

¿Qué es splice en JavaScript?

El método splice() cambia el contenido de un array eliminando elementos existentes y/o agregando nuevos elementos.

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.

Nota importante

Disculpa tanta paja pero considero que es importante que entiendas como funcionan las cosas para que puedas resolver problemas eficientemente.

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:

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:

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]

Juneiker Castillo freelance web developer

Soy Juneiker Castillo, un desarrollador web frontend apasionado por la programación y la creación de sitios web modernos rápidos y escalables, en fin un friki 🤓 de javascript enamorado de react js ⚛️.

Sobre mi