Como Encontrar e Atualizar Valor em Array de Objetos com JavaScript

Neste artigo você vai aprender a como encontrar e atualizar valor em Array de Objetos, utilizando a linguagem JavaScript!

Fala programador(a), beleza? Bora aprender mais sobre array de objetos!

Introdução

Trabalhar com arrays de objetos é uma tarefa comum no desenvolvimento de aplicações JavaScript. Muitas vezes, é necessário encontrar e atualizar valores específicos dentro desses arrays.

Neste artigo, exploraremos diferentes abordagens para encontrar e atualizar valor em array de objetos com JavaScript, ajudando você a selecionar a técnica mais adequada para suas necessidades.

Encontrar e atualizar valor em array de objetos usando o método forEach

O método forEach é uma maneira simples e direta de iterar sobre um array e realizar ações em cada elemento.

Ele percorre todos os objetos no array e, quando o objeto desejado é encontrado, atualiza o valor correspondente.

Exemplo:

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

const idParaAtualizar = 2;
const novoNome = "Mariana";

pessoas.forEach((pessoa) => {
  if (pessoa.id === idParaAtualizar) {
    pessoa.nome = novoNome;
  }
});

console.log(pessoas);

Neste exemplo, usamos o método forEach para encontrar e atualizar o nome da pessoa com o id especificado.

Encontrar e atualizar valor em array de objetos usando o método find

O método find é outra abordagem para encontrar um objeto específico em um array.

Ele retorna o primeiro objeto que satisfaz a condição especificada, ou undefined se nenhum objeto for encontrado.

Exemplo:

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

const idParaAtualizar = 2;
const novoNome = "Mariana";

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

if (pessoaEncontrada) {
  pessoaEncontrada.nome = novoNome;
}

console.log(pessoas);

Neste exemplo, usamos o método find para encontrar a pessoa com o id especificado e, em seguida, atualizar seu nome.

Buscar e atualizar valor em array de objetos usando o método map

O método map cria um novo array com os resultados da chamada de uma função para cada elemento do array original.

É uma opção interessante quando você deseja criar uma nova cópia do array original com as atualizações aplicadas, preservando a imutabilidade.

Exemplo:

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

const idParaAtualizar = 2;
const novoNome = "Mariana";

const pessoasAtualizadas = pessoas.map((pessoa) =>
  pessoa.id === idParaAtualizar ? { ...pessoa, nome: novoNome } : pessoa
);

console.log(pessoasAtualizadas);

Neste exemplo, usamos o método map para criar um novo array de pessoas com o nome atualizado para a pessoa com o id especificado.

Quer aprender mais sobre React? Confira o vídeo abaixo:

Conclusão

Buscar e atualizar valor em array de objetos é uma tarefa comum ao trabalhar com JavaScript. Neste artigo, apresentamos três abordagens diferentes para realizar essa tarefa: usando os métodos forEach, find e map.

Cada um desses métodos tem suas vantagens e desvantagens, e a escolha do método mais adequado depende das necessidades específicas de seu projeto e das práticas de programação que você deseja seguir.

Ao entender as diferentes abordagens para encontrar e atualizar valor em array de objetos com JavaScript, você poderá escrever um código mais eficiente e adaptável às mudanças e necessidades do seu projeto.

A prática contínua e a familiaridade com a linguagem e suas funcionalidades permitirão que você domine essas técnicas e aplique-as efetivamente em seu trabalho diário.

Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.

Nosso principal objetivo é tornar você um dev no menor tempo possível, através de uma metodologia planejada nos mínimos detalhes, após formar muitos outros desenvolvedores.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!