How to Replace Object in an Array in JavaScript

Arrays are a fundamental data structure in JavaScript used to store collections of data. As a full-stack developer, it‘s important to know how to manipulate arrays by adding, removing or replacing elements.

Here we will explore the main methods available in JavaScript to replace an object in an array.

Using Array Index

The simplest approach is to access the array element directly via its index and assign a new value:

let colors = ["red", "blue", "green"];

colors[1] = "yellow"; 

console.log(colors); // ["red", "yellow", "green"]

This works well for small, simple arrays where you know the index of the object you want to replace.

Using Array.indexOf() and Array.splice()

For larger arrays, you may not know the index of the object to replace. Here you can use a combination of indexOf() to find the index, and splice() to replace the element:

let colors = ["red", "blue", "green", "blue"];

let index = colors.indexOf("blue"); 

colors.splice(index, 1, "purple"); 

console.log(colors); // ["red", "purple", "green", "blue"]

This approach allows you to replace the object with more flexibility.

Using Array.findIndex()

If your array contains more complex objects, you can use findIndex() to find the index of the object based on criteria:

let people = [
  {name: "John", age: 20}, 
  {name: "Jane", age: 25},
  {name: "Jim", age: 30}  
];

let findJohn = people.findIndex(person => person.name === "John");  

people[findJohn].name = "Bob";

console.log(people); 
// [{name: "Bob", age: 20}, {name: "Jane", age: 25}, {name:"Jim", age: 30}]

This allows you to precisely replace objects based on their properties.

Replacing Multiple Objects in an Array

To replace all matching objects in an array, you can combine filter() to find matching items, and map() to replace them:

let people = [
  {name: "John", age: 20}, 
  {name: "Jane", age: 25},
  {name: "John", age: 30}
];

let updatedPeople = people.map(p => {
  if(p.name === "John") {
    return {...p, name: "Bob"};  
  } else {
    return p;
  }  
});

console.log(updatedPeople);  
// [{name: "Bob", age: 20}, {name:"Jane", age: 25}, {name:"Bob", age: 30}]

This provides an easy way to replace multiple objects that match a criteria.

Conclusion

In summary, JavaScript offers simple and flexible ways to replace objects in arrays:

• Direct index access for basic arrays
• indexOf() with splice() for replacing by value search
• findIndex() for replacing by property
• filter() and map() for replacing multiple matches

As you can see, with some JavaScript array methods you can precisely locate and replace objects in arrays of any complexity.