Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Curso de ECMAScript 6+

Curso de ECMAScript 6+

Oscar Barajas Tavares

Oscar Barajas Tavares

¿Qué se implementó en ES9?

9/14
Recursos

Aportes 211

Preguntas 46

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

/**
 * Spread Operator
 */
const obj = {
  name: 'Oscar',
  age: 32,
  country: 'MX'
};

let { name, ...addInfo } = obj;
console.log(`name: ${name}`);
console.log(`additional information: `, addInfo);

let { country, ...nameAndAge } = obj;
console.log(`name and age: `, nameAndAge);

/**
 * Porpagation Properties
 */
const person = {
  name: 'Oscar',
  age: 32
};

const personInformation = {
  ...person,
  country: 'MX'
};
console.log(`personInformation: `, personInformation);

/**
 * Promise Finally
 */
const helloWorld = () => {
  return new Promise((resolve, reject) => {
    true
      ? setTimeout(() => {
          resolve('Hello World!');
        }, 3000)
      : reject(new Error('Test Error'));
  });
};

helloWorld()
  .then(result => console.log('result -> ', result))
  .catch(err => console.log('err -> ', err))
  .finally(() => console.log('finalizó'));

/**
 * Regex
 */
const regexData = /([0-9]{4})-([0-9]{2})-([0-9]{2})/;
const match = regexData.exec('2018-04-28');
const year = match[1];
const month = match[2];
const day = match[3];
console.log('Date -> ', year, month, day);

🌟 Otra de las nuevas características de ES9 en la captura de grupos es nombrar nuestros grupos para encontrarlos de una forma más fácil. El código que hace el profe Oscar al final podría resumirse en lo siguiente:

const regexData = /(?<year>[0-9]{4})-(?<month>[0-9]{2})-(?<day>[0-9]{2})/
constmatch = regexData.exec('2018-04-20');
const { year, month, day } = match.groups;

console.log(year, month, day);

Para hacer uso de esto, debemos anteponer un ?<nombre> en el grupo que queremos nombrar de nuestro RegEx. Todos los grupos nombrados los podremos acceder en un objeto que estaŕa en la llave groups del resultado de match.

En general me fascino. Vamos por la última versión 😄

Un pequeño aporte: finally no recibe ningún parámetro a diferencia de then y catch. Además también puede ser usado en la estructura try/catch cuando implementemos async/await.

Esta clase con las ultimas 3 o 4 me hizo dar cuenta de que se muy poco de js

Para agregar algo a la clase, una forma mucho mas limpia de trabajar con regex es hacer destructuring a los que nos regresa .exec() de esta forma

const dateString = '2018-12-23'

const dateRegex = /([0-9]{4})-([0-9]{2})-([0-9]{2})/

// Como se puede ver nos saltamos el primer espacio ya que lo que nos regresa
// dateRegex.exec(dateString) en el indice 0 es justamente el string que le pasamos por parametro
// tambien para evitar futuros errores utilizamos el operador || para que si se da el caso en que 
// dateRegex.exec(dateString) retorne null no nos de error el querer hacer el destructuring

const [ , year, month, day] = dateRegex.exec(dateString) || []

console.log(`day: ${day}, month: ${month}, year: ${year}`)

//-> day: 23, month: 12, year: 2018

A no desesperar. Más adelante se repasan todas estas cosas una y otra vez. Van a tener tiempo para romperse la cabeza pensando.

Me mata como al profe le gustan mucho todas las nuevas características de ECMA jaja.

Si la promesa NO se resuelve .finally igualmente se dispara (siempre se ejecutará, no importa si la promesa se cumple o no)
documentación:
https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Promise/finally

ES9

  • **spread **: permite manipular partes de un objeto es decir destructurar o estructura un objeto
  • then/catch/finally: ahora podemos tener un funciona que permita saber cuando terminó una promesa.
  • "/miRegexString/.exec() ": ahora permite obtener los grupos en un arreglo.

Todo estaba bien hasta lo de Regex, debo tomar el curso de Expresiones regulares 😦

El profe emocionado con las nuevas características:

Yo:

RESUMEN:
En esta clase vimos las implementaciones de ES9.


// Operador de reposo puede extraer las propiedades de un objeto que aún no se ha construido. ...all

const obj= {
    name:'Alejandro', 
    nick: 'Alejandro-sin'
}

let{name, ...all}=obj;
console.log(name,all); // Si quito el argumento name, me trae todo menos el nombre.


// Utilizando propiedades de propagación se pueden añadir multiples objetos a otros objetos mediante ...nombre_objeto
const obj= {
    name:'Alejandro', 
    nick: 'Alejandro-sin'
}
const obj1= {
    ...obj,
    alter:'Etrx', 
    alternick: 'n-etrx'
}
const obj2= {
    ...obj1,
    loveone:'Anny', 
    nickloveone: 'Animadversion'
}

