JavaScript® (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, most known as the scripting language for Web pages, but used in many non-browser environments as well such as node.js or Apache CouchDB. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

javascript

Una revisión de las nuevas características que la nueva versión de Javascript ES2020 o ES11 trae para esta iteración.  

Cómo utilizar encadenamiento opcional para acceder a propiedades opcionales de objetos evitando el uso de multiples condicionales.

Encadenamiento Opcional en JavaScript

ES2020 también incluye un nuevo operador que puede ser utilizado de forma nativa en el navegador. Este operador, llamado fusión nula en español, permite seleccionar el primer valor no null o no undefined de una lista de variables.

Actualmente, utilizamos el operador OR para realizar algo similar, pero el operador OR actúa de forma diferente, ya que selecciona el primer valor no "falsy".
En Javascript existen varios valores "falsy", cómo: 0, NaN, false, null y undefined



Operador Fusión Nula/Nullish Coalescing en Javascript

La nueva versión de Javascript trae, entre sus nuevas características la posibilidad de utilizar importación dinámica de forma nativa en el navegador utilizando la misma sintaxis que ya hemos utilizado con webpack/rollup y Babel.

Se trata de la implementación de la sintaxis `import()` que retorna una Promesa permitiendo así importar módulos de forma programática incluso dentro de bloques condicionales, eventos o utilizando la sintaxis `async` y `await`.

Importar módulos de JavaScript de forma dinámica en el navegador

En este curso aprender diferentes métodos para resolver problemas que encontrarás en tu día a día como desarrollador web.


Manipulación Eficiente de Arreglos con Javascript

En esta colección encontrarás un paso a paso para construir un componente complejo utilizando diferentes patrones de diseño implementados gracias al uso de la API Hooks.

Construye Componentes Avanzados con React Hooks y Patrones de Diseño

Nuevas Características de ES2020 en JavaScript

https://app.egghead.io/api/v1/lessons/javascript-encadenamiento-opcional-en-javascript/subtitles

Matías Hernández: [0:00] Al querer acceder a una propiedad del objeto de la que no estamos seguros que exista, como user.address.street, tendremos un error, o al intentar acceder otro tipo de información, como la propiedad innerHTML, de un elemento html inexistente también tendremos un error.

[0:21] Una forma de evitar esto es utilizar condicionales y el operador && en este caso, como user.contact es null y estamos intentando acceder a address, no retornará null. Usar el operador && en todo el acceso de la propiedad soluciona el problema, pero se puede volver complejo.

[0:40] El encadenamiento opcional detiene la evaluación y retorna undefined si la parte izquierda es null o undefined. No hay que abusar del uso del encadenamiento, ya que puede invisibilizar errores.

[0:53] Por ejemplo, si nuestra app utiliza un objeto user, pero address es opcional, no nos mostrará el error. Pero en remover el uso del encadenamiento opcional en el objeto que ya es undefined por [inaudible] , podremos ver que realmente hay un error. Una condición es que la variable inicial debe existir.

[1:17] En este caso, someUser no existe por lo tanto tendremos un error. También es posible utilizar este operador para acceder a funciones opcionales. Si la función no está definida, el operador evitará el error y mostrará undefined, en caso contrario la ejecutará.

[1:33] También funciona para acceder a propiedades utilizando brackets. En caso de que la propiedad no exista en el objeto que estamos utilizando, retornará undefined.

[1:44] En resumen, ahora podemos utilizar encadenamiento opcional de forma nativa en el navegador. El operador revisa si la parte izquierda es null o undefined y permite proceder con la evaluación.

https://app.egghead.io/api/v1/lessons/javascript-encadenamiento-opcional-en-javascript/transcript

https://app.egghead.io/api/v1/lessons/javascript-operador-fusion-nula-nullish-coalescing-en-javascript/subtitles

Matías Hernández: [0:00] El nuevo operador fusión nula permite seleccionar la primera variable no-null y no-undefined de una lista. La gran diferencia con el operador OR es que el nuevo operador retorna el primer valor definido y no el primer valor verdadero.

[0:15] En este ejemplo, el operador OR trata el valor cero como falsy igual que null y undefined, en cambio el nuevo operador solo evalúa por valores realmente null o undefined. Por razones de seguridad, está prohibido utilizar este operador junto con los operadores AND u OR.

[0:37] En resumen, el operador de fusión nula provee una forma de elegir el primer valor definido y puede ser utilizado para asignar valores por defecto.

https://app.egghead.io/api/v1/lessons/javascript-operador-fusion-nula-nullish-coalescing-en-javascript/transcript

https://app.egghead.io/api/v1/lessons/javascript-importar-modulos-de-javascript-de-forma-dinamica-en-el-navegador/subtitles

Matías Hernández: [0:00] Utilizando la sintaxis import('./module.js') es posible importar módulos de forma dinámica directamente en el navegador. Está sintaxis de tipo función retorna una promesa por lo que es posible utilizar la sintaxis then().catch(). Para acceder al módulo, utilizamos el método then().

[0:16] Luego simplemente accedemos a la función exportada por defecto y la ejecutamos. Ahora podemos ver si valor en consola y en caso de que hubiera error utilizamos el bloque catch() y podemos mostrar en consola el error.

[0:33] Guardamos refrescamos el navegador y podemos ver el resultado en la consola del navegador. El módulo importado en este caso contiene solamente una función de edición, una llamada a export default. Podemos hacer uso de todos los métodos de promesa.

¿[0:45] Cómo? Por promise.all. En este ejemplo, construimos una función que importa dos módulos y utiliza promise.all para esperar ambos módulos.

[0:56] Luego, simplemente se ejecuta la función y se accede a ellos por medio del método then(). Aquí ambos módulos tienen importaciones por defecto y podemos ver en la consola del navegador el resultado después de refrescar. El móduloB tan solo contiene una función de sustracción y una llamada a export default.

[1:13] También es posible utilizar esta sintaxis en métodos más complejos como importar en base a una condición. En este caso, al cliquear un botón. Al hacer clic en el botón se importa el módulo y se espera que la promesa sea resuelta utilizando async y await.

[1:28] Al refrescar el navegador, podemos ver el botón en pantalla y al hacer click se ejecuta la importación y podemos ver el resultado en la consola. Es también adecuado notar que es posible importar módulos con nombre.

[1:39] En este caso, se importa la función add() desde el móduloC que contiene dos funciones, una de adición y otra de sustracción exportadas con sus nombres. Finalmente, en nuestro evento de click, accedemos a la función de adición directamente por su nombre luego de la importación.

[1:54] Esta nueva API nos permite también importar módulos con nombres generados dinámicamente utilizando template literals. En este caso, generamos el nombre de uno de los módulos utilizando random. Para esto, utilizamos template literals como argumento de la función import(). Luego al refrescar el navegador y cliquear el botón, se importan módulos diferentes.

[2:16] En resumen, JavaScript nos ofrece importaciones dinámicas de la misma forma que webpack ya lo hacía utilizando la sintaxis import función que retorna una promesa que nos permite utilizar todos los métodos de la API promesa como async y await para así importar de forma programática cualquier módulo que necesitemos de forma nativa directamente en el navegador.

https://app.egghead.io/api/v1/lessons/javascript-importar-modulos-de-javascript-de-forma-dinamica-en-el-navegador/transcript

Nuevas Características de ES2020 en JavaScript

Matías Hernández

You might also like these resources:

Manipulación Eficiente de Arreglos con Javascript

Construye Componentes Avanzados con React Hooks y Patrones de Diseño

Course Content

You might also like these resources:

Manipulación Eficiente de Arreglos con Javascript

Construye Componentes Avanzados con React Hooks y Patrones de Diseño