Conhecendo o JavaScript: Métodos Push, Pop, Join, Shift, Unshift, Slice, Reverse, Splice

São muitas funções (métodos) que temos a nossa disposição para trabalhar com arrays. Este artigo vai explicar cada um deles com exemplos que vão deixar claro como manipular melhor um array tanto de string como de números e objetos. Bora aprender! 🚀

Push()

Um método que é muito usado e facilita quando precisamos adicionar um elemento ou objeto em nosso array. Mas em qual posição do nosso array ele vai adicionar a nossa informação nova que estamos passando para ele? O push() sempre vai adicionar na ultima posição do nosso array os novos elementos. Vamos ver dois exemplos:

const devs = ['Filipe Deschamps', 'Diego Fernandes', 'Mayk Brito'];

devs.push('Rafael');

Veja que eu passei dentro do método push() a informação que eu quero adicionar no meu array, o resultado se realizar um console.log(devs) será exatamente esse da imagem abaixo:

Note que ele adicionou meu novo elemento, que está em formato de string dentro do array mas na ultima posição dele. Bom mas e se eu quiser passar mais de um elemento, posso fazer isso? Sim com certeza, veja na imagem abaixo que iremos passar um number em vez de uma string e ele vai adicionar na ultima posição do array:

E se eu precisar trabalhar com array de objetos? Do mesmo que funcionou acima irá funcionar com um array de objetos, sempre vai adicionar na ultima posição, vamos fazer agora um exemplo com objetos:

const devs = [
  { Dev: 'Diego Fernandes', site: 'Rocketseat' },
  { Dev: 'Eduardo Pires', site: 'Desenvolvedor.io' },
  { Dev: 'Leonardo Leitão', site: 'COD3R' },
  { Dev: 'André Baltieri', site: 'Balta.io' },
  { Dev: 'Mayk Brito', site: 'Rocketseat' },
]

const resultado = devs.push({ Dev: 'Todd Motto', site: 'Ultimate Courses' })
console.log(devs);

Agora se você rodar o código acima em seu browser ou no console do VSCode utilizando a Code Runner, o resultado será esse:

Note que meu array agora está com o objeto que foi passado dentro do método push() que foi responsável por adicionar na ultima posição do array o novo elemento! Ficou claro como utilizar, agora vamos para o próximo método.

Pop()

Diferente do push() que sempre adiciona um elemento na ultima posição do array, o pop() remove um elemento da ultima posição do array. Veja agora um exemplo:

const devs = [
    { Dev: 'Diego Fernandes', site: 'Rocketseat' },
    { Dev: 'Leonardo Leitão', site: 'COD3R' },
    { Dev: 'Mayk Brito', site: 'Rocketseat' },
    { Dev: 'André Baltieri', site: 'Balta.io' },
    { Dev: 'Miguel', site: 'Não tem' },
  ]

  const resultado = devs.pop()
  console.log(devs);

Se você rodar o código acima terá esse resultado que é mostrado na imagem:

Bom mas e se eu quiser remover um elemento da primeira posição do meu array? É possível fazer isso? Sim e para isso vamos agora para o próximo método.

Shift()

O objetivo do shift é remover o primeiro elemento de um array! Isso mesmo. Vamos utilizar os mesmo exemplos e você pode testar:

const devs = ['Filipe Deschamps', 'Diego Fernandes', 'Mayk Brito'];

devs.shift();

console.log(' Array normal ' + devs)

// Exemplo com array de objetos
const deve = [
    { Dev: 'Diego Fernandes', site: 'Rocketseat' },
    { Dev: 'Leonardo Leitão', site: 'COD3R' },
    { Dev: 'Mayk Brito', site: 'Rocketseat' },
    { Dev: 'André Baltieri', site: 'Balta.io' },
    { Dev: 'Miguel', site: 'Não tem' },
  ]

  const resultado = deve.shift()
  console.log(deve);

Vai ver que o resultado desses dois códigos será que no primeiro caso do array de strings, Filipe Deschamps será removido, pois é a primeira posição do nosso array. No segundo caso a mesma coisa irá acontecer, o objeto { Dev: 'Diego Fernandes', site: 'Rocketseat' } que será removido da primeira posição do array. Veja o resultado então:

Vimos até agora como podemos manipular uma array, mas não para por aí, vamos agora entender o método unshift().

Unshift()

Vimos que o método push() ele adiciona um elemento no nosso array na ultima posição, mas o unshift() adiciona um elemento na primeira posição do nosso array, segue um exemplo:

const devs = ['Filipe Deschamps', 'Diego Fernandes', 'Mayk Brito'];

devs.unshift('Loiane Groner');

console.log(' Array normal ' + devs)

// Exemplo com array de objetos
const developers = [
    { Dev: 'Diego Fernandes', site: 'Rocketseat' },
    { Dev: 'Leonardo Leitão', site: 'COD3R' },
    { Dev: 'Mayk Brito', site: 'Rocketseat' },
    { Dev: 'André Baltieri', site: 'Balta.io' },
    { Dev: 'Miguel', site: 'Não tem' },
  ]

  const resultado = developers.unshift({ Dev: 'Loiane Groner', site:'loiane.training' })
  console.log(developers);

