¿Qué es slice()?
La MDN define al método slice() de la siguiente manera:
El método
slice()devuelve una copia de una parte del array dentro de un nuevo array empezando por inicio hasta fin (fin no incluido). El array original no se modificará.
En tres lÃneas esta definición nos dice bastante, pero en resumen podrÃamos rescatar 2 conceptos fundamentales:
- Arreglos:
slice()es un método que se aplica sobre arreglos, aunque también es posible usarlo con cadenas de texto. (Este post de enfocará en slice para arreglos.) -
Inmutabilidad: un concepto fundamental en programación funcional, el array sobre el cual se aplique
slice()no muta o cambia, sino que se crea una nueva copia sobre el cual podemos trabajar. - Funcionamiento básico:
slice()traducido al español literalmente significa trozo o rebanada por qué lo con este método podremos "recortar" arreglos o extraer pequeños intervalos del mismo, dicha extracción por defecto empieza desde el inicio del array.
Sintaxis
arr.slice([inicio [, fin]])
Donde:
- arr es el arreglo como tal al cual aplicaremos el método.
-
slice()es el método como tal. - inicio es un entero que hace referencia a la posición inicial (valga la redundancia) del arreglo desde donde queremos cortarlo.
- fin es otro entero que indica hasta que posición del array se desea cortar, la última posición no se observa en la salida.
Una bonita analogÃa para comprender sin tecnicismos estos conceptos es imaginar por ejemplo una torta 🎂 que representará nuestro arreglo, las tortas no se comen enteras, siempre se parten para poder repartirlas ¿no es verdad?, bueno en este escenario slice() representarÃa nuestro cuchillo el cual usaremos para rebanar en trozos la torta, debemos saber desde y hasta que parte la partiremos, esto se indica a slice() con los parámetros inicio y fin que vimos en la sección de sintaxis.
Suficiente teorÃa, vamos a picar un poco de código.
Imaginemos que tenemos un arreglo de personas, y deseamos extraer una porción de este arreglo:
const nombresPersonas = ["Carlos", "Ana", "Alejandro","Susana","Maria"];
const nombresRecortados = nombresPersonas.slice(1,3);
console.log(nombresRecortados);
//salida: ["Ana", "Alejandro"];
Quiza te parezca algo extraño, pero vamos a explicarlo paso a paso. Nuestro array nombresPersonas cuenta con 5 elementos, al indicar slice(1,3) decimos: extráeme los elementos desde la posición 1 hasta la posición 3, entonces ¿por que no vemos como salida: ["Ana", "Alejandro","Susana"]? Esto se debe al funcionamiento interno de slice() que no devuelve el elemento que se indica en el parámetro fin. Si estas familiarizado con teorÃa de conjuntos podrÃa decirse que la salida es un conjunto con final cerrado.
Puedes ejecutar el ejemplo anterior tú mismo:
Casos Especiales
slice() sin parámetros
Si ejecutamos el método sin parámetros devuelve el array original, no muestra ningún tipo de error.
const nombresPersonas = ["Carlos", "Ana", "Alejandro","Susana","Maria"];
const nombresRecortados = nombresPersonas.slice();
console.log(nombresRecortados);
//salida: ["Carlos", "Ana", "Alejandro","Susana","Maria"]
Parámetros negativos
Si pasamos inicio como entero negativo, nos desplazamos desde el final del arreglo, útil si se desea saber el último elemento de cualquier arreglo.
const nombresPersonas = ["Carlos", "Ana", "Alejandro","Susana","Maria"];
const ultimoElemento = nombresPersonas.slice(-1);
console.log(ultimoElemento);
//salida: ["Maria"]
El parámetro fin puede ser negativo también:
const nombresPersonas = ["Carlos", "Ana", "Alejandro","Susana","Maria"];
const nombresRecortados = nombresPersonas.slice(2,-1);
console.log(nombresRecortados);
//salida: ["Alejandro","Susana"]
Puedes ver mas ejemplos asi en mi cuenta de instagram dedicada subir contenido de JavaScript, te dejo el post correspondiente a este artÃculo:
Conclusiones
-
slice()puede ser usando en arreglos y strings. -
slice()extrae un fragmento del arreglo original sin mutarlo. - Recibe 2 parámetros opcionales: inicio y fin.
- Sus parámetros son números enteros (positivos o negativos)
Referencias:
- Array.prototype.slice(): https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
- Función slice en JavaScript: http://juanmirod.github.io/2017/07/23/javascript-slice.html
Te invito a leer otras entradas mÃas que pueden ser de tu interés:
Top comments (0)