There are a few ways to replace specific values from an array. We can use the indexOf method to get the first occurrence of an array and then use the index to assign a new value to the entry in that array index. For example, we can use the indexOf method like the following code:
const arr = ['apple', 'orange', 'grape', 'banana'];
const index = arr.indexOf('orange');
arr[index] = 'chicken';
console.log(arr);
The indexOf is called on arr and takes in any object that we want to get the first index of in the array. It works best with primitive values since it doesn’t do deep checks for objects, so it only works by checking the references for objects. In the third line, we reassigned the value of the index that is assigned by the indexOf method, which should be 1. Then, we assigned it the new value 'chicken'. Then, we should get the following output from the console.log statement on the last line:
["apple", "chicken", "grape", "banana"]
Note that we can use const to declare arr since we aren’t assigning any new value to any property of arr so it will work without errors.
We can also use the splice method to replace one or more values of an array. This method lets us removing, replace an existing element or adding new elements in place. The argument of the splice method is the starting index start of which to start changing the array. It can be positive or negative. If it’s negative, then it’ll start changing the array from the end and move towards the start of the array. The end index is -1, the second is -2 and so on. The second argument of the splice method is the deleteCount, which is an optional argument that lets us specify how many items to delete starting from the start parameter in the first element. Subsequent arguments are the items that we want to insert into an array. This can go on for as long as we want. Only the first argument is required.
We can use the splice method to first remove the entry that we want to replace by getting the index of the item that we want to replace, and then we can use the splice method to insert a new entry in its place like in the following code:
const arr = ['apple', 'orange', 'grape', 'banana'];
const index = arr.indexOf('orange');
arr.splice(index, 1);
arr.splice(index, 0, 'chicken');
console.log(arr);
If we run the code above, we should get the same output as we did before:
["apple", "chicken", "grape", "banana"]
The first two lines are the same as the first example. Then, we called the splice method the first time to remove the original entry in the index. The first argument is the index of the array we want to remove, and the second specifies that we only remove one entry, which is the entry specified by the index. Then we call splice again to insert the new entry in its place. We pass in index again in the second splice call since we want to insert the new element in the same place as the original. The second argument is zero since we don’t want to remove any entry. Then, we pass in 'chicken' in the third argument so that we get 'chicken' in the same position that 'orange' was in.