O resultado do código acima é esse:

Bom ficou bem claro o objetivo do unshift(). Vamos para o próximo método.

Reverse()

Esse tem um objetivo bem claro e simples, ele vai inverter a ordem dos elementos do nosso array, ou seja o ultimo elemento vai ser o primeiro, o penúltimo será o segundo elemento e assim por diante. Veja na prática como ficaria:

Vou deixar o código caso queira testar:

const devs = ['Filipe Deschamps', 'Diego Fernandes', 'Mayk Brito'];

devs.reverse();
console.log(devs);

Splice()

Recomendo ler com calma sobre esse método para não se confundir.

Ele pode tanto adicionar elementos em um array em determinado índice(posição), como também pode remover um elemento, ou adicionar e remover ao mesmo tempo elementos. Para que isso fique mais claro, imagine que você queira adicionar um nome no nosso array entre as strings Filipe Deschamps e Diego Fernandes, o primeiro argumento que você vai passar dentro de splice será 1 que é o índice que está a string Diego, lembre-se que o array começa no índice zero. O segundo argumento que irá passar dentro do splice será quantos elementos você quer excluir do array, então se eu passar 0 ele não vai excluir nenhum elemento do nosso array, para que tudo fique claro veja o exemplo:

const devs = ['Filipe Deschamps', 'Diego Fernandes', 'Mayk Brito', 'Todd Motto'];

devs.splice(1,0, 'Loiane Groner');
console.log(devs);

O resultado será que Loaine será adicionada no índice 1, e ninguém será excluído do array pois o segundo argumento passado foi 0:

Então se eu passar dentro do splice que desejo adicionar um elemento no índice 1 e quero remover 1 elemento depois do novo elemento que foi adicionado, apenas a string Diego Fernandes será excluída, conforme a imagem abaixo prova isso:

Se você passar o mouse em cima da função splice, vai ver os argumentos (params) que pode passar dentro dele:

Então seu eu passar o número 2 como segundo parâmetro dentro do splice ele irá remover de dentro do array também Mayk Brito:

Espero que tenha ficado claro como utilizar o splice(). O objetivo dele é dar liberdade para adicionar elementos em qualquer índice do array que você queira, além de poder remover um, dois ou três elementos conforme o numero que você determinar. Se tiver dúvidas sugiro praticar, vou deixar um exercício. Neste caso com base no que aprendeu, qual seria o resultado do código abaixo?

const devs = ['Filipe Deschamps', 'Diego Fernandes', 'Mayk Brito', 'Todd Motto'];

devs.splice(0,0, 'Loiane Groner');
console.log(devs);

Slice()

O slice() gera um novo array a partir do índice que você passou dentro dele. Então se você passar dentro dele índice 1, ele vai gerar um novo array sem o índice 0. É como se ele fatiasse nosso array. Veja mais um exemplo:

const devs = ['Filipe Deschamps', 'Diego Fernandes', 'Mayk Brito', 'Todd Motto', 'Rafael'];

const result = devs.slice(1)
console.log(result);

O resultado será que a string Filipe Deschamps que corresponde ao índice 0 não fará parte do novo array:

Podemos também gerar um novo array pegando os elementos da posição 1 até a posição 4, mas note que a string Rafael não será inclusa, pois ele vai apenas contar até a quarta posição do nosso array. Resumindo, estamos determinando até que ponto estamos fatiando o array:

Se você passar o cursor do mouse sobre slice, vai ver como ele trabalha e mais informações dos parâmetros que ele recebe:

Além disso é possível passar números negativos para ele. Veja o exemplo:

const devs = ['Filipe Deschamps', 'Diego Fernandes', 'Mayk Brito', 'Todd Motto', 'Rafael'];

const result = devs.slice(0, -2)
console.log(result);

O resultado será que ele irá excluir as duas ultimas posições do array:

Join()

Esse método vai pegar os elementos de dentro do array e transforma-los como uma lista de strings, fora de um array:

const devs = ['Filipe Deschamps', 'Diego Fernandes', 'Mayk Brito', 'Todd Motto', 'Rafael'];

const result = devs.join()
console.log(result);

O resultado será a lista de string:

Mas além disso você pode determinar um separador dentro do método join entre as strings, como por exemplo:

const result = devs.join('|')

// ou um simples traço -

const result = devs.join('-')

O resultado é esse na imagem que segue abaixo:

Conclusão

Vimos muitos métodos e cada um tem sua importância! Usamos todos os métodos em nossos códigos? Não, as vezes usamos um ou dois, mas tudo depende da sua aplicação e do que precisa extrair ou inserir no array. Para que tudo que foi abordado neste artigo fique mais claro ainda, minha sugestão é você mesmo praticar! Isso é essencial para seu crescimento profissional e para entender o que está estudando. Pode ser que utilize poucas vezes alguns métodos, mas é importante conhecer, saber trabalhar com eles e saber o momento para utilizar cada um.

Agradeço por ler até o final, caso tenha alguma dúvida ou sugestão entre em contato comigo pelo LinkedIn ou deixe um comentário. Muito obrigado e até o próximo post! 😉🚀