{"id":231970,"date":"2023-01-12T12:04:00","date_gmt":"2023-01-12T09:04:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=231970"},"modified":"2022-11-10T05:56:35","modified_gmt":"2022-11-10T02:56:35","slug":"5-caracteristicas-de-javascript-de-vanguardia-para-mejorar-su-codigo","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/5-caracteristicas-de-javascript-de-vanguardia-para-mejorar-su-codigo\/","title":{"rendered":"5 caracter\u00edsticas de JavaScript de vanguardia para mejorar su c\u00f3digo"},"content":{"rendered":"\n

Las caracter\u00edsticas de JavaScript siempre est\u00e1n creciendo y recibiendo otras nuevas como operadores, construcciones de sintaxis, expresiones. Muchos de los que se han introducido en los \u00faltimos a\u00f1os y algunos de ellos ya son una segunda naturaleza, como la expresi\u00f3n de flecha gruesa o el operador de =><\/code>extensi\u00f3n de objetos ....<\/code><\/p>\n

Las caracter\u00edsticas de JavaScript comienzan como propuestas<\/h2>\n

Todas estas caracter\u00edsticas de JavaScript comienzan como propuestas presentadas al TC 39. El Comit\u00e9 T\u00e9cnico 39<\/a> se encarga de estandarizar:<\/p>\n

\n

el lenguaje de programaci\u00f3n ECMAScript (JavaScript) de prop\u00f3sito general, multiplataforma e independiente del proveedor. Esto incluye la sintaxis, la sem\u00e1ntica y las bibliotecas del lenguaje y las tecnolog\u00edas complementarias que respaldan el lenguaje.<\/p>\n<\/blockquote>\n

Hay muchas propuestas de JavaScript que podemos comenzar a agregar a nuestro flujo hoy, gracias a Babel, el compilador de JavaScript<\/a>. Algunos de ellos ofrecen m\u00e1s claridad, como el separador num\u00e9rico. Otros, como las do<\/code>expresiones, introducen la capacidad de mezclar condicionales complejos con etiquetas React JSX.<\/p>\n

Veamos en este art\u00edculo 5 caracter\u00edsticas de JavaScript que todav\u00eda est\u00e1n en las etapas de propuesta pero que podemos usar con Babel y mejorar\u00e1n significativamente su experiencia de codificaci\u00f3n.<\/p>\n

Cada uno tiene un enlace a su p\u00e1gina de Babel donde se puede ver c\u00f3mo configurar Babel para usarlo, aunque las funciones de JavaScript propuestas aqu\u00ed descritas ya est\u00e1n incluidas con Babel 7. Cada secci\u00f3n tambi\u00e9n tiene un enlace a su propuesta en la organizaci\u00f3n Ecma TC39<\/a> en GitHub<\/a>.<\/p>\n

Operador coalescente nulo<\/h2>\n

\"5<\/a><\/p>\n

Propuesta: https:\/\/github.com\/tc39\/proposal-nullish-coalescing<\/a><\/p>\n

Babel: https:\/\/babeljs.io\/docs\/en\/next\/babel-plugin-proposal-nullish-coalescing-operator.html<\/a><\/p>\n

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\u00e1 definida. Si no est\u00e1 indefinido, usar\u00e1 el lado izquierdo del operador:<\/p>\n

const maybeUndef = undefined;\nconst val = maybeUndef ?? 2021; <\/code><\/pre>\n
Esto es similar a escribirlo como un operador ternario:<\/p>\n
const maybeUndef = undefined;\nconst val = maybeUndef? maybeUndef: 2021; <\/code><\/pre>\n
Tenga en cuenta que este operador no verifica que la var no exista. Esto arrojar\u00e1 un error:<\/p>\n
const val = maybeUndef ?? 2021;  <\/code><\/pre>\n
Pero cuidado, este operador no es 100% como un operador ternario que devuelve el primer lado si la condici\u00f3n evaluada es verdadera. No evaluar\u00e1 valores que generalmente son falsos en JavaScript<\/a> para false<\/code>. Por ejemplo, no se considerar\u00e1 una cadena vac\u00eda false<\/code>:<\/p>\n
const someEmptyString = '';\nconst val = someEmptyString ?? 'fallback'; <\/code><\/pre>\n
A diferencia de este operador coalescente nulo, se generar\u00eda un operador ternario fallback<\/code>como resultado de esta evaluaci\u00f3n.<\/p>\n
Operador de encadenamiento opcional<\/h2>\n
\"5<\/a><\/p>\n
Propuesta: https:\/\/github.com\/tc39\/proposal-opcional-encadenamiento<\/a><\/p>\n
Babel: https:\/\/babeljs.io\/docs\/en\/next\/babel-plugin-proposal-opcional-encadenamiento.html<\/a><\/p>\n
Este operador tambi\u00e9n 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:<\/p>\n
const val = anObj && anObj.aProp && anObj.aProp.aNestedProp<\/code><\/pre>\n
Con el nuevo operador de encadenamiento opcional, podemos hacer algo como:<\/p>\n
const val = anObj.aProp?.aNestedProp<\/code><\/pre>\n
Esto se ve mucho m\u00e1s claro y es m\u00e1s corto de escribir. Este operador tambi\u00e9n funciona con arreglos num\u00e9ricos, por lo que es bueno trabajar con colecciones:<\/p>\n
const val = anObj.anArray[0]?.someProp<\/code><\/pre>\n
Y podemos apilar m\u00faltiples operadores:<\/p>\n
const val = anObj.anArray[0]?.someProp?.aNestedProp<\/code><\/pre>\n
\u00bfY si combinamos este con el anterior, coalescencia nula? Obtenemos una sintaxis que verifica que cada propiedad atravesada exista y, si no es as\u00ed, proporciona un valor alternativo:<\/p>\n
const val = anObj.anArray[0]?.someProp ?? 'someDefaultValue'<\/code><\/pre>\n
Si alguno de los valores no existe, devolver\u00e1 someDefaultValue<\/code>. La combinaci\u00f3n de estos dos operadores es una excelente manera de reemplazar la funci\u00f3n get<\/a> de lodash .<\/p>\n
operador de tuber\u00eda<\/h2>\n
\"5<\/a><\/p>\n
Propuesta: https:\/\/github.com\/tc39\/proposal-pipeline-operator<\/a><\/p>\n
Babel: https:\/\/babeljs.io\/docs\/en\/babel-plugin-proposal-pipeline-op<\/a> e<\/a> rator<\/a><\/p>\n
Este operador es parte de varias funciones experimentales de JavaScript, y proporciona m\u00e1s legibilidad al encadenar varias funciones juntas. Considere la siguiente funci\u00f3n:<\/p>\n
const reverseWords = \n      str => str\n        .split( ' ') .reduce( (revStr, word) => [ word, ...revStr ], []) .join( ' ' );\n\nconsole.log( reverseWords( 'this is fun') ); <\/code><\/pre>\n
Si necesitamos reutilizar estas transformaciones parciales que est\u00e1n encadenadas, podemos dividirlas en diferentes funciones y luego componer el resultado us\u00e1ndolas:<\/p>\n
const splitBySpace = str => str.split( ' ' );\nconst reverseArray = arr => arr.reduce( (acc, cur) => [ cur, ...acc ], [] );\nconst joinWithSpace = arr => arr.join( ' ' );\n\nconst reverseWords =\n    str => joinWithSpace(\n        reverseArray(\n            splitBySpace(\n                str)) );\n\nconsole.log( reverseWords( 'this is fun') ); <\/code><\/pre>\n
Lo raro de esto es que tenemos que empezar a leer esto desde abajo, la splitBySpace<\/code>l\u00ednea, 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\u00e9n terminamos con todos esos horribles par\u00e9ntesis colgantes. Esto podr\u00eda escribirse en una sola l\u00ednea y no es mucho m\u00e1s bonito:<\/p>\n
const reverseWords = str => joinWithSpace( reverseArray( splitBySpace( str)) );<\/code><\/pre>\n
Aqu\u00ed, tenemos que empezar a leer desde la funci\u00f3n central hacia las funciones exteriores, o de derecha a izquierda, lo que es contrario a la intuici\u00f3n de la lectura occidental de izquierda a derecha.<\/p>\n
El operador de canalizaci\u00f3n puede hacer que estas construcciones sean mucho m\u00e1s legibles y similares al encadenamiento que ten\u00edamos originalmente antes de mover las transformaciones a funciones separadas:<\/p>\n
const reverseWords =\n    str => str\n        |> splitBySpace\n        |> reverseArray\n        |> joinWithSpace;<\/code><\/pre>\n
Ahora las transformaciones aplicadas se escriben de manera similar a nuestra forma de escribir, de arriba a abajo, son m\u00e1s claras de leer y no tenemos par\u00e9ntesis colgando. \u00a1\u00c9xito!<\/p>\n
Separador num\u00e9rico<\/h2>\n
\"5<\/a><\/p>\n
Propuesta: https:\/\/github.com\/tc39\/proposal-numeric-separator<\/a><\/p>\n
Babel: https:\/\/babeljs.io\/docs\/en\/next\/babel-plugin-proposal-numeric-separator.html<\/a><\/p>\n
Este separador num\u00e9rico es diferente a las otras caracter\u00edsticas de JavaScript ya que no es un operador. Es una construcci\u00f3n de sintaxis que hace que los literales num\u00e9ricos sean m\u00e1s legibles al crear una separaci\u00f3n visual entre grupos de d\u00edgitos. Los literales num\u00e9ricos grandes son dif\u00edciles de analizar y comprender r\u00e1pidamente, especialmente cuando un d\u00edgito se repite varias veces. Por ejemplo:<\/p>\n
const longNum = 1000000000000;<\/code><\/pre>\n
Es dif\u00edcil de entender con una mirada r\u00e1pida. Este separador lo hace m\u00e1s legible:<\/p>\n
const longNum = 1_000_000_000_000;<\/code><\/pre>\n
Ahora podemos entender r\u00e1pidamente que esto es un bill\u00f3n.<\/p>\n
hacer expresiones<\/h2>\n
\"5<\/a><\/p>\n
Propuesta: https:\/\/github.com\/tc39\/proposal-do-expressions<\/a><\/p>\n
Babel: https:\/\/babeljs.io\/docs\/en\/babel-plugin-proposal-do-expressions<\/a><\/p>\n
La \u00faltima de las nuevas funciones de JavaScript que veremos es una expresi\u00f3n que se puede evaluar. El resultado de esta expresi\u00f3n viene despu\u00e9s de ejecutar un bloque que puede tener m\u00faltiples sentencias dentro. Podemos entender f\u00e1cilmente las expresiones do si traducimos una expresi\u00f3n de operador ternario como esta:<\/p>\n
const res = isCold( color )? 'light-blue': 'orange';<\/code><\/pre>\n
Escribir\u00edamos la expresi\u00f3n equivalente do{}<\/code>as\u00ed:<\/p>\n
const res = do {\n    if (isCold( color)) {\n        'light-blue';\n    } else {\n        'orange';\n    }\n};<\/code><\/pre>\n
Tenga en cuenta que no tenemos que devolver el valor ya que esta no es una funci\u00f3n. Si bien en este caso particular, esto se puede escribir de manera m\u00e1s sucinta como un ternario, las expresiones do son mucho m\u00e1s poderosas y permiten m\u00faltiples declaraciones, por ejemplo:<\/p>\n
const res = do {\n    if (isCold( color)) {\n        'light-blue';\n    } else if (isHot( color)) {\n        'orange';\n    } else if (isRain( color)) {\n        'purple';\n    } else {\n        'green';\n    }\n};<\/code><\/pre>\n
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\u00edamos hacer lo siguiente si estuvi\u00e9ramos usando React<\/a> para renderizar estos componentes:<\/p>\n
const MyComp = ({ color }) => ({\n            do {\n                if (isCold( color)) {\n                    ;\n                } else if (isHot( color)) {\n                    ;\n                } else if (isRain( color)) {\n                    ;\n                } else {\n                    ;\n                }\n            }\n        }\n\n);<\/code><\/pre>\n
M\u00e1s propuestas de JavaScript<\/h2>\n
Cada d\u00eda se discuten m\u00e1s propuestas para agregar caracter\u00edsticas m\u00e1s 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<\/a>. Las propuestas aqu\u00ed est\u00e1n cerca de completarse y, por lo tanto, cerca de agregarse al est\u00e1ndar ECMAScript, como se explica en esta tabla que describe el proceso de aceptaci\u00f3n<\/a>.<\/p>\n
Algunas de las nuevas caracter\u00edsticas de JavaScript que exploramos en este art\u00edculo, como las expresiones do o el operador de canalizaci\u00f3n, son propuestas de la etapa 1<\/a>, lo que significa que todav\u00eda tienen un camino por recorrer antes de convertirse en parte del est\u00e1ndar ECMAScript.<\/p>\n
Fuente de grabaci\u00f3n:  startfunction.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Obtenga informaci\u00f3n sobre 5 nuevas funciones, operadores y expresiones de JavaScript que mejorar\u00e1n su c\u00f3digo, haci\u00e9ndolo m\u00e1s legible y eficiente.<\/p>\n","protected":false},"author":1,"featured_media":157555,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[892,716,747,727,840],"tags":[1172],"class_list":["post-231970","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-codigo","category-desarrollador","category-fuente-abierta","category-javascript-2","category-tutoriales","tag-affiai-es"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/231970","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/comments?post=231970"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/posts\/231970\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media\/157555"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/media?parent=231970"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/categories?post=231970"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/es\/wp-json\/wp\/v2\/tags?post=231970"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}