Las bondades del método slice() en Javascript 🎂
Tags: javascript, html, webdev
Published: 2021-04-26 13:27:31

## ¿Qué es slice()? 
La [MDN](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Array/slice) 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**
```javascript
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:

```js
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: 

{% jsitor https://jsitor.com/embed/ANXElSkns %}

## **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.

```js
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.

```js
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:

```js
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](https://www.instagram.com/cris.dux/) dedicada subir contenido de JavaScript, te dejo el post correspondiente a este artículo:

{% instagram COEBFIJLCPz %}

## **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:

{% post https://dev.to/duxtech/7-repositorios-de-desarrollo-web-que-debes-conocer-4g6l %}

{% post https://dev.to/duxtech/4-podcasts-de-desarrollo-de-software-en-espanol-k74 %}

{% post https://dev.to/duxtech/10-trucos-y-optimizaciones-de-codigo-con-javascript-para-2021-3759 %}