5 características de JavaScript de vanguardia para mejorar su código

Las características de JavaScript siempre están creciendo y recibiendo otras nuevas como operadores, construcciones de sintaxis, expresiones. Muchos de los que se han introducido en los últimos años y algunos de ellos ya son una segunda naturaleza, como la expresión de flecha gruesa o el operador de =>extensión de objetos ....

Las características de JavaScript comienzan como propuestas

Todas estas características de JavaScript comienzan como propuestas presentadas al TC 39. El Comité Técnico 39 se encarga de estandarizar:

el lenguaje de programación ECMAScript (JavaScript) de propósito general, multiplataforma e independiente del proveedor. Esto incluye la sintaxis, la semántica y las bibliotecas del lenguaje y las tecnologías complementarias que respaldan el lenguaje.

Hay muchas propuestas de JavaScript que podemos comenzar a agregar a nuestro flujo hoy, gracias a Babel, el compilador de JavaScript. Algunos de ellos ofrecen más claridad, como el separador numérico. Otros, como las doexpresiones, introducen la capacidad de mezclar condicionales complejos con etiquetas React JSX.

Veamos en este artículo 5 características de JavaScript que todavía están en las etapas de propuesta pero que podemos usar con Babel y mejorarán significativamente su experiencia de codificación.

Cada uno tiene un enlace a su página de Babel donde se puede ver cómo configurar Babel para usarlo, aunque las funciones de JavaScript propuestas aquí descritas ya están incluidas con Babel 7. Cada sección también tiene un enlace a su propuesta en la organización Ecma TC39 en GitHub.

Operador coalescente nulo

Propuesta: https://github.com/tc39/proposal-nullish-coalescing

Babel: https://babeljs.io/docs/en/next/babel-plugin-proposal-nullish-coalescing-operator.html

Esta propuesta de JavaScript describe un operador que permite proporcionar un valor alternativo en el lado derecho del operador cuando una variable o una propiedad de objeto no está definida. Si no está indefinido, usará el lado izquierdo del operador:

const maybeUndef = undefined;
const val = maybeUndef ?? 2021; 

Esto es similar a escribirlo como un operador ternario:

const maybeUndef = undefined;
const val = maybeUndef? maybeUndef: 2021; 

Tenga en cuenta que este operador no verifica que la var no exista. Esto arrojará un error:

const val = maybeUndef ?? 2021;  

Pero cuidado, este operador no es 100% como un operador ternario que devuelve el primer lado si la condición evaluada es verdadera. No evaluará valores que generalmente son falsos en JavaScript para false. Por ejemplo, no se considerará una cadena vacía false:

const someEmptyString = '';
const val = someEmptyString ?? 'fallback'; 

A diferencia de este operador coalescente nulo, se generaría un operador ternario fallbackcomo resultado de esta evaluación.

Operador de encadenamiento opcional

Propuesta: https://github.com/tc39/proposal-opcional-encadenamiento

Babel: https://babeljs.io/docs/en/next/babel-plugin-proposal-opcional-encadenamiento.html

Este operador también funciona en variables y propiedades de objetos: verifica si las propiedades anidadas que estamos recorriendo existen o no. Sin este operador, tenemos que verificar cada propiedad anidada:

const val = anObj && anObj.aProp && anObj.aProp.aNestedProp

Con el nuevo operador de encadenamiento opcional, podemos hacer algo como:

const val = anObj.aProp?.aNestedProp

Esto se ve mucho más claro y es más corto de escribir. Este operador también funciona con arreglos numéricos, por lo que es bueno trabajar con colecciones:

const val = anObj.anArray[0]?.someProp

Y podemos apilar múltiples operadores:

const val = anObj.anArray[0]?.someProp?.aNestedProp

¿Y si combinamos este con el anterior, coalescencia nula? Obtenemos una sintaxis que verifica que cada propiedad atravesada exista y, si no es así, proporciona un valor alternativo:

const val = anObj.anArray[0]?.someProp ?? 'someDefaultValue'

Si alguno de los valores no existe, devolverá someDefaultValue. La combinación de estos dos operadores es una excelente manera de reemplazar la función get de lodash .

operador de tubería

