La llegada de ES6 nos trajo, ente otras muchas novedades, el la sintaxis spread, que como ya conoceréis nos permite ahorrarnos unas cuantas líneas de código y mejorar la legibilidad.

Concretamente, esta sintaxis nos permite desestructurar los parámetros que pasamos a una función para que nuestro código pase de:

function foo(data) {
  const id = data.id
  const title = data.name
  // more...
}

A ésto:

function foo({id, title}) {
  //more
}

Pero también, gracias al operador spread ..., podemos expandir (unwrap) los objetos con el fin de realizar operaciones como:

const obj1 = {a: 1, b: 2};
const obj2 = {...obj1, c: 3};
// obj2 = {a: 1, b: 2, c: 3};

Sin embargo, otra de las aplicaciones de esta sintaxis es la de crear objetos con determinadas propiedades dependientes de una condición, que es de lo quería hablar en este artículo. Por ejemplo, si tenemos el siguiente código:

const obj1 = {a: 1, b: 2};
if (condition) {
  ob1.c = 3;
}
if (otherCondition) {
  obj.d = 4;
}

Mediante la sintaxis spread podemos transformarlo en lo siguiente, mucho más legible:

const obj1 = {
  a: 1, 
  b: 2,
  ...(condition ? {c:3} : {}),
  ...(otherCondition ? {c:4} : {})
};

Esto es posible gracias a que el operador solo actúa si la condición es true. Recordad que si vais a usar esta forma de crear objetos, 0 evalúa a false por lo que deberías realizar una comprobación estricta.

Como véis, emplear este operador nos permite mejorar mucho nuestro código y librarnos de esos molestos if que teníamos que añadir si queríamos conseguir algo parecido.

¿Quieres recibir más artículos como este?

Suscríbete a nuestra newsletter: