¡Funciones Futuras de JS?!

Rate this content
Bookmark

¿Curioso por saber cuáles son algunas de las posibles características de JS que se están desarrollando en este momento?

¡Estás en el lugar correcto! Esta masterclass te guiará a través de estas características con ejemplos de código y algunas ideas de las notas de la reunión del TC39 sobre ellas.

28 min
20 Jun, 2022

Video Summary and Transcription

Bienvenido a las funciones futuras de JavaScript, que incluyen propuestas para operaciones de matrices, expresiones de lanzamiento, registros y TPUs, operadores de canalización y más. La masterclass cubre la introducción de afirmaciones de tipo para archivos importados, operaciones de matrices no mutables y la simplificación del manejo de errores. También explora el concepto de inmutabilidad con registros y TPUs, y el uso del operador de canalización para simplificar el código. Otras propuestas incluyen Map.implace, IteratorHelper, notación de segmento, anotaciones de tipo, Array UNIQBY, rangos de números y la propuesta Function 1.

Available in English

1. Introduction to JavaScript Proposals

Short description:

Bienvenidos a las características futuras de JavaScript. Repasaremos diferentes propuestas desde la etapa 0 hasta la etapa 3. El proceso TC39 incluye diferentes etapas, desde la Etapa 0 hasta la Etapa 4. Sumergámonos y sorprendámonos con algunas de estas propuestas, comenzando con la Etapa 3. Una propuesta trata de encontrar valores desde el final de un array. Otra propuesta trata de encontrar el último índice. La propuesta sugiere agregar métodos convenientes al objeto array. La propuesta ha sido discutida y se han sugerido diferentes nombres. La implementación se puede encontrar en la fuente de Chromium.

Hola, JS Nation. Bienvenidos a las características futuras de JavaScript. En esta charla, repasaremos diferentes propuestas desde la etapa 0 hasta la etapa 3, entenderemos por qué existen, qué intentan resolver y, con suerte, se implementarán en todos los entornos de JavaScript.

Soy Hemant. Soy un Gerente de Ingeniería aquí en PayPal, un delegado de TC39, un experto desarrollador de Google para el dominio web y de pagos. Puedes encontrarme en Twitter como Newman o encontrarme en html.com. ECMA International tiene muchas comunidades técnicas, de las cuales TC39 es la comunidad de ECMAScript, que es responsable de la especificación que JavaScript implementa. El proceso TC39 incluye diferentes etapas, desde la Etapa 0 hasta la Etapa 4, donde la Etapa 4 está finalizada e implementada en diferentes entornos, y la Etapa 1 es más como una idea básica de lo que es la propuesta. En esta charla, iremos desde la Etapa 0 hasta la Etapa 3 y veremos diferentes propuestas.

Si observamos el estado actual de las propuestas, en la Etapa 0 tenemos 18 propuestas. En la Etapa 1 tenemos 91 propuestas, en la Etapa 2 tenemos 22 y en la Etapa 3 tenemos 17, y en la Etapa 4 tenemos 59 propuestas. Sumergámonos y sorprendámonos con algunas de estas propuestas, comenzando con la Etapa 3.

Supongamos que tenemos un array de objetos y quieres encontrar un valor particular desde el final del array. ¿Qué harías? Probablemente invertirías ese array y harías una búsqueda. En este caso, estamos tratando de encontrar los valores que no son divisibles por 2. Y en este caso obtuvimos el valor 3, pero tuvimos que invertir el array y luego hacer una búsqueda. ¿Qué tal si tuviéramos un método conveniente que dijera array.findFromLast, array.findLast, aquí está la condición, dame el elemento. ¿Y si quisieras encontrar el último índice? Nuevamente harías una inversión y harías un find.index, y tomarías la longitud del array y le restarías 1 y restarías ese valor de lo que encontramos si el resultado coincide para encontrar el índice. En este caso, el valor fue 2. Supongamos que la condición no se cumple, donde estamos buscando el número 42. El valor debería haber sido -1, pero es 4. ¿Qué tal si tuviéramos un método que dijera array.findLastIndex, y cuando se cumpla la condición, encontrará el índice si está presente, y si no, dará -1. ¿No sería conveniente? Aquí a la izquierda hay un comentario de uno de los problemas en GitHub para esta propuesta donde la idea era discutir y proponer nombres. Como puedes ver, algunos de los nombres que surgieron en el problema fueron findRight, findIndexRight, findLast, findIndexLast, findEnd, findIndexEnd, y así sucesivamente. Finalmente, tenemos findLast y last, findLastIndex como la propuesta de hoy. En el lado derecho podemos ver una implementación de la fuente de Chromium que dice fastArray findLast. Si quieres abrir la especificación, puedes hacer una asignación uno a uno a cada una de esas líneas en este código para entender cómo se implementa la especificación. Por ejemplo, en el comentario donde dice 4, eso es el punto cuatro en la especificación que dice que k sea longitud menos uno, y ahí es donde tenemos la implementación exacta aquí. Eso es findLast y findLastIndex. Luego tenemos la afirmación de importación.

2. Import Assertion and JSON Modules

Short description:

Esta propuesta introduce una forma de afirmar el tipo de archivos importados en JavaScript. Permite declaraciones explícitas de tipo al importar archivos JSON, JavaScript o WebAssembly, lo que proporciona mayor seguridad y claridad en el código. Además, existen propuestas separadas para los módulos JSON y la desvinculación de los módulos JSON de las afirmaciones de importación. Estas propuestas sufren modificaciones, discusiones y decisiones durante la fase de propuesta. Es importante mantenerse actualizado sobre el progreso de estas propuestas, y una charla recomendada de Julia en GSNation brinda información sobre cómo funcionan los módulos de JS desde la perspectiva de un navegador.

Este tipo de propuesta proporciona una forma de afirmar el tipo que estamos importando. Por ejemplo, en este caso, estamos diciendo importar json de foo.json, afirmar tipo json. Estamos diciendo que esto es de tipo json, y si estuvieras usando importaciones dinámicas, dirías importar foo.json y afirmar tipo json cuando estés haciendo una importación dinámica, y si tienes un JavaScript que exporta un valor y quieres exportar ese valor desde tu archivo, podríamos decir exportar valor desde foo.js que exporta ese valor y luego estás afirmando que el tipo es JavaScript.

Y finalmente, podrías usar tipo WebAssembly y esto también se puede usar en la etiqueta de script. Puede que te preguntes por qué debería usar una afirmación de tipo. ¿Por qué necesito esta cosa en línea? ¿Por qué no simplemente importar JSON de foo.json? Bueno, simplemente confiar en el tipo MIME para determinar si es JSON o no causa un error de seguridad. Hay muchas preocupaciones en cuanto a la seguridad al importar un archivo aleatorio. Y luego tienes que asegurarte de afirmar que esto es de tipo JSON y si es algo diferente a JSON, lanzará un error y dirá: `Oye, no sé porque estoy tratando de afirmar que esto es un archivo JSON y no lo es`, lo que mantiene el código más seguro y nos brinda una forma fácil de expresar en línea qué tipo estamos importando realmente.

De manera similar, tenemos módulos JSON, que es muy similar a lo que vimos anteriormente, puedes importar JSON como módulos y tener esta afirmación de tipo. Pero puede que te preguntes por qué dos propuestas diferentes. ¿Es muy similar a lo que acabamos de ver anteriormente? Bueno, si profundizas en las notas de la reunión, puedes notar aquí que hubo una discusión y la decisión que se tomó fue decoupling JSON modules, por lo que pasa a la etapa dos y luego avanza a diferentes estados, ¿verdad? Esto es algo común que sucede durante la fase de una propuesta, puede modificarse, cambiar, ramificarse en dos propuestas diferentes, e incluso puede ser descartada y rechazada por muchas razones. Así que aquí vimos que el módulo JSON formaba parte de la afirmación de importación, pero se convirtió en una propuesta independiente para acelerar rápidamente hacia la finalización. Definitivamente no te pierdas esta charla de Julia, que forma parte de GSNation esta vez y ella habla sobre cómo funcionan los módulos JS desde la perspectiva de un navegador. Ella es miembro de TC39, por supuesto, e implementadora en Firefox, esta charla es imprescindible si quieres saber más sobre cómo funcionan los módulos JSON.

3. Change Array by Copy and Array.fromAsync

Short description:

La propuesta 'Change Array by Copy' permite realizar operaciones no mutables en arrays, como revertir, ordenar, dividir y agrupar. Estas operaciones devuelven los resultados deseados sin modificar el array original. Además, la propuesta introduce el método 'Array.fromAsync', que simplifica la conversión de generadores asíncronos y promesas en arrays.

La otra propuesta que tenemos es Change Array by Copy. Como su nombre indica, estás cambiando un array mediante una copia. Veamos algunos ejemplos aquí. Digamos que tienes una secuencia, un array con uno, dos, tres y luego dices two reversed, por supuesto, obtienes tres, dos, uno, pero curiosamente, la secuencia sigue siendo la misma. No estamos mutando la secuencia y ahí es donde es muy útil cuando no estás mutando el array pero aún así obtienes el reverso del array.

De manera similar, tienes sort, two sorted, donde quieres ordenar, digamos en este caso, quieres y podrías decir out of order two sorted, obtienes el array ordenado pero el array original permanece igual. Y tenemos el método bit donde si quieres hacer un cambio en el array. En este caso, la corrección necesaria es el array donde tenemos uno, uno y tres y queremos tener 42 en el índice uno en lugar de uno. Entonces decimos correction needed con 142, obtenemos 142, tres, pero el array original permanece igual, es decir, uno, uno, tres.

Supongamos que quieres splice. También podrías llamarlo two spliced. Aquí tenemos two-on-two, por lo que obtenemos 5, 4, 1, 0 a partir de un array que era 5, 4, 3, 2, 1, 0. Así que hacemos splice pero el array original de entrada permanece igual y no se cambia. Este es un método muy conveniente. Tenemos array groupby y array groupby to map. Digamos que tenemos un inventario con verduras y frutas. En este ejemplo, con diferentes cantidades. Luego podrías simplemente decir inventory.group by type y obtendrías un objeto que tiene las claves como fruta y verduras y los valores son arrays de los valores respectivos del inventario. Luego tenemos inventory.groupby to map que hace algo muy similar a lo que groupby aborda, pero devuelve un mapa. Así que podemos hacer todas las operaciones de mapa en el valor de retorno a diferencia de inventory.groupby que te da un objeto, aquí obtienes un mapa. Esto es conveniente para poder hacer todas las operaciones de mapa. Y esto tiene muchos casos de uso y es muy útil.

A continuación, tenemos la etapa dos. Digamos que tenemos un generador que devuelve múltiplos de dos. Y si quisieras convertir eso en un array, ¿qué harías? Hoy en día tomarías un array y usarías una sintaxis for of await y la usarías en el generador y seguirías agregándola al array y probablemente obtendrías un array. Básicamente, convirtiéndolo en un array. Entonces, ¿qué pasa si tuviéramos un método fácil? Array from async. Le das un generador asíncrono, esperas en él y lo que obtienes es un array. ¿No haría eso la vida más fácil con solo esta línea, que es súper conveniente? Y sí, si estás pensando en promesas, bueno, podríamos hacer lo mismo que hicimos en el ejemplo anterior. Si tu generador está devolviendo promesas y luego quieres convertir eso en un array de promesas, simplemente podrías decir async from array, generar promesas, esperar en ello y obtendrías un array.

4. Throw Expressions

Short description:

Esta propuesta introduce las expresiones throw, permitiendo lanzar errores en línea basados en condiciones. Simplifica el manejo de errores y las afirmaciones, proporcionando un código más conciso y legible. Además, permite lanzar errores dentro de los cuerpos de las funciones, operadores lógicos y expresiones condicionales. La propuesta cubre varios casos de uso, como valores inválidos, codificación no compatible y evitar métodos específicos.

Esto facilita mucho la vida si estás trabajando con generadores y operadores asíncronos y tratando de convertirlos en un array. Entonces es async from an array. Es muy similar a un array.from donde puedes pasar un objeto que es como un array y convertirlo en un array si le das una longitud. Y de manera similar, es una extensión de eso que dice array from async en lugar de solo array from y pasarlo a un objeto.

La siguiente propuesta que tenemos son las expresiones throw. Digamos que tenemos una función que se llama guardar, y recibe un parámetro. Y qué pasa si el usuario no pasa un parámetro o qué pasa si el usuario pasa un parámetro que no quieres que pase. Probablemente verificarías el tipo y harías todas las afirmaciones necesarias y luego lanzarías si no coincide con tu expectativa. ¿Qué pasa si esto se puede hacer como una expresión en línea? En este caso, dices nombre de archivo igual a throw new error type error argumento requerido. Esto lanzaría automáticamente si ese argumento no se pasa a la función guardar. Correcto. También podrías tenerlo dentro de los cuerpos de las funciones de error. En este caso, tienes un AST sin sintaxis que tiene un método width como uno de sus claves. Si alguien intenta usar el método width, entonces podrías lanzar diciendo que evite usar el método width en las declaraciones. Correcto. Luego también puedes usarlo en operadores lógicos. Digamos que tienes un getter y un setter dentro de la clase. Y para el setter, podrías decir que si no se pasa el valor, entonces podrías lanzar diciendo que es un valor inválido. Correcto. Si no es el valor que estás buscando. Y también puedes usarlo en expresiones condicionales. Y si todas tus expresiones condicionales se agotan, simplemente puedes lanzar en cualquier lugar diciendo que es una codificación no compatible. En este caso, tienes los diferentes codificadores desde usar el deber de a hasta etc. Eso son las expresiones throw.

5. Propuesta de Registros y TPUs

Short description:

Los registros y TPUs aportan inmutabilidad a JavaScript. La sintaxis con un hash seguido de una R representa un objeto, mientras que un hash seguido de un array representa un array. Es posible convertir objetos en registros y arrays en TPUs utilizando el constructor de registros y el método TPU from. La charla de Robin Richard proporciona información detallada sobre los registros y TPUs como estructuras de datos inmutables en JavaScript.