console.log(obj2);

//Promise.finally podemos saber cuando ha terminado el llamado para realizar una lógica.

const helloWorld =() =>{
    return new Promise((resolve,reject)=>{
        (true)
        ? resolve('helloWorld')
        : reject(new Error ('Test Error'))
    });
}

helloWorld()
    .then(response => console.log(response))
    .catch(error=>console.log(error))
    .finally(()=>console.log('finalizo'))

    

a veces este tipo de curso de repaso de fundamentos son muy necesarios a mitad de las rutas, te ayuda a medir que tanto has aprendido a lo largo del camino

uff!! soy solo yo o siento que este curso tiene muchisima informacion?? Para ser un curso de 2 horas me tomo todo el dia poder interiorizar todo.
Se siente como una MasterClass y me encanta

tendré que tomar el curso de expresiones regulares porque en regex me perdí

Features de ES9 - 2018 (vistas en esta clase)

  • Operador de reposo (rest operator)
  • Operador de propagación (spread operator)
  • Promise.finally()
  • Mejoras para regexp: grupos de captura con nombre (named capture groups)

…para conocer más a detalle los features de ES9, te recomiendo el siguiente post por Yeison Daza:
ES2018 Parte 1: Mejoras a RegExp

math[0] almacena la cadena:

const regexData = /([0-9]{4})-([0-9]{2})-([0-9]{2})/
const match = regexData.exec('2020-04-20')
console.log(match)

[
  '2020-04-20',
  '2020',
  '04',
  '20',
  index: 0,
  input: '2020-04-20',
  groups: undefined
]

Para los que no saben a que se refiere el profesor con regex. Esta hablando de expresiones regulares, las cuales no sirven para validar por ejemplo que una contraseña tenga mas de 8 carácteres, que tenga mayúsculas, minúsculas, números y símbolos.

Pueden encontrar mas información aquí

Para ahorrar tiempo escribiendo, aqui esta el regexData:

const regexData = /([0-9]{4})-([0-9]{2})-([0-9]{2})/;

No se tu pero tengo miedo

Oscar, buena explicación a un ritmo un tanto acelerado, pero eso me presiona a querer hacerlo mejor, gracias.

Si te perdiste en regex, date un respiro y vuelve a verlo de nuevo es muy sencillo. No sabía que era expresiones regulares. Aquí un video que lo explica sencillamente:
https://www.youtube.com/watch?v=xH7uOrHLvUg

Si ambos objetos tienen el mismo key con diferente valor y se recurre a las propiedades de propagación, se mostrará el valor del objeto al cual uses como parametro en el console.log

const obj = {
    name: 'Leonardo',
    age: 27,
}

const obj1 = {
    ...obj,
    name: 'Victoria',
    country: 'MX',
}

console.log(obj1);```

La constante match es un array de 4 datos, la posición 0 es la siguiente:

const date = match[0];
console.log(date); // 2018-04-20

exec( ) —> Ejecuta una búsqueda por una coincidencia en una cadena. Devuelve un arreglo de información o null en una discrepancia.

//-----------------rest operator-------------------/
const obj = {
    name: 'oscar',
    age: 32,
    country: 'MX',
};

let { name, ...all } = obj;
console.log(name, all);

//si quiero solo name y age
let { country, ...all } = obj;
console.log(all);

//---------------anidar con operador de propagacion------------------/

const obj = {
    name: 'oscar',
    age: 32,
};
const obj1 = {
    ...obj,
    country: 'MX',
};

console.log(obj1)

//----------------Promise.finally------------------------------------/
const helloWorld = () => {
    return new Promise((resolve, reject) => {
        (true)
        ? resolve('Hello World')
        : reject(new Error('Test de error'))
    });
};

helloWorld()
    .then(response => console.log(response))
    .catch(error => console.log(error))
    .finally(() => console.log('Finalizo'))

//------------------Regex---------------------------/
//-----------------(year)-----(month)----(day)------/
const regexData = /([0-9]{4})-([0-9]{2})-([0-9]{2})/

const match = regexData.exec('2018-04-20');

const year = match[1]

const month = match[2]

const day = match[3]

console.log(year, month, day);```
const obj = {
    name: 'Fran',
    age: 52,
    country: 'COL'
};

//extraer elemnto de un objeto
let { name, ...all1 } = obj;
console.log(name, all1);
let { country,  ...all2 } = obj;
console.log(all2);
//nos muestra el elmento extraido y un objeto con los de mas elementos.


//utilidades de propagacion
//para anidar dos objetos
const obj3 = {
    name: 'Fran',
    age: 52,
}

