Artigo original: https://www.freecodecamp.org/news/javascript-array-insert-how-to-add-to-an-array-with-the-push-unshift-and-concat-functions/
Os arrays em JavaScript são, certamente, um dos meus tipos de dados favoritos. Eles são dinâmicos, fáceis de usar e oferecem muitos métodos integrados dos quais podemos tirar proveito.
Porém, quanto mais opções nós temos, mais confuso pode ser decidir qual delas utilizar.
Neste artigo, eu gostaria de discutir algumas formas comuns de adicionar um elemento a um array em JavaScript.
O método push
O primeiro e, provavelmente, o mais comum entre os métodos para arrays em JavaScript que você encontrará é o push(). O método push() é usado para adicionar um elemento ao final do array.
Digamos que você tem um array de elementos, cada um deles sendo uma string que representa uma tarefa que você precisa realizar. Faria sentido adicionar os itens mais novos ao final do array para que pudéssemos encerrar as tarefas anteriores primeiro.
Vejamos um exemplo em formato de código:
const arr = ['Primeiro item', 'Segundo item', 'Terceiro item'];
arr.push('Quarto item');
console.log(arr); // ['Primeiro item', 'Segundo item', 'Terceiro item', 'Quarto item']Certo, push nos deu uma sintaxe simples e interessante de adicionar um item ao final de nosso array.
Digamos que nossa intenção é adicionar dois ou três itens ao mesmo tempo à lista. O que faríamos? Ocorre que push() pode aceitar vários elementos ao mesmo tempo.
const arr = ['Primeiro item', 'Segundo item', 'Terceiro item'];
arr.push('Quarto item', 'Quinto item');
console.log(arr); // ['Primeiro item', 'Segundo item', 'Terceiro item', 'Quarto item', 'Quinto item']Agora que adicionamos mais tarefas ao nosso array, posso ser que queiramos saber quantos itens temos em nosso array no momento para determinar o quanto precisamos fazer.
Por sorte, push() tem um valor de retorno com o tamanho do array após a adição de elementos.
const arr = ['Primeiro item', 'Segundo item', 'Terceiro item'];
const arrLength = arr.push('Quarto item', 'Quinto item');
console.log(arrLength); // 5
console.log(arr); // [''Primeiro item', 'Segundo item', 'Terceiro item', 'Quarto item', 'Quinto item']O método unshift
Nem todas as tarefas são criadas da mesma forma. Você pode encontrar um cenário no qual você quer adicionar tarefas ao array e, de repente, encontrar uma mais urgente que as outras.
Essa é a hora de apresentarmos nosso amigo unshift(), que nos permite adicionar itens ao começo do array.
const arr = ['Primeiro item', 'Segundo item', 'Terceiro item'];
const arrLength = arr.unshift('Item urgente 1', 'Item urgente 2');
console.log(arrLength); // 5
console.log(arr); // ['Item urgente 1', 'Item urgente 2', 'Primeiro item', 'Segundo item', 'Terceiro item']Você perceberá no exemplo acima que, assim como o método push(), unshift() retorna o novo tamanho do array para que o utilizemos. Ele também nos dá a capacidade de adicionar mais de um elemento por vez.
O método concat
A abreviação de concatenação (união), o método concat() é usado para unir dois (ou mais) arrays.
Conforme vimos nos métodos acima, os métodos unshift() e push() retornam o tamanho do novo array. concat(), por outro lado, retornará um array totalmente novo.
Essa é uma distinção muito importante e torna concat() extremamente útil ao lidarmos com arrays os quais não queremos modificar (como os arrays armazenados no state em React).
Aqui temos um caso bastante básico e direto ao ponto:
const arr1 = ['?', '?'];
const arr2 = ['?', '?'];
const arr3 = arr1.concat(arr2);
console.log(arr3); // ["?", "?", "?", "?"]
Digamos que você tenha diversos arrays que desejaria unir (concatenar). Sem problemas! concat() está aqui para resolver o assunto!
const arr1 = ['?', '?'];
const arr2 = ['?', '?'];
const arr3 = ['?', '?'];
const arr4 = arr1.concat(arr2,arr3);
console.log(arr4); // ["?", "?", "?", "?", "?", "?"]
Clonagem com concat
Você se lembra de quando eu disse que concat() pode ser útil se você não quer alterar um array existente? Vamos ver como podemos aproveitar esse conceito para copiar o conteúdo de um array para um novo array.
const arr1 = ["a", "b", "c", "d", "e", "f"];
const arr2 = [].concat(arr1);
arr2.push("g");
console.log(arr1) //["a", "b", "c", "d", "e", "f"]
console.log(arr2) //["a", "b", "c", "d", "e", "f", "g"]Ótimo! Essencialmente, podemos "clonar" um array usando concat().
Há, no entanto, um pequeno "porém" nesse processo de clonagem. O novo array é uma "cópia rasa" do array clonado. Isso quer dizer que qualquer objeto clonado é copiado por referência, não sendo o objeto original.
Vamos dar uma olhada no exemplo para explicar essa ideia com mais clareza.
const arr1 = [{fruta:"abacaxi"}, {fruta:"banana"}, {fruta:"cereja"}]
const arr2 = [].concat(arr1);
//altera somente arr2
arr2[1].fruta = "damasco";
arr2.push({fruta:"goiaba"})
console.log(arr1) //[ {fruta:"abacaxi"}, {fruta:"damasco"}, {fruta:"cereja"} ]
console.log(arr2) //[ {fruta:"abacaxi"}, {fruta:"damasco"}, {fruta:"cereja"}, { fruta: "goiaba" } ]Mesmo que não façamos alterações diretas ao nosso array original, ele será afetado diretamente pelas alterações que fizermos ao nosso array clonado!
Há diversas maneiras de se fazer adequadamente uma "clonagem profunda" de um array, mas deixarei isso para você como tema de casa.
Versão resumida
Quando quiser adicionar um elemento ao final de seu array, use push(). Quando quiser adicionar um elemento ao início de seu array, experimente unshift(). Se quiser unir arrays, use concat().
Certamente, existem muitas outras opções para se adicionar elementos a um array. Convido você a investigar outros métodos sensacionais dos arrays!
Fique à vontade de entrar em contato com o autor pelo Twitter. Conte a ele qual é o seu método de array favorito para adicionar elementos a um array.