Los registros y TPUs son una de las propuestas más importantes e interesantes en el pasado reciente, lo que trae inmutabilidad a JavaScript. Todos sabemos que cuando hacemos igualdades estrictas de dos objetos con los mismos pares clave-valor. Son falsos. Incluso lo mismo ocurre con otros con los mismos valores. Pero una igualdad estricta dice que es falso. Pero si tienes esta sintaxis donde tienes un hash seguido de una R, para lo que parece un objeto, dices, y tu hash seguido de lo que parece un array. Ambos se igualan a sí mismos como verdaderos. Y eso es según la sensación donde podrías decir tipo de hash, que parece un objeto, que es inmutable. Es un registro. Y tipo de hash, que parece un array, que es inmutable. Nuevamente, es un TPU. Entonces, si tienes un objeto que quieres convertir en un registro, solo tienes que llamar al constructor de registros y obtendrás el registro de vuelta. O si tienes un array que quieres convertir en TPU, puedes usar TPU from, pasarle un array y obtendrás TPU de vuelta, y definitivamente mira la charla de Robin Richard sobre registros y TPUs como estructuras de datos inmutables en JavaScript, donde profundiza en detalle. También es un delegado de TC39. Y esto es parte de la serie de charlas de JS Nation también.

6. Operador de canalización y propuestas competidoras

Short description:

El operador de canalización simplifica el código anidado y complicado al permitir una sintaxis más sencilla. Reemplaza la anidación compleja con un formato conciso y legible utilizando el símbolo de tubería y la notación de porcentaje dólar-dólar. Este operador facilita la lectura, comprensión y modificación del código. Actualmente, existen dos propuestas competidoras para los operadores de canalización, hack y fsharp pipelines, y una tercera propuesta que ha sido retirada.

A continuación, tenemos el operador de canalización. Digamos que tenemos este ejemplo, que es Funzal logging chalk.dim, object.keys de las variables de entorno, mapeando o variables de entorno y tomando los pares clave-valor y uniéndolos. ¿No es un poco confuso? Veamos cómo el cerebro probablemente intentaría evaluar esto. Diría object.keys en el lado izquierdo, luego tenemos map en el lado derecho y tenemos join en el lado derecho. Y la plantilla en ambos lados, los caracteres de tilde y luego tenemos chalk.dim y luego tenemos Funzal log. Es mucha anidación y código complicado. ¿Qué tal si lo simplificamos? ¿Verdad? Veamos este ejemplo, donde solo tenemos object.keys de las variables de entorno, mapeamos las variables de entorno, devuélveme esta cadena y luego unimos. Y luego tienes esta sintaxis extraña que dice pipe y luego dice porcentaje dólar-dólar, donde el porcentaje básicamente es el valor que se evaluó en el paso anterior. Luego decimos chalk.dim porcentaje. Nuevamente, ese porcentaje se reemplaza por el valor que se evaluó en el paso anterior. Y finalmente, console.log porcentaje. Ese es el valor que se evaluó en el paso anterior. De esta manera, es fácil de leer y entender, también para cambiar diferentes métodos. Y eso es un operador de canalización. Hay dos propuestas competidoras para los operadores de canalización, hack y fsharp pipelines. Pero hubo otra propuesta que era una mezcla inteligente de estas dos propuestas. Pero esa ha sido retirada. Esto es lo que tenemos actualmente hoy para el operador de canalización.

7. Propuesta Map.implace

Short description:

La propuesta Map.implace simplifica el proceso de verificar si una clave existe en un mapa antes de establecerla. Evita búsquedas innecesarias al proporcionar métodos convenientes para insertar y actualizar valores dentro del mapa.

Map.implace es otra propuesta interesante donde, digamos, tienes un mapa y quieres verificar si la clave existe dentro del mapa o no antes de establecerla, lo cual es un caso de uso común, ¿verdad? Dirías, si noMap tieneClave, entonces mapa.establecerClaveValor, luego haces mapa.obtener y haces cosas. ¿Qué tal si pudiera ser más simple? Y dices, mapa.implaceClave, insertar, valor, hacer, hacer eso. ¿Verdad? Básicamente verificaría si está o no y luego insertaría. Y probablemente también habría hecho esto. mapa.obtener obtener el valor antiguo. Si el valor antiguo no está allí, entonces establece el valor y establece el valor actualizado. ¿Qué tal si pudiéramos evitar estas dos búsquedas y hacerlo más simple? Podrías hacer mapa.implace y poner un, has puesto una clave allí y tienes métodos de actualización e inserción dentro de implace y podrías operar según tu caso de uso y mapa.implace hace más simple al evitar esas búsquedas adicionales.

8. Propuesta IteratorHelper

Short description:

La propuesta IteratorHelper proporciona una forma de realizar varias operaciones en iteradores, como mapeo, filtrado, toma, eliminación e iteración sobre pares de índices. Simplifica el proceso de trabajar con iteradores asíncronos y proporciona métodos convenientes como forEach, every, some y find. Esta propuesta se encuentra actualmente en la etapa uno.

