Blog

To replace an element in an array in JavaScript, you can use any of the following methods –

1. Using index of the element
2. Using indexOf() method
3. Using map() method
4. Using splice() method
5. Using findIndex() method

Let’s see each of these methods in detail.

How To Replace An Element In An Array In JavaScript

Replacing An Element In An Array Using Index Of The Element

We can replace an element at a given index by directly setting the value at that position –

var fruits = [‘apple’, ‘banana’, ‘cherry’];

fruits[‘1’] = ‘kiwi’;

console.log(fruits); //["apple", "kiwi", "cherry"]

In the above code, we have an array of fruits. We replace the second element in the array with kiwi by using the index directly. Of course, this method can be used when we know the index of the element to be replaced.

Replacing An Element In An Array Using indexOf() Method

We can replace an element by finding its position using the indexOf() method –

var fruits = [‘apple’, ‘banana’, ‘cherry’];

var index = fruits.indexOf(‘banana’);

if(index!=-1)

fruits[index] = ‘kiwi’;

console.log(fruits); //["apple", "kiwi", "cherry"]

In the above code, we have an array of fruits. We find the index of banana using the indexOf() method. If it is found, we replace it with kiwi.

Replacing An Element In An Array Using map() Method

We can replace each element of the array by mapping it to a new value –

var fruits = [‘apple’, ‘banana’, ‘cherry’];

var newFruits = fruits.map(function(fruit){

if(fruit==’banana’)

  return ‘kiwi’;

else

  return fruit;});

console.log(newFruits); //["apple", "kiwi", "cherry"]

In the above code, we have an array of fruits. We use the map() method to create a new array with the same length as the original one. Each element of the new array is set to kiwi if it was banana in the original array, else it is set to the corresponding element from the original array.

Replacing An Element In An Array Using splice() Method

We can replace an element by using the splice() method –

var fruits = [‘apple’, ‘banana’, ‘cherry’];

fruits.splice(1, 1, ‘kiwi’);

console.log(fruits); //["apple", "kiwi", "cherry"]

In the above code, we have an array of fruits. We replace the element at index 1 with kiwi using the splice() method. The first parameter is the index of the element to be replaced, and the second parameter is the number of elements to be replaced. The third parameter is the element to be inserted in place of the replaced element.

Replacing An Element In An Array Using findIndex() Method

We can replace an element by finding its position using the findIndex() method –

var fruits = [‘apple’, ‘banana’, ‘cherry’];

var index = fruits.findIndex((fruit)=>{return fruit==’banana’;});

if(index!=-1) fruits[index] = "kiwi";

console.log(fruits); //["apple", "kiwi", "cherry"]

In the above code, we have an array of fruits. We find the index of banana using the findIndex() method. If it is found, we replace it with kiwi.

Note that the findIndex() method was introduced in ES6, so you might need to use a polyfill for older browsers.

Conclusion

In this article, we saw how to replace an element in an array in JavaScript. There are various methods that can be used depending on the requirement. Choose the method that is most appropriate for your use case.

I hope you found this article helpful. Thanks for reading!