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: