JS: Arrays

Teoría: Rest y desestructuración

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']
Reglas del operador rest:
  • Siempre debe estar al final de la lista de variables.
  • Si no quedan más elementos al desestructurar, el array restante será vacío ([]).

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

MétodoQué haceModifica el original
...restExtrae elementos restantes al desestructurar un array❌ No
slice()Crea un nuevo array con ciertos elementos❌ No

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']
La variable resto es un array de caracteres, no una cadena de texto.

Resumen

  • El operador ...rest permite capturar el resto de los elementos de un array después de la desestructuración.
  • Siempre debe estar al final de la lista de variables.
  • Si no quedan más elementos, rest será un array vacío [].
  • Se pueden omitir elementos dejando espacios vacíos en la desestructuración [, , ...].
  • Si solo se quiere una parte del array sin desestructuración, .slice() es una buena alternativa.
  • También se puede usar con cadenas de texto, pero el resultado será un array de caracteres.

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

Siguiente→
NavegaciónTeoría

Completado

0 / 21

→