Evite Usar Push Em Objetos No Javascript

No Javascript quando passamos um objeto/array em uma função, como parâmetro, passamos ela como referência.
Quando realizamos alguma operação que altera, como por exemplo, adicionar um elemento novo ao objeto e utilizamos push, estamos alterando diretamente aquele objeto que passamos apenas como referência!

Qual a consequência disso? Caso uma outra função esteja utilizando o mesmo objeto, será afetado pela ação de adicionar!

Então, pensando nisso, a melhor alternativa é sempre retornarmos uma cópia do objeto!
E para isso podemos utilizar o spread operator

Vamos utilizar como exemplo uma função que adicione um nome na lista:

1
2
3
4
5
6
7
8
listaNomes = ['Victor', 'Lo Ruanda', 'João']

const addName = (listaNomes, nome) => {
return [...listaNomes, nome]
};

addName(listaNomes, 'Vicenzo');
// Retorno: ['Victor', 'Lo Ruanda', 'João', 'Vicenzo']

Agora com essa função, estamos retornando um novo objeto e não mais alterando o objeto que foi nos passado!
Caso queira deixar essa função em apenas uma linha, você pode fazer a seguinte alteração:

1
2
3
4
const addName = (listaNomes, nome) => [...listaNomes, nome];

addName(listaNomes, 'Vicenzo');
// Retorno: ['Victor', 'Lo Ruanda', 'João', 'Vicenzo']