const obj4 = {
    ...obj3,
    country: 'COL'
}

console.log(obj4);


//saber cuando a terminado el llamado y ejecutar alguna funcionalidad segun sea el caso.

const helloWorld = () => {
    return new Promise ((resolve, reject) => {
        (true) 
        ? setTimeout(() => resolve('Hello World'), 3000)
        : reject(new Error('Test Error'))
    });
};

helloWorld()
    .then(response => console.log(response))
    .catch(error => console.log(error))
    .finally(() => console.log('Finalizo'))



//como agrupar bloques de reject y poder acceder a cada uno de ellos    

const regexData = /([0-9]{4})-([0-9]{2})-([0-9]{2})/
const match = regexData.exec('2018-04-20');
const year = match[1];
const month = match[2];
const day = match[3];
console.log(year, month, day);
console.log(match);

Hace falta bastante estudio

Operador de reposo

Esto de las promesas aun me causa dolor de cabeza 😵. Espero verlo mas a fondo y entenderlo bien el curso de asincronismo.

Les dejo un ejemplo de como podemos usar el operador de propagación para trabajar con distintos objetos y crear uno nuevo con esas propiedades. De esta manera, podemos crear rapidamente nuevos objetos sin repetir código.

Es muy raro que el match, después del regexData empiece en 1 y no en 0. match[1]

9. ¿Qué se implementó en ES9?

Les comparto lo aprendido en clase, este código tiene mis comentarios 😃.

const obj = {
    name : 'Oscar',
    age: 32,
    country: 'MX',
};

let { name, ...all } = obj;
console.log(name, all);
//output {age: 32, country: 'MX'}

//aquí podemos "sacar" un dato y mostrar los demás
let {country, ...all2} = obj;
console.log(all2);
//output {name: 'Oscar', age: 32}

const obj = {
    name: 'Oscar',
    age: 32
};

//Podemos unir objetos con el spread operator ...
//esto une el obj1 con el obj
const obj1 = {
    ...obj,
    country: 'MX'
};

console.log(obj1);
//output { name: 'Oscar', age: 32, country: 'MX' }

//asdasd promise finally

const helloWorld = () => {
    return new Promise ((resolve, reject) => {
        (true)
        ? setTimeout(() => resolve('Hello World'), 3000)
        : reject (new Error('Test Error'))
    });
};

helloWorld()
    .then(response => console.log(response))
    .catch(error => console.log(error))
    .finally(() => console.log('Finalizó'))

//Regex

const regexData = /([0-9]{4})-([0-9]{2})-([0-9]{2})/
const match = regexData.exec('2018-04-20')
const year = match[1]
const month = match[2]
const day = match[3]

console.log(year, month, day);
//output: 2018 04 20

La parte del regex o esta cosa rara que ven ahí [0-9]{4}… son expresiones regulares y Platzi tiene un curso especifico para que aprendas de ellas ya que son muy importantes.

https://platzi.com/clases/expresiones-regulares/

Uff simplemente cosas muy muy chin…
Aqui mas de la descripción de finally de MDN

**El método finally() devuelve una Promise. Cuando la promesa se resuelve, sea exitosa o rechazada, la función de callback específicada será ejecutada. Esto ofrece una forma de ejecutar código sin importar como se haya resuelto la promesa.

Esto ayuda a evitar tener código duplicado tanto en el then() como en el catch().**
https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Promise/finally

¿Qué extensión usas para que te resalte la ortografía en los strings?

Hola a todos! 😃 es la primera vez que oigo sobre expresiones regulares (regex) encontre este video de Youtube de platzi que explica super chevere! les da una idea de que son! https://www.youtube.com/watch?v=xH7uOrHLvUg

Me llamó mucho la atención eso del “regex” como no se había mencionado en ningún curso anterior (o al menos así me parece), decidí revisar un poco lo que son las Regular Expresions, que de regular solo tienen la parte en la que regulan. Basicamente son expresiones que determinan un formato de patrones en los datos sean numéricos o alfabéticos, que sirven para realizar búsquedas, para los que se utilizan distintas sintaxis de filtro (que son bastantes) y se explican en profundidad en este link: https://lenguajejs.com/javascript/caracteristicas/expresiones-regulares/

más confuso cada vez bro…

así se usuaria el finally con async/await syntax:

async () => {
  try {
    const result1 = await firstAsynchronousFunction();
    const result2 = await secondAsynchronousFunction(result1);
    console.log(result2);
  } catch(err) {
    throw new Error(`Something failed`);
  } finally {
    console.log(`All Tasks is Done`);
  }
}

El Rejex es un tanto simplista… Puede existir el día 99 del mes 99 del año 9999…

([12]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01]))

