How can I find and update values in an array of objects?

The direct approach: findIndex

You can also change values directly in the original array using .findIndex():

const index = users.findIndex(user => user.name === 'Alice'); //Alice, where are you hiding?🔍
if (index !== -1) {
  users[index].name = 'Alison'; //Found you, Alice... or should I say Alison!😉
}


Note: This modifies the original users array, use it only if such mutations are acceptable.

Dealing with clones: forEach

If you suspect there might be twins in your array (duplicate names), use .forEach() to ensure all matching objects are updated:

users.forEach(user => {
  if(user.name === 'Alice') {
    user.name = 'Alison'; //There's no escaping, Alice! You're Alison now!😈
  }
});


Watch out for fake IDs

Unique identifiers are paramount for consistent results. If not unique, you risk doing a cosmetic surgery on the wrong patient!

Gentle touch with Object.assign

Use Object.assign to ensure you don't accidentally mutate original references, it merges properties of two objects:

const usersCopy = users.map(user =>
  user.name === 'Bob' ? Object.assign({}, user, { name: 'Robert' }) : user
); // Bye bye, Bob! Say hello to suave Robert😎


Don't break reactivity: Reassigning updated arrays

When working with reactive frameworks, make sure you reassign the updated array to the original variable:

this.setState({ users: updatedUsers }); // React loves new state🤗 


Going turbo: dictionaries for performance

Dictionary objects offer key-based access to items, which is faster than iteration methods for large arrays:

const userDict = { '1': { name: 'Alice' }, '2': { name: 'Bob' }};
userDict['2'].name = 'Robert'; // Dictionary making changes swift as Robert's personality switch!💨


Level up with spread syntax

In modern JavaScript, use spread syntax to make safe updates by creating new objects:

users.map(user => 
  user.id === targetId ? { ...user, ...newProps } : user //Hello newProps, goodbye oldProps👋
);


Third-party helper: lodash

When native methods aren't enough, lodash offers useful functions for complex operations:

_.set(users, '[0].name', 'Alison'); //lodash sending Alice to witness protection🕵️‍♀️


Playing nice with reactive frameworks

In reactive frameworks like Vue, Angular, or React, it's essential to handle state updates properly:

Vue example:

this.$set(this.users, index, updatedUser) // Now Vue reacts to our updates like a champ!🏆


Maintaining readability and healthy codebase

For larger projects, consider creating utility functions for object manipulation and store them in dedicated modules. It promotes readability and makes your code DRY (don't repeat yourself).

Playing nice with functional programming

Finally, if you live in the functional programming world, prefer immutable updates over direct mutations. It prevents nasty side effects and makes your code safer and more predictable.