“A pior forma de desigualdade é tentar fazer duas coisas diferentes iguais”. Aristóteles

Em Javascript, confundir slice com splice, ou vice-versa, é um engano comum. Essas duas funções, apesar de possuírem nomes parecidos, realizam duas ações completamente distintas.

A primeira diferença é que o método slice não modifica o próprio array que invoca o método, splice sim. Uma maneira de memorizar isso é que splice possui a letra p, então ele modifica o próprio objeto.

var a= ["a","b","c","d","e"];  
a.slice(1,3);  
console.log(a);  //["a","b","c","d","e"]  
a.splice(2,2);  
console.log(a);  //["a","b","e"];

A segunda diferença consiste nos argumentos. Slice (verbo fatiar) possui a assinatura arr.slice([índiceInicial[,índiceFinal]]). Sendo os dois parâmetros facultativos:

var a= ["a","b","c","d","e"];  
var d = a.slice();  
console.log(d);  //["a","b","c","d","e"]  

Enquanto Splice (verbo costurar) de assinatura array.splice(índice , quantos[, elemento1[, ...[, elementoN]]]) tem como primeiro parâmetro o índice inicial do elemento; e o segundo, a quantidade de elementos que serão retirados. Os demais parâmetros são os elementos que serão "costurados" dentro do array e ocuparão o lugar daqueles que saíram.

var a= ['a','b','c','d','e'];  
var teste = a.splice(2,2,'x','y',['z','w']);  
console.log(a);  // ["a", "b", "x", "y", ["z", "w"], "e"]  
console.log(teste);  // ["c", "d"]


var a2= ['a','b','c','d','e'];  
var teste2 = a2.splice(1,0,'x2','y2',['z2','w2']);  
console.log(a2);  // ["a", "x2", "y2", ["z2", "w2"], "b", "c", "d", "e"]  
console.log(teste2);  // []

Usando Splice

É bem verdade que o exemplo abaixo poderia ter sido feito simplesmente utilizando o método de string replace. Porém, o intuito aqui é mostrar como o método indexOf pode ser especialmente útil em combinação com o método splice (e também slice).

var frase = "Eu sempre me confundo com Slice e Splice."  
var fraseArray = frase.split(" ");  
var leuPost = true;  
if(leuPost){  
    var indiceInicial = fraseArray.indexOf("sempre");
    fraseArray.splice(indiceInicial,1, "nunca mais");
    frase = fraseArray.join(" ");
    console.log(frase); // Eu nunca mais me confundo com Slice e Splice
}

Usando Slice

Uma das aplicações mais conhecidas do método slice é para converter array-like objects em arrays de verdade. Vejamos:

function converteEmArray() {  
  return Array.prototype.slice.call(arguments);
}

var lista = converteEmArray('a', 'b', 'c');  
console.log(lista);  // ['a', 'b', 'c']  

Note que arguments é o This do método call, portanto, para este caso, não fará diferença se trocarmos o call por apply.

function converteEmArray() {  
  return Array.prototype.slice.apply(arguments);
}

Ver também

Existem outras diferenças que valem a pena ser conhecidas em JavaScript:

  • Call, Apply e Bind;
  • For vs For In;
  • Break vs Continue;
  • setTimeout vs setInterval;
  • ES5 vs ES6;
  • Angular vs React vs Ember vs Jquery;
  • Namespaces vs Modules
  • == Vs ===

E essas são apenas algumas. Se você tiver alguma sugestão de um post nesse estilo, escreva nos comentários!

Sobre o Autor

Johel Carvalho

Johel Carvalho

Engenheiro Civil formado pelo Instituto Militar de Engenharia (IME-RJ) em Dezembro de 2012. Largou a profissão pelo desenvolvimento web, começando com C# e sendo atualmente aficionado por JavaScript.

comments powered by Disqus