Puede arrancar el año con 1 o con 2 (1xxx o 2xxx), y luego le siguen 3 dígitos…Guión… Puede ser un número que arranque con 0 y luego del 1 al 9, o puede ser un número que arranque con 1 y luego del 0 al 2 (o sea los meses)… y para terminar tenemos los días que pueden ser los que arranquen con 0, los que arranquen con 1 y 2, y para terminar los que arranquen con 3 puede ser solo 0 y 1…

El Regex que estoy pasando igual NO ES PERFECTO… No cubre la posibilidad de ser Febrero con sus 28 o 29 días… Es tan solo una base…

JavaScript me sorprende mucho como lenguaje 😮, creo que sera unos de mis consentido.

Diganme que con el tiempo se entiende mejor ES6+ porfa

Otra de las problemáticas que viene a resolver ECMA2018 con la expansión del spread operator es que ahora se pueden copiar objetos sin necesidad de mutar el objeto original. Por ejemplo:
.

const obj1 = {
  name: "Fers",
  age: 21,
  country: "MX",
}

const obj2 = obj1;
// Modifiquemos las propiedades del segundo objeto
obj2.name = "Luis";
obj2.country = "AR";

console.log(obj1); // { name: 'Luis', age: 21, country: 'AR' }
console.log(obj2); // { name: 'Luis', age: 21, country: 'AR' }

.
Como se puede ver en el ejemplo anterior, el primer objeto se muta cuando se modifica el segundo, ¿por qué pasa esto? Esto pasa porque cuando se asigna el objeto se copia la referencia donde se encuentra, esto quiere decir que aunque estén en variables distintas, los dos objetos siguen haciendo alución a la misma referencia. Por otro lado…
.

const obj1 = {
  name: "Fers",
  age: 21,
  country: "MX",
};

const obj2 = {...obj1}; // Asignamos el objeto con el spread operator
// Volvamos a modificar las propiedades del segundo objeto
obj2.name = "Luis";
obj2.country = "AR";

console.log(obj1); // { name: 'Fers', age: 21, country: 'MX' }
console.log(obj2); // { name: 'Luis', age: 21, country: 'AR' }

.
Cuando se asigna el objeto con el spread operator, este lo que hace es que crea una nueva referencia con una copia del objeto anterior. Y ahora podemos ver que cuando se modifica el segundo objeto, esto no afecta al primero. Espero que mi aporte les sirva a entender mejor las ventajas del spread operator con los objetos. :3

¿Qué se implementó en ES9?

  1. Operador de reposo: permite separar elementos de un objeto según se necesite. se utiliza ...all para especificar que son los elementos que no se escogieron en la desestructuración del objeto.
/* Operador de reposo */
const obj = {
  name: 'santiago',
  age: 19,
  country: 'CO'
}

let { name, ...all} = obj
console.log(name, all) // santiago { age: 19, country: 'CO' }
  1. Propagación en objetos: Funciona de la misma forma que en Arrays, sirve para concatenar objetos según las propiedades que se necesite de un objeto especifico.
// Propagación en objetos

const obj1 = {
  name: 'santiago',
  age: 19
}

const obj2 = {
  ...obj,
  country: 'CO'
}

console.log(obj2) // { name: 'santiago', age: 19, country: 'CO' }
  1. Promise Finally: Sirve para hacer una acción cuando se termina de obtener los datos de una promesa. En este ejemplo ejecuta 'finalizo' cuando termina la ejecución de la promesa.
/* Promise.finally */

const helloWorld = () => {
  return new Promise((resolve, reject) => {
    (true)
      ? setTimeout(() => resolve('Hello World'), 3000)
      : reject(new Error('Test Error!'))
  })
}

helloWorld()
  .then(response => console.log(response)) // Hello World
  .catch(error => console.log(error)) // Test Error
  .finally(() => console.log('Finalizo')) // Finalizo
  1. Regex: Acceder a cada elemento de un Regular Expression para entender como se compone
/* Acceder a cada elemento de un Regular Expression para entender como se compone */
const regexData = /([0-9]{4})-([0-9]{2})-([0-9]{2})/
const match = regexData.exec('2018-04-20')
const year = match[1]
const month = match[2]
const day = match[3]

console.log(year, month, day)

No entiendo mucho ahora pero tengo la esperanza de que mas adelante todo me va resultar mas claro, hace 3 meses no tenia claro como funcionaba un arreglo y ahora si, entonces sigamos adelante

const obj = {
    name: 'Johan',
    age: 29,
    country: 'Colombia',
};
//Asi puedes crear un objeto utilizando nombre el valor de  un elemento el cual pasas de primero y seguido de una , escibes all lo que refiere a que vas a llamar al resto de elemento como elementos del nuevo objeto con sus respectivos keys y valores.
let { name, ...all } = obj;
console.log(name, all);
// si quieres impirmir solamente los elementos del nuevo objeto lo puedes hacer asi:

