Una introducción al operador de propagación y el parámetro de descanso en JavaScript (ES6)

Tanto el operador de propagación como el parámetro resto se escriben como tres puntos consecutivos (…). ¿Tienen algo más en común?

El operador de propagación (…)

El operador de propagaciónse introdujo en ES6. Le brinda la capacidad de expandir objetos iterables en múltiples elementos. que significa realmente? Veamos algunos ejemplos.

const movies = ["Leon", "Love Actually", "Lord of the Rings"];console.log(...movies);

Huellas dactilares:

Leon Love Actually El señor de los anillos
const numbers = new Set([1, 4, 5, 7]);console.log(...numbers);

Huellas dactilares:

1 4 5 7

Puede notar que tanto la matriz del primer ejemplo como el conjunto del segundo se han expandido en sus elementos individuales (cadenas y dígitos respectivamente). ¿Cómo puede ser de alguna utilidad esto ?, puede preguntar.

El uso más común probablemente sea combinar matrices. Si alguna vez tuvo que hacer esto antes del operador de propagación, probablemente utilizó el concat()método.

const shapes = ["triangle", "square", "circle"];const objects = ["pencil", "notebook", "eraser"];const chaos = shapes.concat(objects);console.log(chaos);

Huellas dactilares:

["Triángulo", "cuadrado", "círculo", "lápiz", "cuaderno", "borrador"]

Eso no es tan malo, pero lo que ofrece el operador de propagación es un atajo, lo que hace que su código parezca mucho más legible también:

const chaos = [...shapes, ...objects];console.log(chaos);

Huellas dactilares:

["Triángulo", "cuadrado", "círculo", "lápiz", "cuaderno", "borrador"]

Esto es lo que obtendríamos si intentáramos hacer lo mismo sin el operador de propagación:

const chaos = [shapes, objects];console.log(chaos);

Huellas dactilares:

[Matriz (3), Matriz (3)]

¿Que pasó aquí? En lugar de combinar las matrices, obtuvimos una chaosmatriz con la shapesmatriz en el índice 0 y la objectsmatriz en el índice 1.

El resto de parámetros (…)

Puede pensar en el parámetro rest como lo opuesto al operador de propagación. Así como el operador de extensión le permite expandir una matriz en sus elementos individuales, el parámetro rest le permite agrupar elementos nuevamente en una matriz.

Asignar valores de una matriz a variables

Echemos un vistazo al siguiente ejemplo:

const movie = ["Life of Brian", 8.1, 1979, "Graham Chapman", "John Cleese", "Michael Palin"];const [title, rating, year, ...actors] = movie;console.log(title, rating, year, actors);

Huellas dactilares:

"Life of Brian", 8.1, 1979, ["Graham Chapman", "John Cleese", "Michael Palin"]

El parámetro rest nos permite tomar los valores de la moviematriz y asignarlos a varias variables individuales usando la desestructuración. De esta manera title, ratingy se yearles asignan los primeros tres valores en la matriz, pero donde ocurre la verdadera magia es actors. Gracias al parámetro rest, actorsse le asignan los valores restantes de la moviematriz, en forma de matriz.

Funciones variadas

Las funciones variádicas son funciones que toman un número indefinido de argumentos. Un buen ejemplo es la sum()función: no podemos saber de antemano cuántos argumentos se le pasarán:

sum(1, 2);sum(494, 373, 29, 2, 50067);sum(-17, 8, 325900);

En versiones anteriores de JavaScript, este tipo de función se manejaba usando el objeto de argumentos, que es un objeto similar a una matriz, disponible como una variable local dentro de cada función. Contiene todos los valores de los argumentos pasados ​​a una función. Veamos cómo se sum()podría implementar la función:

function sum() { let total = 0; for(const argument of arguments) { total += argument; } return total;}

Funciona, pero está lejos de ser perfecto:

  • Si observa la definición de la sum()función, no tiene ningún parámetro. Puede resultar bastante engañoso.
  • Puede ser difícil de entender si no está familiarizado con el objeto de argumentos (como en: ¡¿de dónde diablos argumentsviene ?!)

Así es como escribiríamos la misma función con el parámetro rest:

function sum(...nums) { let total = 0; for(const num of nums) { total += num; } return total;}

Tenga en cuenta que el for...inbucle también ha sido reemplazado por el for...ofbucle. Hicimos nuestro código más legible y conciso a la vez.

¡Aleluya ES6!

¿Está comenzando su viaje con la programación? Aquí hay algunos artículos que también pueden interesarle:

  • ¿Es un bootcamp de programación algo para ti?
  • ¿Es realmente posible un cambio de carrera?
  • Por qué Ruby es un gran lenguaje para comenzar a programar