Las bondades del método slice() en Javascript 🎂

¿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:

7 repositorios de desarrollo web que debes conocer

Cristian Fernando ・ Apr 12 '21

#github #javascript #webdev #spanish

4 podcasts de desarrollo de software en Español 🎧

Cristian Fernando ・ Apr 5 '21

#podcast #spanish #software #webdev

10 trucos y optimizaciones de código con JavaScript para 2021😎

Cristian Fernando ・ Mar 29 '21

#javascript #webdev #frontend #spanish