Como localizar e Atualizando Valores em um Array de Objetos usando JavaScript

Ao lidar com arrays de objetos em JavaScript, muitas vezes surge a necessidade de encontrar um valor específico dentro do array e atualizá-lo.

Isso é especialmente útil quando precisamos fazer alterações nos dados de um objeto existente sem ter que percorrer todo o array manualmente.

Neste artigo, vamos explorar diferentes abordagens para localizar e atualizar valores em um array de objetos usando JavaScript.

Usando o método find() e o método map(): 

Uma das maneiras mais comuns de localizar e atualizar valores em um array de objetos é utilizando os métodos find() e map(). Vamos ver como isso pode ser feito.

Utilizando o método find()

O método find() percorre o array e retorna o primeiro objeto que satisfaz uma determinada condição. Podemos usá-lo para localizar um objeto com base em uma propriedade específica. Veja o exemplo a seguir:

const pessoas = [
  { id: 1, nome: "João" },
  { id: 2, nome: "Maria" },
  { id: 3, nome: "Carlos" }
];

const pessoaId = 2;

const pessoaEncontrada = pessoas.find(pessoa => pessoa.id === pessoaId);

if (pessoaEncontrada) {
  pessoaEncontrada.nome = "Mariana";
}

console.log(pessoas);

Acompanhe o Blog e o meu Curso de Angular ou Curso de Javascript, Ts e Nodejs

Nesse exemplo, utilizamos o método find() para localizar o objeto com o id igual a pessoaId. Se o objeto for encontrado, atualizamos sua propriedade nome.

Utilizando o método map()

O método map() cria um novo array com os resultados de uma função aplicada a cada elemento do array original. Podemos usá-lo para percorrer o array, localizar um objeto com base em uma propriedade e atualizar seu valor. Veja o exemplo a seguir:

const pessoas = [
  { id: 1, nome: "João" },
  { id: 2, nome: "Maria" },
  { id: 3, nome: "Carlos" }
];

const pessoaId = 2;

const pessoasAtualizadas = pessoas.map(pessoa => {
  if (pessoa.id === pessoaId) {
    return { ...pessoa, nome: "Mariana" };
  }
  return pessoa;
});

console.log(pessoasAtualizadas);

Acompanhe o Blog e o meu Curso de Angular ou Curso de Javascript, Ts e Nodejs

Nesse exemplo, utilizamos o método map() para percorrer o array, localizar o objeto com o id igual a pessoaId e atualizar sua propriedade nome.

Conclusão

Localizar e atualizar valores em um array de objetos é uma tarefa comum ao trabalhar com dados em JavaScript. Neste artigo, exploramos duas abordagens populares para realizar essa tarefa: o uso dos métodos find() e map().

Cada abordagem tem suas vantagens e pode ser escolhida com base nos requisitos específicos do seu projeto.

Com essas técnicas em mãos, você pode facilmente localizar e atualizar valores em um array de objetos, tornando seu código mais eficiente e produtivo.

Lembre-se de adaptar as condições de busca de acordo com as necessidades do seu projeto e manipular os dados de forma segura para evitar erros.

Espero que este artigo tenha sido útil para você. Continue explorando as possibilidades do JavaScript e aproveite os benefícios de trabalhar com arrays de objetos de forma eficiente e elegante.