Parámetros REST y Operador de Propagación JavaScript

Los parámetros rest son una forma de utilizar parámetros virtualmente infinitos, se definen agregando ... adelante del nombre del parámetro rest, éste tiene que ser siempre el último parámetro de la función.

function sumar(a, b, ...c) {
  let resultado = a + b;

  c.forEach(n => {
    resultado += n;
  });

  return console.log(resultado);
}

sumar(1,2); //Imprime 3
sumar(1,2,3); //Imprime 6
sumar(1,2,3,4); //Imprime 10
sumar(1,2,3,4,5); //Imprime 15

Los tres puntos delante del tercer argumento c, indican que dicho valor en la función debe ser un arreglo compuesto por los parámetros que lleguen desde el tercero en adelante siguiendo esta lógica:

• El primer valor se asigna al parámetro a.
• El segundo valor se asigna al parámetro b.
• El resto de parámetros, se guardará dentro de un arreglo asignado a c.

Spread Operator

Mientras que los parámetros Rest nos permiten tener un número indeterminado de argumentos en una función, el operador de propagación permite usar el mismo concepto a la inversa.

Que una expresión sea expandida en situaciones donde se esperan múltiples elementos, es decir, convertir un arreglo en una serie de argumentos para una función.

let saludo = [ 'Hola', 'soy', 'su', 'amigo', 'y', 'docente', 'digital', 'Jonathan', 'MirCha' ]
 
console.log( ...saludo ) //Hola soy su amigo y docente digital Jonathan MirCha

En este ejemplo, tomo el arreglo para procesar cada una de sus posiciones como argumentos de la función console.log, por lo que sería equivalente a escribir:

console.log( saludo[0], saludo[1], saludo[2], saludo[3], saludo[4], saludo[5], saludo[6], saludo[7], saludo[8] )

Como ves el operador de propagación nos ofrece la ventaja de no conocer el número de elementos que tenga un arreglo, ni de crear ciclos que lo recorran y nos evita estar pasando cada uno de los elementos del mismo.

Esta funcionalidad puede servir incluso para concatenar arreglos entre sí, mira los siguientes ejemplos:

let arr1 = [1, 2, 3, 4],
  arr2 = [5, 6, 7, 8];

console.log(arr1); //Imprime [1, 2, 3, 4]
console.log(...arr1); //Imprime 1 2 3 4

arr1.push(...arr2);
console.log(arr1); //Imprime [1, 2, 3, 4, 5, 6, 7, 8]

let superiores = ['hombros', 'brazos', 'tronco'],
  inferiores = ['pelvis', 'piernas', 'rodillas'],
  cuerpo = ['cabeza', ...superiores, ...inferiores, 'pies'];

console.log(cuerpo); //Imprime ["cabeza", "hombros", "brazos", "tronco", "pelvis", "piernas", "rodillas", "pies"]

console.log(...cuerpo); //Imprime cabeza hombros brazos tronco pelvis piernas rodillas pies

En el primer ejemplo hemos incrementado el número de elementos de arr1 con los valores de arr2 y en el segundo ejemplo hemos formado y numerado todas las partes del cuerpo en una sola variable que contiene los elementos de 2 cadenas sencillas y dos arreglos más.

Como ves, gracias a los avances que el estándar de JavaScript ha tenido desde el 2015, ahora podemos tener una sintaxis con más posibilidades como en otros lenguajes de programación.

Te esperamos en los siguientes artículos en donde hablaremos mas acerca de estos temas, los cuales hoy en día son de vital importancia en el mundo de la tecnología.