IteratorHelper es una propuesta extensa y permíteme tratar de resumirla en esta diapositiva y mostrar las diferentes cosas que proporciona IteratorHelper. ¿De acuerdo? Digamos que tienes una función, que es una función generadora, que genera todos los números naturales y, por supuesto, harías result.next, y seguirías obteniendo esos números. ¿Qué pasaría si quisieras hacer un mapeo en este iterador? Sí. Esta propuesta habla de eso. Podrías hacer un mapeo. ¿Quieres hacer un filtrado? Sí, podríamos hacer un filtrado. Y aquí tienes un ejemplo, tienes un iterador asíncrono de URLs, obtienes un iterador asíncrono, luego haces un mapeo en él, luego haces un await fetch y luego obtienes la respuesta en formato JSON y finalmente haces un two array para tener un array de todas esas respuestas como JSON, ¿verdad? Y luego quieres hacer una toma, si quieres ser un poco perezoso, y tomar solo tres de ellos de esa enorme serie que este generador está proporcionando, podrías hacer eso. Si quieres eliminar tres, podrías hacer eso. Si quieres tener un, si haces dot values, obtienes ese iterador y quieres hacerlo en pares de índices, entonces obtienes un par de índices, eso sería como un cero x y uno y y dos z y así sucesivamente. Muy bien, y luego también podrías hacer un for each, every, some, find, todo esto en valor, eso es IteratorHelper, donde facilita la vida para iterar sobre todos estos diferentes métodos y tener un iterador asíncrono. Ahora estamos en la etapa uno.

9. Notación de rebanado de matrices

Short description:

La notación de rebanado en las matrices de JavaScript permite extraer fácilmente elementos basados en rangos de índices. Proporciona una forma más intuitiva de obtener elementos específicos, ya sea desde el principio, el final o cualquier posición en la matriz. Esta característica se utiliza ampliamente en otros lenguajes de programación y sería una adición valiosa a JavaScript.

Digamos que tienes una matriz de a, b, c, d y quieres hacer array.slice uno, tres. ¿Qué obtenemos? ¿Es b, c o b, c, d? Digamos que tenemos una matriz de a, b, c, d nuevamente, y hacemos array.slice. ¿Qué obtenemos? a, b, c o d, ¿verdad? Bueno, esto puede ser más fácil con la notación de rebanado, que es un poco intuitiva, donde dices, matriz 3 dos puntos, eso significa dame d, y si digo 1 dos puntos 3, eso es b, c, dame b, c. Si la matriz es de menos 2, comenzando desde el final, dame a, b. Matriz de menos 10, que está fuera de límites, dame una matriz vacía. Entonces, si vienes del mundo de Python, probablemente hayas usado esto mucho, y muchos otros lenguajes también proporcionan esta funcionalidad, y sería muy bueno ver esto en JavaScript.

10. Propuesta de Anotación de Tipos

Short description:

La anotación de tipos es una propuesta que introduce una sintaxis similar a TypeScript para agregar anotaciones a los métodos. Permite declaraciones de tipo explícitas, incluyendo parámetros opcionales y valores predeterminados. Esta propuesta está en constante evolución y vale la pena explorarla en más detalle.

La anotación de tipos es una propuesta importante y ha generado mucho interés en el dominio público, ya que muchas personas están acostumbradas a usar TypeScript en estos días en términos de uso de tipos. Esto es básicamente de lo que trata la propuesta. Si estás acostumbrado a JS doc, probablemente hayas usado algo como esto, donde decías, hey, aquí está mi función string, string, string, ¿verdad? Y así es como probablemente lo habrías puesto en tu JS doc. Y con esta propuesta, se parece mucho a la sintaxis de TypeScript aquí, donde dirías que p1 es string, p2 es opcional y es un string, y p2, p3 son opcionales en string, y p4 tiene un valor predeterminado de test. Y esta función devuelve un string, ¿verdad? Entonces, la anotación de tipos nos brinda este tipo de sintaxis donde puedes agregar las anotaciones a tus métodos. Y es una propuesta en constante evolución, y es muy interesante leer los detalles al respecto.

11. Propuesta de Array UNIQBY

Short description:

Array UNIQBY te permite obtener valores únicos de un array con duplicados, incluyendo objetos y propiedades específicas.

A continuación, tenemos Array UNIQBY. Como su nombre indica, supongamos que tienes un array de, en este caso, tenemos 1, 2, 3, 3, 2, 1, y hacemos un UNIQBY, obtenemos 1, 2, 3. Pero se vuelve interesante si el array tiene objetos, ¿verdad? Y quieres hacer UNIQBY UID, entonces podrías hacer eso. O quieres hacer un UNIQBY que tome un ID UID, quieres hacer esos pares y probablemente obtener UNIQBY, también podrías hacer eso. También podrías hacer eso. Así que UNIQBY es un método muy conveniente para obtener valores únicos de un array que tiene duplicados.

12. Propuesta de Rango de Números y Rango de BigInt

Short description:

La propuesta de rango de números y rango de BigInt introduce un método de rango para BigInt y números. Permite crear rangos de números y filtrarlos según condiciones específicas.

La propuesta de rango de números y rango de BigInt es una propuesta que proporciona un método de rango en BigInt y números. En el primer ejemplo, tenemos un bucle for donde el rango de BigInt comienza desde 0 hasta 43N, lo cual limita los números de 0 a 42N. Si te refieres al ayudante de iterador que vimos anteriormente, donde puedes hacer un rango de números desde 0 hasta el infinito, tomar, digamos, mil de ellos y filtrar los números que no son divisibles por 3, y luego hacer un array de 2, obtendrías esos números.

O digamos que tienes un generador que genera solo números pares desde 0 hasta el infinito y solo quieres los números impares, digamos, del 1 al 99. Podrías hacer un rango de números del 1 al 100 de 2, y obtendrías esos números. Así que ese es el método de rango en números y rango de inicio.

13. Propuesta de la Función 1

Short description:

La propuesta de la Función 1 permite ejecutar una función solo una vez, devolviendo el mismo valor al invocarla posteriormente. Se han generado interesantes discusiones en torno al código recursivo y las operaciones asíncronas. Se recomienda leer los problemas y contribuir con opiniones.

