Javascript con sabor a ES6: Spread Operator, Rest Parameters y Object Destructuring

Dentro de las múltiples bondades que podemos utilizar del estándar ES6, tenemos diversas funcionalidades aplicables a los objetos. Particularmente en esta ocasión hablaremos del Spread Operator, Rest Parameters y del concepto de Object Destructuring y cómo utilizar ambas funcionalidades.

Spread Operator

El Spread Operator corresponde a un operador el cuál distribuye los elementos de un arreglo u objeto, para asignarlos a alguna variable/constante/función.

Su sintáxis de uso es la siguiente:

const o1 = {
    a1: 'valor1',
    a2: 'valor2',
}
const o2 = {
    a3: 0,
    ...o1,
}
console.log(o1) // {a1: 'valor1', a2: 'valor'2}
console.log(o2) // {a3: 0, a1: 'valor1', a2:'valor2'}
const l1 = [1,2,3]
const l2 = [...l1, 4, 5]
console.log(l1) // [1,2,3]
console.log(l2) // [1,2,3,4,5]

Una utilidad clara, es cuando se quiere copiar atributos de un objeto a otro, o cuando se quiere copiar elementos de un arreglo a otro. Para el caso de los objetos, el operador funciona además respetando los valores de atributos definidos en el objeto de destino, de modo que no sean sobreescritos por los valores de atributos del objeto que estamos entregando mediante el operador. Esto puede ser visto de forma más clara con un ejemplo:

const o1 = {
    a1: 'valor1',
    a2: 'valor2',
    a3: 'valor3',
}
const o2 = {
    a1: 0,
    ...o1
}
console.log(o1) // {a1: 'valor1', a2: 'valor2', a3: 'valor3'}
console.log(o2) // {a1: 0, a2: 'valor2', a3: 'valor3'}

Rest Parameters

Los Rest Parameters, al igual que el Spread Operator, son representados mediante tres puntos consecutivos, pero distan bastante de parecerse al Spread Operator. Su funcionalidad es la de unir distintos elementos a un arreglo. Normalmente se puede ver en los argumentos de una función.

const potenciar = (exponente, ...bases) => {
    console.log(exponente)
    console.log(bases)
    return bases.map(x => x**exponente)
}
potenciar(3, 2, 3, 4, 5)
// console: 3
// console: [2, 3, 4, 5]
// return: [8, 27, 64, 125]

Object Destructuring

El concepto de Object Destructuring corresponde a la capacidad que entrega ES6 de “extraer” atributos de objetos hacia variables con el mismo nombre. Es decir:

const persona = {
    nombre: 'Juan',
    edad: 27
}
const { nombre, edad } = persona // aqui se crean las variables nombre y edad. Su valor corresponde al valor de los atributos de mismo nombre dentro del objeto persona
console.log(nombre) // 'Juan'
console.log(edad) // 27

De esta forma podemos hacer nuestro código más legible al crear variables que contengan el valor del atributo de un objeto.

NOTA: El Spread Operator y Object Destructuring entregan los valores de los atributos en forma de deep copy, por lo que cualquier modificación a los valores del objeto original no se verán reflejados en las variables receptoras de estas asignaciones.

Para quienes quieran ver otros artículos de la temática de Javascript con sabor a ES6:

• Javascript con sabor a ES6: Arrays
• Javascript con sabor a ES6: Arrow functions