console.log(all);

const obj = {
    name: 'Johan',
    age: 29,
}

//con el operador de propagacion "..." puedes anidar elementos de objeto de la siguiente forma:
const obj1 = {
    ...obj,
    country: 'Colombia'
}

console.log(obj1);

//Otra forma de trabajar con promesas.
const helloWorld = () => {
    return new Promise((resolve, reject) => {
        (true)
            ? setTimeout(() => resolve('Hello World'), 3000)
            : reject (new Error('Test Error'))    
    });
};
// es una nueva forma de llamar el resultado de tu promesa
helloWorld()
    .then(response => console.log(response))
    .catch(error => console.log(error))
    .finally(() => console.log('Finalizado'))

//Agrupar bloques del  regex y poder acceder a cada uno de ellos
//Asi estableces entre [] el rango numerico que tendra cada digito de un caracter, entre {} establecemos la cantidad de caracteres que contiene un bloque de regex, con - separamos un bloque de regex de otro bloque de regex.
const regexData = /([0-9]{4})-([0-9]{2})-([0-9]{2})/
const match = regexData.exec('2018/04/20');
const year = match[1]
const month = match[2]
const day = match[3]
// asi puedes separar el contenido de un regexData
console.log(year, month, day);
console.log(year);
console.log(month);
console.log(day);

ES9

/ practice...
// es9

// destructuracion de objetos

let objeto = {
    nombre: 'Jhonny',
    edad: 27,
    pais: 'Bolivia'
}

let { pais, ...all } = objeto
console.log(all)

// Porpagation Properties

let obj = {
    nombre: 'Juan',
    edad: 34
}

obj3 = {
    ...obj,
    pais: 'Bolivia'
}

console.log(obj3)

// Promise Finally

const saludar = () => {
    return new Promise((resolve, reject) => {
        (false)
            ? setTimeout(() => resolve('Se resolvio ...'), 3000)
            : reject(new Error('Algo salio mal...'))
    })
}

saludar()
    .then(response => console.log(response))
    .catch(err => console.log(err))
    .finally(() => console.log('Esto ya finaliso...'))

// Regex

let regex = /([0-9]{4})-([0-9]{2})-([0-9]{2})/
let matches = regex.exec('2018-04-20')
let year = matches[1]
let month = matches[2]
let day = matches[3]
console.log(year, month, day)

ES9

// OPERADOR DE REPOSO

const obj = {
    name : 'Alejandro',
    age : 23,
    country: 'Ecuador',
};

let { country, ...all } = obj;
console.log(all);


const obj = {
    name: 'Alejandro',
    age : 23,
}

const obj2 = {
    ...obj,
    country: 'Ecuador',
}


console.log(obj2);



// PROMISE .finally

const helloWorld = () => {
    return new Promise((resolve, reject) => {
        (true)
        ? setTimeout(() => resolve('Hello World'), 3000)
        : reject( new Error ('Test Error'))
    });
};

helloWorld()
    .then(response => console.log(response))
    .catch(error => console.log(error))
    .finally(()=> console.log('Finalizo'))


// REGEX

const regexData = /([0-9]{4})-([0-9]{2})-([0-9]{2})/
const match = regexData.exec('2018-04-20');
const year = match[1]
const month = match[2]
const day = match[3]

console.log(year, month, day);


const datos = {
    nombre : "Victor",
    edad : 17,
    nacionalidad : "Mexicano",
}
//El ...all lo que hace es extraer todo lo demas del objeto en forma de objeto con la clave y valor
const {nombre, ...all} = datos;
console.log(nombre, all);

//Si yo solo quiero extraer el nombre y la edad
const {nacionalidad, ...allDos} = datos;
console.log(allDos);

console.log(`

`)


const helloWorld = () => {
    return new Promise((resolve, reject) => {
        (true)
            ? setTimeout(() => resolve("Muy bien"))
            : reject(new Error("Muy mal"))
    })
}

helloWorld()
    .then(reponse => console.log(reponse))
    .catch(error => console.log(error))
    .finally(() => console.log("Finalizo el procedimiento"))


const regexData = /([0-9]{4})-([0-9]{2})-([0-9]{2})/
const match = regexData.exec('2021-05-17');
const year = match[1]
const month = match[2]
const day = match[3]
console.log(year, month, day);
//1era caracteristica; Reposo que es traer las propiedades de un objeto que toda via no se ha construido
const obj = {
    name: 'Oscar',
    age: 32,
    country: 'MX',
};
 
let{ name, ...all} = obj;
console.log(name, all);

//Para que sea mas rapido a la hora de trabajar.

