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

 

JavaScript 7 [ Break & Continue - Desestructuración ]

·    La sentencia break "salta" de un bucle.

·       La sentencia continue "salta" una iteración del bucle.

Imaginemos que tenemos un array de nombre números.

const numeros = [1,2,3,4,5,6,7,8,9];
 
//Podemos recorrer el arreglo con un bucle for
 
for(let i=0; i<numeros.length; i++)
{
   console.log(i);
}

 

Si vamos a la consola veremos la salida siguiente:

Pero lo que estamos viendo no son los valores del array numeros, estamos viendo el increment de la variable i

Si lo que queremos ver realmente son los valores que contiene el arreglo deberemos hacer o siguiente:

const numeros = [1,2,3,4,5,6,7,8,9];
 
//Podemos recorrer el arreglo con un bucle for
 
for(let i=0; i<numeros.length; i++)
{
   //console.log(i);
   console.log(numeros[i]);
}

Y en la consola veremos:

La diferencia estriba en que con la instrucción console.log(numeros[i]), estamos acediendo a cada posición del array usando el increment de i.

Imaginemos ahora que lo que queremos es que en la iteraciín de nuestro bucle, cuando lleguemos al número 5, nos salgamos del bucle, podríamos usar la palabra reservada break del siguiente modo:

 //Ahora queremos que cuando i = 5 te salgas del for
 
 for (let i=0; i<numeros.length; i++){
     if (i===5){
         break;    //Al llegar a 5 se sale del bucle for. imprime solo 5 numeros
     }
    console.log(numeros[i]);
}

Ahora en la consola veremos como las iterciones se detienen al llegar al 5

Continue.

Veamos ahora qué ocurre cuando usamos la palabra reservada continue.

const numeros = [1,2,3,4,5,6,7,8,9];
 
//QUE PÁSA CUANDO USAMOS CONTINUE
for (let i=0; i<numeros.length; i++){
    if (i===5){
        continue;   //al llegar a 5 continua NO IMPRIME EL 6, EL RESTO SI, NO IMPRIME EL 6 PORQUE
                    //POR QUE NO ROMPE EL BUCLE COMO BREAK, SINO QUE OMITE LA ITERACIÓN EN LA QUE SE ENCUENTRA.
    }
   console.log(numeros[i]);
}

La teoría nos dice que continue, salta una iteración en una posición determinada, por tanto en la salida en consola veremos todos los numerous menos el 6 ya que es en la cosición 5 donde le indicamos se salte una iteración:

Desestructuración.

La desestructuración es una nueva característica del estandar ES6. Se trata de una nueva forma de asignar valores a arreglos y a objetos. Esta es un tipo de sintáxis muy utilizada en el trabajo con Frameworks como Angular, React o Vue. Se trata de asignar lo que viene en un objeto  de un modo muy ágil.

Imaginemos que queremos guarder los valores de un array, en distintas variables.

Sin la desestructuración tendríamos que hacerlo de la siguiente manera:

 let numeros =[1, 2, 3];
 
 let uno = numeros[0],
     dos = numeros[1],
     tres = numeros[2];
 
console.log(uno, dos, tres);

En consola veremos:

Sin embargo mediante la desestructuración podemos hacerlo del siguiente modo:

 let numeros =[1, 2, 3];
 
//AHORA CON DESTRUCTURACIÓN PODEMOS HACER:
const[uno, dos, tres] = numeros;  //Simplemente creo un array con la variables y lo igualo a mi array de datos
console.log(uno, dos, tres);

Esto mismo lo podemos hacer tambien con objetos. Es importante tener presente que para que la desestructuración funcione en objetos, la variable que creamos para gurdar la propiedad del objeto debe llamarse igual qu e esa propiedad. El orden puede variar y la asignación se hace en function del nombre, pore so deben tener el mismo nombre

//ESTO LO PODEMOS HACER CON OBJETOS, ES DECIR YO TENGO UN OBJETO Y NECESITO GUARDAR CADA UNA DE LAS
//PROPIEDADES DEL OBJETO EN VARIABLES INDEPENDIENTES:
let persona ={
    nombre:"Juan",
    apellido: "Lopez",
    edad: 40
}
//IMPORTANTE -PARA QUE LA DESTRUCTURACIÓN FUNCIONES EN OBJETOS, LA VARIABLE QUE CREO PARA GUARDAR LA PROPIEDAD DE MI OBJETO
//DEBEN LLAMARSE IGUAL. EL ORDEN DE LAS VARIABLES PUEDE VARIAR Y LA ASIGNACIÓN SE HACE EN FUNCIÓN DLE NOMBRE POR ESO DEBEN
//LLAMARSE IGUAL.
let {nombre, apellido, edad } = persona;
console.log(nombre, apellido, edad);

 en consola tendremos: