Cómo reemplazar un elemento de un array con JavaScript

En este tutorial vamos a ver cómo puedes reemplazar un elemento de un array usando JavaScript. Se dan dos posibles escenarios, ya que podrías conocer previamente el índice del elemento que quieres reemplazar o podrías no conocerlo.

Si conoces el índice del elemento que quieres reemplazar, bastará con realizar una simple asignación. En el siguiente ejemplo, reemplazamos el elemento 'manzana' del array 'frutas' por el elemento 'limon', sabiendo previamente que el elemento 'manzana' está en la posición con índice 2 del array:

const frutas = ['naranja', 'pera', 'manzana', 'platano', 'fresa', 'granada'];
const indice = 3;

frutas[indice] = 'limon';

console.log(frutas); // ['naranja', 'pera', 'limon', 'platano', 'fresa', 'granada']

Si no conoces el índice del elemento, tendrás que buscar su índice partiendo de su valor. Para ello puedes usar el método indexOf. Por ejemplo, pongamos que queremos reemplazar el elemento 'manzana' del array frutas por el elemento 'limon':

const frutas = ['naranja', 'pera', 'manzana', 'platano', 'fresa', 'granada'];
const indice = frutas.indexOf('manzana');

frutas[indice] = 'limon';

console.log(frutas); // ['naranja', 'pera', 'limon', 'platano', 'fresa', 'granada']

En caso de que no conozcas el índice y el elemento sea un objeto, tendrás que usar el método findIndex:,

const frutas = [
  { nombre: 'naranja', color: 'naranja' },
  { nombre: 'limon', color: 'amarillo' },
  { nombre: 'fresa', color: 'rojo' },
];

const indice = frutas.findIndex((elemento, indice) => {
  if (elemento.nombre === 'fresa') {
    return true;
  }
});

console.log(indice); // 2

Para ver en detalle cómo usar los métodos indexOf y findIndex, consulta el siguiente tutorial, en donde explico cómo obtener el índice de un elemento con JavaScript.

Y esto ha sido todo.

---