La Función 1 es otra propuesta interesante. Digamos que tienes una función que quieres ejecutar solo una vez por diversas razones, y luego digamos en este ejemplo, llamas a una función una vez y llamas a F.1's como F1's y F1's de 3 imprimiría 3 y devolvería 6. Ese es el registro de consola que está en la función. Pero F, de nuevo, si llamas a la misma función, F1's con 3, no imprime nada pero devuelve 6. F1's de 2, también devuelve 6, no imprime nada, ¿verdad? Así que se ejecuta solo una vez y si sigues ejecutándolo, nuevamente, obtienes el mismo valor que se evaluó cuando se invocó por primera vez. Hay algunas discusiones interesantes en el problema de la función 1. Digamos que tienes una función que es un código recursivo y haces G.una vez, y luego llamas a G una vez, ¿qué debería suceder? O digamos que tienes una función, g de x, que hace cosas que lleva mucho tiempo y tiene operaciones asíncronas en ella. Luego dices, async G una vez y obtienes una promesa 1 y vuelves a hacer async G una vez más, obtienes una promesa 2, ¿qué debería suceder? Estas son algunas de las discusiones interesantes que ocurren en la propuesta y es una buena práctica ir y leer los problemas e intentar investigar y comprender qué está sucediendo y también podríamos contribuir con tus opiniones. String.cook es otra propuesta interesante donde digamos que tienes una secuencia Unicode aquí, por ejemplo, u61, haces string.raw, obtienes lo mismo de vuelta. Haces un string.raw y luego pasas un objeto que tiene una clave raw y que tiene una matriz de valor de esa secuencia Unicode, obtendrías una A. Entonces, si haces un registro de consola, probablemente obtendrías A para esta secuencia Unicode. ¿Qué pasaría si tuviéramos string.cook en lugar de decir string.raw pasando un objeto que es raw como su clave y el valor es una matriz con ese valor que quieres convertir en una cadena, bueno, es complejo, ¿verdad? A veces puedes pasar por alto que hay esta propiedad con string. Que se comporta de una manera si pasas un objeto con raw como su clave. Más bien, si tuvieras string.cook y simplemente pasaras slash u61, obtendrías A. Entonces, esta propuesta simplifica y hace que tu código sea menos propenso a errores mientras operas con string.raw. DoExpression es otra propuesta que simplifica las cosas al evaluar y asignar valores a, digamos, valores de retorno o variables. En este ejemplo, es un ejemplo de JSX donde tienes una doExpression que dice si está conectado, devuelve un botón de desconexión. Si no, devuelve un botón de inicio de sesión. Esta es una construcción bastante común en JSX, ¿verdad? Probablemente usarías un operador condicional o intentarías devolver este componente aquí. Simplemente estamos poniendo una doExpression que evalúa lo que está escrito, lo que se evalúa como verdadero es el valor que se devuelve. Veamos otro ejemplo simple aquí. Digamos que tenemos let x en una doExpression, y decimos que let temp es la llamada a la función. Y luego decimos temp en temp más uno. Entonces, temp en temp más uno es lo que se evalúa se asigna a la variable x. De manera similar, si tienes x do con else, else, else, cualquier condición que coincida y si se llama al método F o G o H, cualquier valor de retorno de esos métodos se asigna a x. Haciendo así más simple en términos de asignar los valores a las variables cuando hay una construcción anidada y hay demasiadas cosas para devolver y evaluar. En una línea similar, tenemos async doExpression. Digamos que tenemos operaciones asíncronas dentro del bloque do. Entonces podríamos decir async do y decir fetch a thing y devolver una respuesta JSON y buscar otra cosa, obtener una respuesta JSON, ponerla en promise.all y evaluar y obtener el resultado. Pattern matching es otra propuesta interesante donde digamos que estás obteniendo algún servicio JSON en el ejemplo y obtienes un resultado y haces una coincidencia en matchable y luego dices cuando digamos que mi estado es 404, podría decir JSON no encontrado o simplemente podría tomar el estado y hacer una verificación yo mismo y decir si el estado es mayor que 400 entonces lanzar un error de solicitud y así sucesivamente. Y la aplicación parcial si te gusta la programación funcional entonces realmente sabrías qué es una aplicación parcial, digamos que tienes una función que toma n cantidad de argumentos y estás pasando una cantidad parcial de argumentos en lugar de pasar todo y más adelante pasarías el otro argumento a medida que tu función avanza y en este ejemplo podrías hacer una aplicación parcial desde la izquierda o una aplicación parcial desde la derecha o podrías hacer una aplicación parcial de cualquier argumento a la derecha y ahí es donde entra en acción la aplicación parcial y el signo de interrogación es el marcador de posición que dice, `hey, este argumento se pasará más adelante`. Finalmente, estamos en la etapa cero donde tenemos esta sintaxis de enlace digamos que tenemos un objeto seguido de dos puntos dobles que es la sintaxis de enlace y la función que básicamente es igual a objeto.punto función.punto enlazar objeto digamos que si fueras a usar console log como una variable hace unos años en la historia probablemente harías un console.punto log enlazar console para que el objeto esté vinculado al contexto correcto. De manera similar, si tienes un objeto seguido de esto sintaxis de enlace valor de función que es igual a función.punto llamar valor de objeto y si fueras a usar esta sintaxis de enlace objeto.punto valor de función que es igual a decir que objeto.punto función.punto llamar valor de objeto. Entonces veamos un ejemplo rápido para hacerlo mucho más simple. Digamos que tienes una biblioteca de iteradores que dice que te da map take while y for each y tenemos una función getPlayer que te da todos los jugadores y estás mapeando a través de esos jugadores aunque no sean mapeables haces un map.punto llamar y luego obtienes los caracteres luego haces un take while.punto llamar y obtienes las fortalezas que son mayores que 100 y finalmente haces un for each.punto llamar para recorrerlos y registrar en la consola. Hubiera sido más simple usar esta sintaxis de enlace dirías getPlayer esta sintaxis de enlace mapearla con x.punto caracteres enlazarla con take while nuevamente obtener la fortaleza y hacer un for each, por lo que todo está enlazado correctamente el contexto de ejecución y obtienes el valor que esperas. El último que tenemos es string characters digamos que tenemos una cadena con un guion bajo guion bajo guion abc guion bajo guion bajo y los caracteres que tenemos son un guion bajo guion bajo podríamos decir string.punto trim characters que encontraría todos esos caracteres para recortarlos para que solo tengamos abc y luego podríamos hacer un string.punto trim characters podrías hacer un trim start que solo haría sabes recortar los caracteres al principio por lo que el guion bajo guion bajo se ha ido y lo que tenemos es abc guion bajo abc guion bajo guion bajo y si lo haces desde el final se recorta el guion bajo guion bajo del final por lo que eso es recortar caracteres de cadena eso es todo lo que tenemos gente y espero que les hayan gustado todas las propuestas y estoy muy emocionado por estas propuestas y espero que todas ellas lleguen a diferentes entornos de JavaScript y aprovechemos sus beneficios. Gracias.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Scaling Up with Remix and Micro Frontends
Top Content
Do you have a large product built by many teams? Are you struggling to release often? Did your frontend turn into a massive unmaintainable monolith? If, like me, you’ve answered yes to any of those questions, this talk is for you! I’ll show you exactly how you can build a micro frontend architecture with Remix to solve those challenges.
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Full Stack Components
Top Content
Remix is a web framework that gives you the simple mental model of a Multi-Page App (MPA) but the power and capabilities of a Single-Page App (SPA). One of the big challenges of SPAs is network management resulting in a great deal of indirection and buggy code. This is especially noticeable in application state which Remix completely eliminates, but it's also an issue in individual components that communicate with a single-purpose backend endpoint (like a combobox search for example).
In this talk, Kent will demonstrate how Remix enables you to build complex UI components that are connected to a backend in the simplest and most powerful way you've ever seen. Leaving you time to chill with your family or whatever else you do for fun.
JSNation Live 2021JSNation Live 2021
29 min
Making JavaScript on WebAssembly Fast
Top Content
JavaScript in the browser runs many times faster than it did two decades ago. And that happened because the browser vendors spent that time working on intensive performance optimizations in their JavaScript engines.Because of this optimization work, JavaScript is now running in many places besides the browser. But there are still some environments where the JS engines can’t apply those optimizations in the right way to make things fast.We’re working to solve this, beginning a whole new wave of JavaScript optimization work. We’re improving JavaScript performance for entirely different environments, where different rules apply. And this is possible because of WebAssembly. In this talk, I'll explain how this all works and what's coming next.
React Summit 2023React Summit 2023
24 min
Debugging JS
As developers, we spend much of our time debugging apps - often code we didn't even write. Sadly, few developers have ever been taught how to approach debugging - it's something most of us learn through painful experience.  The good news is you _can_ learn how to debug effectively, and there's several key techniques and tools you can use for debugging JS and React apps.

