JavaScript 8 Objetos literales & parámetro REST y Operador de propagación SPREAD

Objetos literales

Los objetos literales es una nueva forma de escribir y asignar atributos y métodos a nuestros objetos, que tenemos disponible desde ES6.

Imaginemos que queremos crear un objeto y queremos darle como propiedades algunas variables que tenemos definidas en elgún lugar de forma independiente.

Declaremos las variables nombre y edad:

let nombre = "Lolo", edad = 7;

voy a crear ahora un objeto perro, y a este objeto le quiero dar como propiedades las variables que acabo de definir

const perro = {
    //le doy como atributos las variables que tenía definidas
    nombre: nombre,
    edad: edad,
    //y puedo tener por ejemplo un método
    ladrar:function(){
        console.log("Guauuuu");
    }
}
 

Vamos a sacar por consola el objeto perro:

console.log(perro);  //Pues me aparece en consola
 
perro.ladrar();  //Me lanza el método en la consola

Ahora con las nuevas características podemos hacer los siguiente:

Si la variable que pretendemos asignar al objeto como propiedad tiene el mismo nombre que la propiedad que queremos tener, no es necesario hacer la asignación, simplemente la ponemos directamente y si quiero asignarle una variable que no ha sido declarada previamente pues hago lo de siempre, la creo

const dog = {
    nombre,
    edad,
    raza: "Westy",   //<--Nueva no declarada previamente
 
    //LOS MÉTODOS TAMBIÉN PODEMOS SIMPLIFICARLOS DEL SIGUIENTE MODO: quito la palabra reservada function :
    ladrar(){
     console.log("Guauuu Guauuu")
    }
}
console.log(dog);

REST & SPREAD

Estas dos nuevas características de ES6 son muy útiles para el trabajo con Frameworks Reactivos JavaScript como Angular, Vue y React. Hablamos del parámetro REST y el operador de proopagación SREAD.

Parámetros REST

Los parámetros REST son una forma de ir agregando virtualmente parámetros infinitos a una function o dentro de una variable. Por ejemplo imaginemos que tenemos un arreglo pero no sabemos cuantas posiciones va a tener, aquí definiremos un parámetro REST, para ello le antepondremos tres puntos suspensivos antes de la variable u objeto donde van a estar guardados esos posibles valores infinitos.

Lo veremos major con un ejemplo, tenemos una function que va a recibir valores y los va a sumar pero no sabemos cuantos numerous vamos a recibir en dicha function para ser sumados:

function sumar (a,b, ...c){
  let resultado = a + b;
 
 //c lo convertimos en un sumatorio mediante un forEach y guardamos el resultado en una variable
  c.forEach(function(n){  
      resultado += n
  });
 
//devolvemos esa variable
 return resultado;  
}
 
//console.log(sumar(1,2));
console.log(sumar(1,2,3));
 
//a partir del tercer numero se detecta el spread y devuelve la suma de todos los números
console.log(sumar(1,2,3,4));

En la salida por consola tendremos:

SPREAD OPERATOR (Operador de Propagación)

Este operador nos va a permitir expander una expression en situaciones donde tengamos que guarder multiples elementos o argumentos.

Ejemplo: Imaginemos que tenemos un Arreglo con cierto número de elementos, pero en un momento dado recibimos nuevos parámetros. En casos así en vez de estar hacienda concatenaciones o push a nuestro arreglo, podemos agregar esos nuevos datos recibidos mediante el SPREAD operator.

 const arr1 = [1,2,3,4,5],
       arr2 = [6,7,8,9,0]
  console.log(arr1, arr2);

Imaginemos ahora que queremos crear un arreglo 3, a partir de los dos arreglos anteriores. Yo pdría hacer:

const arr3 =[arr1, arr2];

 

Pero si hago esto, lo que obtengo es un arreglo de dos posiciones que, internamente tiene dos arreglos de 5 posiciones y eso no es lo que queremos:

queremos un array con tantas posiciones como la suma de los array anteriores y sus datos, para ello bastará con anteponer los 3 puntos suspensivos SPREAD OPERATOR:  

const arr3 =[...arr1, ...arr2];
 
console.log(arr3);  //AHORA SI TENGO UN ARRAY CON 10 POSICIONES Y TODOS LOS VALORES DE LOS ANTERIORES