let {country, ...all} = obj; //Extraer lo que no necesita y lo de mas si 
console.log(all); //De esta manera puedes hacerlo mas rapido

//2da caracteristicas: Agrupar dos objetos
const obj = {
    name: 'Oscar',
    age: 32,
}
 // Lo agrupamos de esta manera

const obj1 = {
    ... obj,
    country: 'MX'
}
console.log(obj1)

//---------------------//

//3era Caracteristica: Promise. finally Podemos saber cuando ha terminado el llamado para realizar una logica

const helloworld = () => {
    return new Promise((resolve, reject) => {
        (true)
        ?resolve('Hello world')
        :reject(new Error('test Error')) 
    })
};

helloworld()
.then(response => console.log(response))
.catch(error => console.log(error))
.finally(() => console.log('Finalizo'))



//4rta caracteristica: Como se puede agrupar bloques de regex poder acceder a ello
const regexData = /([0-9]{4})-([0-9]{2})-([0-9]{2})/;
const match = regexData.exec('2018-04-30');
const year = match[1]
const month = match[2]
const day = match[3]

console.log(year, month, day);
  1. ¿Qué se implementó en ES9?
    En es9 fue lanzada en junio del 2018

*- Operador Spread - operador de propagación -operador de reposo
minuto 2:39
La sintaxis extendida o spread syntax permite a un elemento iterable tal como un arreglo o cadena ser expandido en lugares donde cero o más argumentos (para llamadas de función) o elementos (para Array literales) son esperados, o a un objeto ser expandido en lugares donde cero o más pares de valores clave (para literales Tipo Objeto) son esperados.

Referencia:
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Spread_syntax

Este operador puede:

Puede extraer las propiedades de un objeto no se a construido
podemos unir múltiples objetos en uno nuevo
Puede insertar un conjunto de elementos a un array.






*- Saber cuando ha terminado el llamado de una promesa con el método promise.finally
Minuto 4:06
El método finally() devuelve una Promise. Cuando la promesa se resuelve, sea exitosa o rechazada, la función de callback especificada será ejecutada. Esto ofrece una forma de ejecutar código sin importar como se haya resuelto la promesa. Esto ayuda a evitar tener código duplicado tanto en el then() como en el catch().
Se puede saber cuando termina el llamado de una promesa
Referencia
https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally

*- regex
Las expresiones regulares son patrones que se utilizan para hacer coincidir combinaciones de caracteres en cadenas. En JavaScript, las expresiones regulares también son objetos. Estos patrones se utilizan con los métodos exec() y test() de RegExp, y con match(), matchAll(), replace(), replaceAll() (en-US), search() y split() métodos de String. Este capítulo describe las expresiones regulares de JavaScript.

Permite crear expresiones regulares.
con el método regex.exec() sirve para realizar un match entre el valor y la expresión regular
Una de las mejoras en es9 es poder agrupar bloques regex y poder acceder cada uno de ellos.
Para este ejemplo se creará una expression regular para el manejo de las fechas partiendo del siguiente formato año/mes/día

Referencia:
https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Regular_Expressions

const holaMundo = () => {
  return new Promise((resolve, reject) => {
		(true)
    ? setTimeout(() => resolve('Hola Mundo'), 3000)
    : reject (new Error('new Errror'))
  });
}

holaMundo()
.then(response => console.log(response))
.catch(error => console.log(error))
.finally(() => console.log('Finalizo el código'))```

ES9
REST/SPREAD PROPERTIES: Con esta propiedad podemos imprimir solo las propiedades seleccionadas de un objeto

// Operador de reposo puede extraer las propiedades de un objeto que aún no se ha construido. ...all

const persona= {
    name:'Alejandro', 
    nick: 'chapu'
}

let{name, ...all}=persona;
console.log(name,all); // Si quito el argumento name, me trae todo menos el nombre.


// Utilizando propiedades de propagación se pueden añadir multiples objetos a otros objetos
const persona= {
    name:'Alejandro', 
    nick: 'Alejandro-sin'
}
const persona1= {
    ...persona,//añadimos al objeto persona
    alter:'Etrx', 
    alternick: 'n-etrx'
}

console.log(persona1);

PROMISE: FINALLY(): Es una función introducida en las promesas que se ejecutará siempre al finalizar la promesa, es decir, se ejecutará tanto si la promesa se ejecuta con éxito o es rechazada.


const helloWorld = () => {
    return new Promise((resolve, reject) s=> {
        (true)
        ? setTimeout(() => resolve('Hello World'), 3000)
        : reject(new Error('Test Error'))
    });
};

helloWorld()
.then(response => console.log(response))
.catch(error => console.log(error))
.finally(() => console.log('Finalizo'))//indica que la promesa ya finalizo su ejecucion.

Buenas noches compañeros, comparto este link por si alguien quiere profundizar acerca de las expresiones regulares que son para que sirven y algunas características básicas. Espero les sirva, saludos.
https://lenguajejs.com/javascript/caracteristicas/expresiones-regulares/

//Promise.finally

const helloWorld = () => {
    return new Promise((resolve, reject) => {
        (true)
        ? setTimeout(() => resolve('Hello World'), 3000)
        : reject(new Error('Test Error'))
    });
};

helloWorld()
.then(response => console.log(response))
.catch(error => console.log(error))
.finally(() => console.log('Finalizo'))```

