Rest y desestructuración — JS: Arrays

• ¿Qué es el operador rest (...)?
• Casos de Uso
• Omitir elementos con la desestructuración
• Alternativa: slice()
• Usar rest con cadenas de texto

Cuando trabajamos con arrays en JavaScript, muchas veces queremos extraer solo algunos elementos y guardar el resto en una nueva variable. Aquí es donde entra en juego la desestructuración junto con el operador rest (...), una herramienta poderosa que hace nuestro código más limpio y fácil de leer.

¿Qué es el operador rest (...)?

🍊🍌🍍 Imagina que tienes una lista de frutas y solo quieres obtener la primera, dejando el resto en otro grupo. Con la desestructuración y el operador ...rest, esto es fácil de lograr:

const fruits = ['apple', 'orange', 'banana', 'pineapple'];

// Usamos el operador rest (...) para obtener el resto de elementos del array
const [first, ...rest] = fruits;
console.log(first); // 'apple'
console.log(rest); // ['orange', 'banana', 'pineapple']

Explicación

1. Extraemos el primer elemento del array y lo asignamos a first.
2. Usamos ...rest para capturar todos los elementos restantes y guardarlos en una nueva variable rest.
   
3. La variable rest siempre será un array con los elementos que sobran.
   

Casos de Uso

Podemos usar el operador rest para capturar diferentes cantidades de elementos fácilmente:

const fruits = ['apple', 'orange', 'banana', 'pineapple'];

const [head, ...tail] = fruits;
console.log(tail); // ['orange', 'banana', 'pineapple']

const [first, second, ...rest] = fruits;
console.log(rest); // ['banana', 'pineapple']

const [first, second, third, ...rest] = fruits;
console.log(rest); // ['pineapple']

⏬ Ejemplo:

const [first, second, third, fourth, ...rest] = fruits;
console.log(rest); // []

Omitir elementos con la desestructuración

Si queremos saltarnos algunos elementos del array sin asignarlos a variables, podemos hacerlo dejando espacios vacíos entre comas:

const [first, , third, ...rest] = fruits;
console.log(third); // 'banana'
console.log(rest);  // ['pineapple']

En este caso:

• first obtiene 'apple'.
• El segundo elemento (orange) se omite con una coma extra ,.
• third obtiene 'banana'.
• rest contiene ['pineapple'].

Alternativa: slice()

Si solo queremos obtener una parte del array sin usar desestructuración, podemos usar .slice().

const rest = fruits.slice(1); // Obtiene todos los elementos después del primero
console.log(rest); // ['orange', 'banana', 'pineapple']

Diferencias principales:

Usar rest con cadenas de texto

El operador ...rest también funciona con cadenas de texto, ya que en JavaScript las cadenas pueden tratarse como arrays de caracteres:

const [primero, segundo, ...resto] = 'ejemplo de texto';
console.log(primero); // 'e'
console.log(segundo); // 'j'
console.log(resto); // ['e', 'm', 'p', 'l', 'o', ' ', 'd', 'e', ' ', 't', 'e', 'x', 't', 'o']

Ahora que conoces el operador rest, ¡pruébalo en tu código y hazlo más limpio y legible!