Propuesta: https://github.com/tc39/proposal-pipeline-operator

Babel: https://babeljs.io/docs/en/babel-plugin-proposal-pipeline-op e rator

Este operador es parte de varias funciones experimentales de JavaScript, y proporciona más legibilidad al encadenar varias funciones juntas. Considere la siguiente función:

Si necesitamos reutilizar estas transformaciones parciales que están encadenadas, podemos dividirlas en diferentes funciones y luego componer el resultado usándolas:

Lo raro de esto es que tenemos que empezar a leer esto desde abajo, la splitBySpacelínea, hacia arriba, para entender las transformaciones aplicadas a la cadena. Esto va en contra de nuestro flujo de lectura natural, de arriba a abajo. También terminamos con todos esos horribles paréntesis colgantes. Esto podría escribirse en una sola línea y no es mucho más bonito:

Aquí, tenemos que empezar a leer desde la función central hacia las funciones exteriores, o de derecha a izquierda, lo que es contrario a la intuición de la lectura occidental de izquierda a derecha.

El operador de canalización puede hacer que estas construcciones sean mucho más legibles y similares al encadenamiento que teníamos originalmente antes de mover las transformaciones a funciones separadas:

Ahora las transformaciones aplicadas se escriben de manera similar a nuestra forma de escribir, de arriba a abajo, son más claras de leer y no tenemos paréntesis colgando. ¡Éxito!

Separador numérico

Propuesta: https://github.com/tc39/proposal-numeric-separator

Babel: https://babeljs.io/docs/en/next/babel-plugin-proposal-numeric-separator.html

Este separador numérico es diferente a las otras características de JavaScript ya que no es un operador. Es una construcción de sintaxis que hace que los literales numéricos sean más legibles al crear una separación visual entre grupos de dígitos. Los literales numéricos grandes son difíciles de analizar y comprender rápidamente, especialmente cuando un dígito se repite varias veces. Por ejemplo:

const longNum = 1000000000000;

Es difícil de entender con una mirada rápida. Este separador lo hace más legible:

const longNum = 1_000_000_000_000;

Ahora podemos entender rápidamente que esto es un billón.

hacer expresiones

Propuesta: https://github.com/tc39/proposal-do-expressions

Babel: https://babeljs.io/docs/en/babel-plugin-proposal-do-expressions

La última de las nuevas funciones de JavaScript que veremos es una expresión que se puede evaluar. El resultado de esta expresión viene después de ejecutar un bloque que puede tener múltiples sentencias dentro. Podemos entender fácilmente las expresiones do si traducimos una expresión de operador ternario como esta:

const res = isCold( color )? 'light-blue': 'orange';

Escribiríamos la expresión equivalente do{}así:

const res = do {
    if (isCold( color)) {
        'light-blue';
    } else {
        'orange';
    }
};

Tenga en cuenta que no tenemos que devolver el valor ya que esta no es una función. Si bien en este caso particular, esto se puede escribir de manera más sucinta como un ternario, las expresiones do son mucho más poderosas y permiten múltiples declaraciones, por ejemplo:

const res = do {
    if (isCold( color)) {
        'light-blue';
    } else if (isHot( color)) {
        'orange';
    } else if (isRain( color)) {
        'purple';
    } else {
        'green';
    }
};

Donde esto es realmente poderoso es en JSX, donde podemos mezclarlo con sus etiquetas sin tener que calcular primero el resultado externamente. Por ejemplo, podríamos hacer lo siguiente si estuviéramos usando React para renderizar estos componentes:

Más propuestas de JavaScript

Cada día se discuten más propuestas para agregar características más interesantes al lenguaje JavaScript. Se puede leer una lista cada vez mayor de estas funciones de JavaScript propuestas en https://github.com/tc39/proposals#ecmascript-proposals. Las propuestas aquí están cerca de completarse y, por lo tanto, cerca de agregarse al estándar ECMAScript, como se explica en esta tabla que describe el proceso de aceptación.

Algunas de las nuevas características de JavaScript que exploramos en este artículo, como las expresiones do o el operador de canalización, son propuestas de la etapa 1, lo que significa que todavía tienen un camino por recorrer antes de convertirse en parte del estándar ECMAScript.