Las expresiones regulares nos permite ver si una cadena de texto cumple un determinado formato, por ejemplo, si todo son dígitos, si tiene formato de fecha y hora, etc. También nos permiten extraer partes de esa cadena de texto que cumplan ese formato, por ejemplo, si dentro de un texto más o menos largo hay una fecha, podemos extraerla fácilmente.

El operador spread recibió mejoras en el ES9 ahora nos permite utilizarlo dentro de los objetos.

///////////////Clase 9///////////////////
const obj = {
  name: 'oscar',
  age: 32,
  country: 'MX'
};

let { country, ...all } = obj;
console.log(all);

const obj2 = {
  name: 'Carlos',
  age: 32
};

const obj3 = {
  ...obj2,
  country: 'MX'
};

console.log(obj3);


const helloWorld = () => {
  return new Promise((resolve, reject) => {
    (true)
    ? setTimeout(() => resolve('Hellos World'), 3000)
    : reject(new Error('Test Error'))
  });
};


helloWorld()
  .then (Response => console.log(Response))
  .catch (error => console.log(error))
  .finally (() => console.log('Finalizo'))

// como agrupar mejor

const regexData = /([0-9]{4})-([0-9]{2})-([0-9]{2})/
const match = regexData.exec('2018-04-20');
const year = match[1]
const month = match[2]
const day = match[3]

console.log(year,month,day);

Regex

es9 lanzada junio 2018

Fascinante lo del regex

Que buenas mejoras trajo está version de ECMA Script 😄

Personal note: ver este video desps de asyn course

Alguien más solo está siguiendo el código sin saber que es lo que está haciendo el profesor? ajaja.
Creo que para entender las actualizaciones de ES se necesita ya tener un cierto tiempo programando, con lo cual entiendes la sintaxis anterior y cuales son las mejoras, ahora si uno recién esta aprendiendo ni siquiera sabe cual es la sintaxis, peor aún la actual, y peor aún los ejemplos a los cuales hace referencia

7:38 CUANDO ESTOY TRABAJANDO EN… ¿QUÉ?

Summary For Engineers

Mas información sobre Expresiones Regulares (RegEx)
.
https://www.youtube.com/watch?v=M72lwALYRJU

Yo hice un destructuring de array ya que devuelve un array como valor asi que asi en 1 sola linea se pueden crear las 3 variables de la fecha:

const regexData = /([0-9]{4})-([0-9]{2})-([0-9]{2})/ //this is a rule, to destructure a data block   
                  //from 0 to 9 in value of only {n} characters and between '-' chars
const match = regexData.exec('2021-02-27');                                                                                                       
let [entireDate,year,month,day] = match;//destructuring of array                                  
console.log(`year: ${year} + month: ${month} + day: ${day} = ${entireDate}`);  
const regexData = /([0-9]{4})-([0-9]{2})-([0-9]{2})/
const validateRegex = regexData.exec('2022-22-02')
const [, year, month, day] = validateRegex
console.log(year, month, day)

Para los que quieren profundizar sobre RegEx, en Platzi tienen un curso de expresiones regulares que tratan el tema.
Curso

spread y rest hacen la vida mucho mas facil

La doc de las expresiones regulares : expresiones regulares

ECMAScript 9

  1. Operador de Reposo … all
  2. Elemento de Propagacion (unir dos o mas objetos)
    3.Promise Finally
    4.Regex

ES9, lanzada en Junio del 2018.

Algunas notas con código. 😁
.
Si no logras verlo bien desde el apartado de aportes, te recomiendo ir al aporte directamente y así poder ver la imagen mucho más grande.
.

El operador …all puede servir para copiar objetos pero solo en su primera capa, cuando es un objeto con varios niveles la copia que se genera no es independiente de la original, como en este ejemplo.

const joel = {
  name: "Joel",
  age: 24,
  country: "USA",
  sports: {
    extreme: ["BMX", "MMA", "Longboard"],
    team: ["Voleibol", "Basket", "Futbol"],
  },
};

let { ...all } = joel;
all.name = "Pedro";
all.sports.team[0] = "American Football";

