JavaScript - Diferenças entre o Slice e o Splice

Introdução

Durante uma conversa, chegamos ao consenso de que o slice e o splice são os dois array methods que mais nos causam confusão durante o desenvolvimento.

Com isso em mente, fizemos uma rápida pesquisa e decidimos escrever um post para acabar de vez com essa dúvida, então vamos nessa!

Array.prototype.slice()

O slice é usado para dividir um array de um ponto inicial a um ponto final, excluindo o final.

Sintaxe:

arrayExemplo.slice(início, [fim])

Apesar do slice separar os elementos de uma matriz, ele nunca altera o array original.

const numbers = [1, 2, 3, 4, 5]

const numbersUpdated = numbers.slice(0, 2)

console.log(numbersUpdated) // [1, 2]
console.log(numbers) // [1, 2, 3, 4, 5]

Como você pode ver, o array original não foi modificado.

Algumas regras do slice:

• Se o ponto final não for declarado, o padrão será o último elemento do array.
• Se o valor inicial for -ve, os elementos serão contados do final.

Array.prototype.splice()

Ao contrário do slice, o splice altera o array original. Mas as diferenças não se restringem a isso, pois além de excluir um valor, é posicionar adicionar novos valores com o método.

Sintaxe:

arrayExemplo.splice(inicio, [quantosDeletar, itemPodeSerInserido, itemPodeSerInserido, ...])

Veja como o splice modifica o array original, com um exemplo tirado da sua documentação.

const months = ["Jan", "March", "April", "June"]
months.splice(1, 0, "Feb")
// inserts at index 1

console.log(months)
// expected output: Array ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, "May")
// replaces 1 element at index 4
console.log(months)
// expected output: Array ["Jan", "Feb", "March", "April", "May"]

Como você pode ver, o array original foi modificado.

Algumas regras do splice:

• Se o ponto final não for declarado, o padrão será o último elemento do array.
• Se o valor inicial for -ve, os elementos serão contados do final.
• Se o quantosDeletar for omitido, elementos até o fim do array serão removidos.
• Se nenhum itemPodeSerInserido for declarado, os elementos serão apenas removidos.

Conclusão

Esperamos ter acabado de vez com a confusão ao utilizarmos um dos métodos. Então, se desejar modificar ou adicionar elementos ao array original, vá de splice. Caso contrário, use o slice;

Além da documentação dos dois métodos, nos baseamos nesse artigo para escrever esse post. Vale a pena dar uma conferida, e se surgirem dúvidas ou sugestões, não deixem de comentar aqui.