ESNext: Propuestas a tener en cuenta

Hola, ES Next propone mirar hacia adelante.

Mi nombre es Bramus y estamos en Yes Nation.

Entonces, permítanme enfocar la pantalla correcta aquí, sí.

Si observamos la línea de tiempo de ECMAScript, vemos esta gran división entre antes de 2015 y después de 2015. Esto se debe a que TC39 es un comité que mantiene y evoluciona el lenguaje ECMAScript. Han establecido este proceso de desarrollo que comenzaron a utilizar para avanzar en el lenguaje.

Ahora, como tenemos poco tiempo hoy, porque es una charla rápida, les daré la versión muy resumida.

La etapa cero es la etapa de persona ficticia, que básicamente es como decir: aquí hay una amplia identificación. Puedo proponer una, tú puedes proponer una, todos pueden proponer una. Para que tu propuesta avance a la etapa uno, debe pasar a la etapa de propuesta. Básicamente, TC39 dice: está bien, estamos interesados en esta propuesta. Veamos a dónde nos lleva. Luego, cuando tu propuesta avanza a la etapa dos, es una etapa de borrador, TC39 básicamente confirma que parece que estamos en algo, vamos a desarrollarlo. Así que lo desarrollas, lo desarrollas, lo desarrollas, lo desarrollas, lo desarrollas. Y finalmente, tu propuesta puede llegar a la etapa tres, que es la etapa de candidato. En este punto, se considera que la propuesta está terminada, pero requieren comentarios. Comentarios de los implementadores, que son los navegadores, y ustedes, los desarrolladores. Si todo va bien, tu propuesta avanza a la etapa cuatro, que es la etapa final sin cambios. Así que en esta etapa, de la etapa tres a la cuatro, solo se permiten cambios críticos. La etapa cuatro, la etapa final, todo está en orden, y luego en la reunión de enero de TC39, se recopilan todas las propuestas de etapa cuatro, y luego se incluyen en la próxima versión de ES. Así que en enero, que acabamos de tener, se recopiló la versión ES 2020.

Echemos un vistazo a algunas de mis propuestas favoritas. La primera es el encadenamiento opcional. Esto ya es parte de ES 2020, y me gusta mucho y lo uso mucho personalmente. Tenemos este objeto aquí, mensaje con un usuario y demás. Si seleccionamos la primera cosa de él, se muestra sin problemas. Ahora, si seleccionamos algo que no existe, por ejemplo, un apellido, obtenemos undefined. Podemos agregar un valor predeterminado allí, como un valor de respaldo predeterminado en caso de que sea falso. Lo que uso allí es una lógica de cortocircuito con un or. Entonces, en este caso, se devolverá 'anónimo'.

Pero esto no cubre el 100% de todos los escenarios. Por ejemplo, si seleccionamos meta.publicationDate, no obtenemos undefined, obtenemos un error. ¿Puedo leer la propiedad publicationDate de undefined, siendo undefined aquí, el mensaje.meta es undefined, por lo que obtenemos un error.

¿Cómo podemos solucionar esto? Bueno, entra en juego el operador de encadenamiento opcional. Por supuesto, tenemos algunas soluciones alternativas. No te recomiendo que las uses. Son soluciones alternativas realmente desagradables, pero el operador de encadenamiento opcional, esa es realmente la solución que se incorpora al lenguaje ECMAScript. Se ve así. Es un signo de interrogación y un punto.

¿Cómo funciona? Bueno, dice que el operando. Si ve uno, hará una pequeña comprobación. Si el operando del lado izquierdo del operador de encadenamiento opcional evalúa undefined o null, entonces toda la expresión evalúa undefined. Esa es la regla. El mensaje, eso es undefined, por lo que continúa. La próxima vez que encuentre el operador de encadenamiento opcional, comprobará message.meta. ¿Es eso undefined o null? Ese es el caso aquí. Toda la expresión evaluará a undefined, undefined o la nueva fecha, cadena ISO. Obtenemos la fecha real aquí en la pantalla. Ten en cuenta que el operador se escribe como signo de interrogación y un punto. No es solo un signo de interrogación. También puedes usarlo para acceder a propiedades o llamar funciones.

Luego, el no coalescing. Vimos esto justo antes. Usamos el operador para comprobar si es null o undefined, pero hay un problema aquí porque hacemos message.settings.show splash screen. Eso es false o true. Eso da como resultado true, pero queremos ver false allí. Aquí es donde entra en juego el operador de no coalescing. Es así y dará el resultado correcto. ¿Cómo funciona? Entonces, el doble signo de interrogación es el operador. ¿Cómo funciona? Bueno, sirve como una comprobación de igualdad contra null o undefined.