console.log(all, joel);

cuando se ejecuta el console.log, los objetos si tienen distintos nombres pero en los deportes no se cambio solo la copia sino los dos

Spread Properties

const obj = {
    name: 'Kevin',
    age: 27,
    country: 'VE'
}
let {country, ...all} = obj;
console.log(country,all);


const obj2 = {
    name: 'Kevin',
    age: 27,
}

const obj3 = {
    ...obj2,
    country: 'VE'
}
console.log(obj3);

Promise.finally()


const helloWorld = () => {
    return new Promise((resolve,reject) => {
        (true)
        ? setTimeout(() => resolve('Hello World'),3000)
        : reject(new Error('testError'))

    });
}
helloWorld()
    .then(response => console.log(response))
    .catch(error => console.log(error))
    .finally(() => console.log('Finalizo'))

RegExp

const regexData = /([0-9]{4})-([0-9]{2})-([0-9]{2})/;
const match = regexData.exec('2021-10-03');
const year = match[1];
const month = match[2];
const day = match[3];
console.log(match);
console.log(year);
console.log(month);
console.log(day);

Estuve media hora intentando encontrar el porque de un error y resulta que escribi solo un numero y no los dos que necesita el regex. 😦

const match = regexData.exec('2021-11-1');

Propagación de propiedades

let java = {
    name: 'Java',
    type: 'Compilado'
};

let javascript = {
    name: 'JavaScript',
    type: 'Interpretado'
};

let bolivia = {
    name: 'Bolivia',
    code: 'BO'
}

let person = {
    firstName: 'Sergio',
    lastName: 'Ochoa',
    age: 33,
    bolivia
}

let devSergio = {
    ...person,
    proffesion: 'Ingeniero de Sistemas',
    favoriteLanguage: 'Java',
    languages: [
        {...java},
        {...javascript}
    ]
}

console.log(devSergio);

cada versión de ECMA me parece tan interesante porque aun me faltan cosas por saber pero por eso uno esta aqui xD

Justo en esta semana hice los desafíos de hackerRank sobre regex, sino no hubiera entendido nada.

Una clase muy interesante. De todo el curso sin duda lo que más se me complicó fueron las promesas y las async pero espero poder reforzarlo con más cursos de JS y lecturas de internet.

Yo hice esta expresión regular un poco más estricta:

const regexData = /([0-2]{1}[0-9]{3})-([0-1]{1}[0-9]{1})-([0-3]{1}[0-9]{1})/;

La fecha en el Regex es mi cumpleaños! Like para que Oscar lo vea 😃!

/**
 * Promise Finally
 */
function getRandomInt(min, max) {
    //Credits: https://stackoverflow.com/questions/1527803/generating-random-whole-numbers-in-javascript-in-a-specific-range
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
}


  const guessNumber = (guessNumber) => {
      console.log("Guess a number from 1-10")
      var randNum = getRandomInt(1,10)
    return new Promise((resolve, reject) => {
        if(guessNumber == randNum){
            resolve('Yay! You guessed the number');
        } else{
            reject(`The random number is ${randNum}`); //If not enough money, reject the process
        }
    });
  };
  
  guessNumber(3)
    .then(result => console.log( result))
    .catch(err => console.log(err))
    .finally(() => console.log('Thanks for Playing'));
con lo que va del curso veo que nose es nada de js, prometo no desmayar, pero está duro el tema, jaja

código

/* `Operador de reposo` ...all */
const obj = {
    name: 'Franks',
    age: '23',
    country: 'Peru',
};

let { name, ...all } = obj;
console.log(name, ' -> ', all); //Franks -> { age: '23', country: 'Peru' }

/* `operador de reposo` ... in objects */
const obj = {
    name: 'Franks',
    age: 23,
}
const obj2 = {
    ...obj,
    country: 'Peru',
}
console.log(obj2);

/* Promise.finally */
const helloWorld = () => {
    return new Promise((resolve, reject) => {
        (true)
            ? setTimeout( () => resolve('Hello, World'), 3000 )
            : reject( new Error('Test error'))
    });
};
helloWorld()
    .then(response => console.log(response))
    .catch(error => console.log(error))
    .finally(() => console.log('finalizo!'));

/* regex -> blocks */
const regexData = /([0-9]{4})-([0-9]{2})-([0-9]{2})/;
const match = regexData.exec('2018-04-20');
const year = match[1];
const month = match[2];
const day = match[3];
//console.log(match);
console.log(year, month, day);

Promesas

esto reemplaza a delete obj.key

Genial

geniaaaal

🙄

excelente cada version… siempre mejorando…

Interesante video. Hay muchas cosas que desconocía, y aún desconozco.

excelente, casi acabando el curso