Workshops on related topic

React Day Berlin 2022React Day Berlin 2022
86 min
Using CodeMirror to Build a JavaScript Editor with Linting and AutoComplete
Top Content
WorkshopFree
Using a library might seem easy at first glance, but how do you choose the right library? How do you upgrade an existing one? And how do you wade through the documentation to find what you want?
In this workshop, we’ll discuss all these finer points while going through a general example of building a code editor using CodeMirror in React. All while sharing some of the nuances our team learned about using this library and some problems we encountered.
TestJS Summit - January, 2021TestJS Summit - January, 2021
173 min
Testing Web Applications Using Cypress
WorkshopFree
This workshop will teach you the basics of writing useful end-to-end tests using Cypress Test Runner.
We will cover writing tests, covering every application feature, structuring tests, intercepting network requests, and setting up the backend data.
Anyone who knows JavaScript programming language and has NPM installed would be able to follow along.
Node Congress 2023Node Congress 2023
63 min
0 to Auth in an Hour Using NodeJS SDK
WorkshopFree
Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool.
We will enhance a full-stack JS application (Node.JS backend + React frontend) to authenticate users with OAuth (social login) and One Time Passwords (email), including:- User authentication - Managing user interactions, returning session / refresh JWTs- Session management and validation - Storing the session for subsequent client requests, validating / refreshing sessions
At the end of the workshop, we will also touch on another approach to code authentication using frontend Descope Flows (drag-and-drop workflows), while keeping only session validation in the backend. With this, we will also show how easy it is to enable biometrics and other passwordless authentication methods.
Table of contents- A quick intro to core authentication concepts- Coding- Why passwordless matters
Prerequisites- IDE for your choice- Node 18 or higher
React Summit US 2023React Summit US 2023
96 min
Build a powerful DataGrid in few hours with Ag Grid
WorkshopFree
Does your React app need to efficiently display lots (and lots) of data in a grid? Do your users want to be able to search, sort, filter, and edit data? AG Grid is the best JavaScript grid in the world and is packed with features, highly performant, and extensible. In this workshop, you’ll learn how to get started with AG Grid, how we can enable sorting and filtering of data in the grid, cell rendering, and more. You will walk away from this free 3-hour workshop equipped with the knowledge for implementing AG Grid into your React application.
We all know that rolling our own grid solution is not easy, and let's be honest, is not something that we should be working on. We are focused on building a product and driving forward innovation. In this workshop, you'll see just how easy it is to get started with AG Grid.
Prerequisites: Basic React and JavaScript
Workshop level: Beginner
Node Congress 2023Node Congress 2023
49 min
JavaScript-based full-text search with Orama everywhere
Workshop
In this workshop, we will see how to adopt Orama, a powerful full-text search engine written entirely in JavaScript, to make search available wherever JavaScript runs. We will learn when, how, and why deploying it on a serverless function could be a great idea, and when it would be better to keep it directly on the browser. Forget APIs, complex configurations, etc: Orama will make it easy to integrate search on projects of any scale.
Node Congress 2022Node Congress 2022
128 min
Back to the basics
WorkshopFree
“You’ll never believe where objects come from in JavaScript.”
“These 10 languages are worse than JavaScript in asynchronous programming.”
Let’s explore some aspects of JavaScript that you might take for granted in the clickbaitest nodecongress.com workshop.
To attend this workshop you only need to be able to write and run NodeJS code on your computer. Both junior and senior developers are welcome.
Objects are from Mars, functions are from Venus
Let’s deep-dive into the ins and outs of objects and then zoom out to see modules from a different perspective. How many ways are there to create objects? Are they all that useful? When should you consider using them?
If you’re now thinking “who cares?“, then this workshop is probably for you.
Asynchronous JavaScript: the good? parts
Let’s have an honest conversation.
I mean… why, oh why, do we need to bear with all this BS? My guess is that it depends on perspective too. Let’s first assume a hard truth about it: it could be worse… then maybe we can start seeing the not-so-bad-even-great features of JavaScript regarding non-blocking programs.