Entonces, si el elemento del lado izquierdo es nulo o indefinido, solo se devolverá el elemento del lado derecho. Aquí obtenemos falso, doble signo de interrogación, verdadero. Eso dará como resultado falso, que es el resultado correcto.

Genial. Asignación lógica. También es bueno. Esto está en la etapa tres. Busca avanzar a la etapa cuatro en la próxima reunión. Eso será en julio. Probablemente será ES 2021.

Digamos que no tenemos un valor para options.foo. Bueno, podemos usar nuestro operador de coalescing nulo y options.foo doble signo de interrogación barra, pero esto siempre hace un derecho. options.foo se asignará o barra se asignará a options.foo. Siempre tenemos un derecho allí. Los operadores de asignación lógica se ven así. La asignación lógica se ve así. Entonces es signo de interrogación, signo de interrogación igual barra. Entonces, si options.foo es nulo o indefinido, establecerá el valor de barra en esa variable. También funciona con or, también funciona con and. Una característica realmente buena. Esto me va a ahorrar tiempo al escribir JavaScript.

Y decimal, contemos hasta cero a tres. Esto es interesante. Si sumamos 0.1 y 0.2 en JavaScript, obtenemos 0.30004.com. Hmm, extraño. ¿Es esto un error de JavaScript? No, no es un error de JavaScript. Es un problema de las computadoras. Básicamente, tienen problemas con las matemáticas de punto flotante. Hay este maravilloso sitio web con una magnífica URL, 0.30004.com, que hace esto por nosotros. Nos lo explica. Entonces, ¿cuál es la solución? Bueno, la solución es agregar el nuevo tipo decimal. Es esto, el sufijo m. Entonces, el decimal 0.1 y el decimal 0.2, si los sumas, obtienes el decimal 0.3, que es el resultado correcto.

Etapa cero, por cierto, no sé hacia dónde se dirige esto. Luego, etapa uno, la API de cancelación. Digamos que tenemos una promesa aquí y la llamamos, llamamos a esta función con la promesa adentro. Primero, es una promesa de registro al inicio, y luego, después de 2.5 segundos, será una promesa resuelta en protector solar. Pero, ¿cómo podemos cancelar la ejecución? No hay una forma real de hacerlo. Bueno, la solución es la API de cancelación, etapa uno. Ten en cuenta que la sintaxis está a punto de cambiar, pero así es como se ve. Básicamente, consta de tres pasos. Uno, pasas el token de cancelación. Luego, dos, con ese token de cancelación, lo primero que haces, bueno, si ya está cancelado, detienes la ejecución. Luego registras una devolución de llamada cuando se llama al token de cancelación, el método de cancelación. Esta función se ejecutará, y luego, justo antes de que se resuelva, anulas el registro de tu devolución de llamada. El uso se ve así. Entonces creas una fuente de token de cancelación. Lo pasas a tu función. Luego, por ejemplo, después de un segundo, llamas a source.cancel. Así que esto será una promesa iniciada. Y luego, después de un segundo, la promesa será cancelada, que es el resultado correcto.

Nota al margen, el abort control, es algo que ya existe. Esta es una solución específica del proveedor. No es parte de ECMAScript o JavaScript en sí. Esto es algo que aún no se puede usar en los navegadores, pero no es parte de la sintaxis de ECMAScript.

Y luego, el último, el pattern matching, del que voy a hablar. Digamos que quieres calcular la longitud de un vector. Bueno, dependiendo de si es un vector 3D o un vector 2D o algo más, debes usar una fórmula diferente. x, y, y z, debes usar la fórmula uno. Es un vector 2D. Debes usar otra fórmula. Si tiene una longitud, debes devolver la longitud. Pero, ¿qué pasa si simplemente quieres hacer coincidir la forma? Bueno, esto es lo que hace el pattern matching. Dice, mira la forma del vector. Cuando hay una x, y y z presentes, usa esta fórmula, x e y, la otra fórmula. Si es spreadable, es decir, tiene una longitud, devuelve la longitud, de lo contrario, verdadero y error.

Esto es genial. Un caso de uso, por ejemplo, las solicitudes fetch. Si se devuelve un 200, si se devuelve un 400, simplemente puedes mirar la forma y luego realizar una acción basada en eso. Y esto, amigos míos, es solo una selección. Hay mucho más por venir en ECMAScript. Propuestas que van desde la etapa cero hasta la etapa cuatro. Todas están abiertas, así que puedes consultarlas en GitHub, tcturr9. Trabajan de forma abierta. También puedes consultar mi blog, bram.us, o usar el enlace corto que se encuentra a continuación para ver algunas propuestas sobre las que escribí.

Quiero agradecerles por su atención. Mi nombre es Bramuis. También tengo un blog, bram.us. También estoy en Twitter, en bramusblog. Gracias. ♪♪♪