Desarrollo Web

en Entorno
Cliente
Tema 2 – JavaScript
avanzado y ECMA-Script
Marina Hurtado Rosales
[Link]@[Link]
Indice de contenidos

• Operador Nullish Coalescing ??

• Funciones flecha
• Programación funcional
• Parámetros REST
• Operador spread …
• Desestructuración de objetos
• Métodos de arrays
• POO en Javascript. Clases y prototipos
• Importación/exportación de módulos
• Excepciones
Operador Nullish
Coalescing ??
Operador Nullish coalescing
El operador “nullish coalescing” (fusión de null) se escribe con un doble signo de cierre de
interrogación ??.

El resultado de a ?? b:
• Será a, si a no es null o undefined.
• Será b, si a es null o undefined.
Comparación ?? con ||

• height || 100 verifica si height es “falso”.

• Como 0 es un valor falsy, el resultado del operador || será el segundo argumento, 100.
• height ?? 100 verifica si height es null o undefined.
• Como no lo es, el valor de height se queda como está (0).
• En la práctica, una altura cero es un valor válido que no debería ser reemplazado por un valor
por defecto. En este caso ?? hace lo correcto, mientras que || no lo hace.
• NOTA: en JavaScript existen ciertos valores que se consideran siempre falsos en
comparaciones lógicas (false, 0, “”, null, undefined y NaN). Se les denomina valores falsy.
Operador Nullish coalescing
También existe la versión abreviada del operador

La versión abreviada puede ser útil, por ejemplo, para contar palabras:
Comparación sin y con ??
Funciones flecha
Funciones arrow o flecha
Distintas sintaxis
Ejemplos con funciones arrow

En un principio siempre que podamos vamos a utilizar funciones arrow o flecha.

Funciones arrow y programación
funcional
• Como ya dijimos en el tema 1, en JavaScript las funciones son un tipo de datos, es decir, se
pueden guardar en variables y pasarse como parámetros de otras funciones.

• La forma más compacta de las funciones flecha ayuda mediante funciones anónimas a su uso.
En otras palabras, facilita el uso de callbacks.

• Este tipo de programación en la que una función (función de orden superior) se resuelve
llamando a otras funciones que se le pasan como parámetros (funciones Callback) se llama
programación funcional.
Ejemplos simples de Callback
Funciones arrow y programación
funcional
En muchos casos esto genera soluciones donde no hay bucles (explícitamente) y todo se resuelve
con llamadas a funciones. Por ejemplo:
Programación
funcional
JSON para sustituir switch-case
Eliminar el switch con programación funcional
Eliminar el switch con programación funcional
Parámetros REST
Parámetros REST
Una función puede ser llamada con cualquier número de argumentos sin importar cómo sea
definida.

Por ejemplo:

Aquí no habrá ningún error por “exceso” de argumentos. Pero, por supuesto, en el resultado solo
los dos primeros serán tomados en cuenta.
Parámetros REST
El resto de parámetros pueden ser referenciados en la definición de una función con 3 puntos …
seguidos por el nombre del array que los contendrá.
Parámetros REST
Literalmente significan “Reunir los parámetros restantes en un array”. Veremos que también se
llama spread (como operador aparte) o parámetros REST en las funciones.

También funciona con la palabra reservada function.

Parámetros REST
Podemos elegir obtener los primeros parámetros como variables y juntar solo el resto.

Aquí los primeros dos argumentos van a variables y el resto va al array títulos:
Operador spread …
Operador spread en funciones
A veces necesitamos hacer exactamente lo opuesto. Por ejemplo, existe una función nativa
[Link] devuelve el número más grande de una lista:

Ahora supongamos que tenemos un array en lugar de una lista:

¡Operador spread al rescate! Cuando …arr es usado en el objeto de una función, “expande” el
objeto iterable en una lista de argumentos.
 Operador spread en funciones
También podemos pasar múltiples iterables de esta manera:

Podemos combinar el operador spread incluso con valores normales

Operador spread
Fuera de las funciones, el operador spread se puede usar también con arrays y objetos.

Creando copias de los mismos para compactar el código.

Operador spread
Desestructuración
de objetos
Desestructuración de objetos
Las dos estructuras de datos más usadas en JavaScript son Object y Array.

Normalmente no necesitamos un objeto o array como un conjunto sino en piezas individuales.

Además si accedemos repetidamente a una serie de propiedades de un objeto o posiciones de un

array supone un gasto de computación.
Desestructuración de objetos
La asignación desestructurante es una sintaxis especial que nos permite “desempaquetar” arrays
u objetos en varias variables, porque a veces es más conveniente.

Ahora podemos trabajar con variables en lugar de miembros de array. Es sólo una manera más
simple de escribir:
Desestructuración de objetos
Se ve genial cuando se combina con Split u otro método que devuelve un array:

En este código el segundo elemento del array es omitido, el tercer es asignado a title, y el resto
de los elementos también se omiten.
Desestructuración de objetos
También funciona con string

El lado izquierdo no tiene que estar compuesto de variables, puede ser un objeto:

TRUCO: intercambiemos valores

Desestructuración de objetos
Si queremos también obtener todo lo que sigue podemos agregarle un parámetro que obtiene el
resto usando puntos suspensivos …
Desestructuración de objetos
La asignación desestructurante también funciona con objetos
Desestructuración de objetos
No importa el orden sino los nombres. Esto también funciona:

Si queremos asignar una propiedad a una variable con otro nombre:

Desestructuración de objetos
Si tenemos un objeto complejo con muchas propiedades, podemos extraer solamente las que
necesitamos:

Si no declaramos las variables en el mismo momento de la desestructuración o retornamos un

objeto en una función, hay que rodear la expresión entre paréntesis (…) para que funcione:
Desestructuración de objetos
Podemos usar el patrón resto de la misma forma que lo usamos con arrays.
Desestructuración de objetos
Si un objeto o array contiene objetos y arrays anidados, podemos utilizar patrones del lado
izquierdo más complejos para extraer porciones más profundas
Desestructuración de objetos
Métodos de Arrays
forEach
forEach nos permite recorrer uno a uno los elementos de un iterable.
Podemos observar el uso de la desestructuración.
forEach
Estos métodos suelen tener parámetros opcionales para ser idénticos a los bucles
find y findIndex
filter, some, every y sort
Cómo eliminar elementos repetidos con filter

Cómo desordenar un array

Cómo hacer una criba aleatoria

map
El método map genera un nuevo array a partir de otro aplicando una función a cada elemento del
array

También permite “recortar datos” proyectando solo los atributos que queramos
 map
Incluso permite devolver arrays de objetos recortados

O ampliar usando …spread

El propio array como parámetro
Todos los métodos de los array incluyen un parámetro opcional por defecto que es el propio
array. Siempre lo reciben y no hace falta ponerlo.

Esto es útil cuando se encadenan varias llamadas a métodos.

Combinación de métodos de arrays
Encadenando funciones de arrays podemos conseguir códigos compactos.

POR FAVOR no hay que llevarlo al extremo.

Los métodos de array son realmente interesantes, pero no se pueden aplicar a objetos
directamente por ejemplo.

Solo podríamos usar el for…in para iterar sobre este objeto.

Hay una solución alternativa mediante la clase Object.

Métodos de Object: keys, values, entries
Estos métodos generan arrays con los distintos componentes de un objeto clave-valor.

Estos métodos son similares a los Map que existen en el lenguaje Java
Métodos de Object: keys, values, entries
Métodos de Object: keys, values, entries
Esto nos permite hacer cosas sólo con métodos.
Métodos de Object: fromEntries
Si usamos map obtenemos una copia transformada.

Seguimos teniendo un array que no es un objeto, pero volver a transformarlo en objeto es fácil
con el método fromEntries
Métodos de Object: fromEntries
El método fromEntries es muy interesante porque podemos generar objetos de cualquier
conjunto de arrays.
POO en
JavaScript. Clases
y Prototipos
Antes de ECMA Script la forma más parecida de programar orientado a objetos es usar el
concepto de Prototipos y clausura con funciones.

En JavaScript, los objetos tienen una propiedad oculta especial [[Prototype]] que puede ser null,
o hacer referencia a otro objeto llamado “prototipo”

Cuando leemos una propiedad de un objeto, si JavaScript no la encuentra allí la toma

automáticamente del prototipo. En programación esto se llama “herencia prototípica”
 Prototipos

Para poder empezar hay que crear inicialmente una función constructora que inicialice los
atributos del this.
Prototipos

Después usar el objeto prototipo para definir sus métodos

Prototipos

El uso de los prototipos es similar al de Java o el de C++

Clases

A partir de ECMA Script 6 tenemos la posibilidad de usar una sintaxis más parecida a Java que
nos permite agrupar el código creando clases.

En Javascript no existe él ámbito private para los atributos. Siempre son visibles.

Por ello, se usa una norma no escrita en la que si los atributos empiezan por _ los programadores
no los modificarán.
Clases

El uso de las clases es exactamente igual que el de los prototipos.

Importación/
Exportación
Hasta ahora hemos estado utilizando un único archivo javascript para hacer todo el código.

Una práctica muy común es separar el código en varios archivos, creando uno o varios archivos
para encapsular todas las utilidades o funciones, y otro para el script main, el cual hace uso de
estas utilidades o funciones creadas en los otros archivos.

Esta es una de las opciones más usadas en general, pero tiene el problema de que hay que incluir
muchos scripts en el archivo html.

Además, al crear varias etiquetas script se incluyen todos los archivos completos en nuestra
aplicación web, incluso si no se necesita toda la funcionalidad incluida en estos.

Lo ideal sería poder hacer importaciones selectivas en las que solo incluyamos aquello que
realmente necesitamos
Exportación
Desde la versión 6 de ECMA Script existe la exportación e importación de cualquier elemento
declarado de un fichero JavaScript a otro.

Por ejemplo:
Exportación

La declaración export se usa para exportar valores de un módulo de JavaScript.

Un módulo de JavaScript es un bloque de código reutilizable y aislado que puedes importar o

exportar entre archivos.

Para que se pueda usar esta declaración, el archivo en el que se utiliza debe ser interpretado en
tiempo de ejecución como un módulo. En HTML esto se hace añadiendo type=“module” a la
etiqueta <script>, o haciendo que el módulo que usa export sea importado en otro módulo.
Exportación
En JavaScript hay dos formas de exportar elementos de un módulo:

• Exportaciones nombradas (named exports): exportas varios elementos con nombre. Se

pueden tener tantos como se quiera.

• Exportación por defecto (default export): sólo puede haber una por módulo. Se entiende que
este elemento es el elemento principal que se exporta, y por ello es único.
Exportación

La declaración export se puede aplicar línea a línea en cada declaración, o al final del código de
manera conjunta.

En la mayoría de casos, sobre todo si se usar orientación a objetos, lo más normal es encontrar
que en un módulo solamente declaramos una clase, la cual se suele exportar con default.
Importación
Al igual que con la exportación, solamente podemos importar elementos de otros archivos desde
un módulo. De esta manera, lo normal es declarar varios archivos con las utilidades que se
quieran importar, y solamente declarar como módulo en el HTML el archivo [Link]

Para importar se utiliza la sentencia import, la cual debe ir al inicio del archivo.

Existen cuatro formas diferentes de importar elementos de otro módulo:

• Importación con nombre (named import): se usa cuando el módulo exporta elementos con
nombre específico. Debes importar los nombres exactamente iguales a los que se exportaron.
 Importación
• Importación por defecto (default import): cada módulo puede tener una única exportación
principal. Este elemento se importa sin llaves, y se le puede poner el nombre que quieras.

• Importar todo el módulo (namespace import): importa todo el contenido del módulo bajo un
mismo nombre (objeto). Es útil para poder acceder a muchos elementos del mismo módulo.
Importación
• Solo ejecución del módulo (side effect import): importamos un módulo sin recoger nada de
él, solamente para ejecutar su código. Este tipo de import se usa cuando el módulo que se
importa hace algo al cargarse, como por ejemplo configurar valores de variables.

En resumen, las importaciones pueden traer elementos concretos, el valor por defecto, todo el
módulo completo o simplemente ejecutar código.

El tipo de importación depende de cómo se haya exportado en el módulo original.

Excepciones
¿Qué es una excepción?

Una excepción es un error que ocurre en tiempo de ejecución.

Si no se maneja, este error detiene el programa justo cuando aparece, imprimiendo por consola el
error en concreto.

Hay una construcción sintáctica que nos permite capturar estos errores, permitiendo que nuestro
programa pueda hacer otra cosa en lugar de detenerse: try…catch…finally
try…catch…finally
El objeto Error
Cuando ocurre una excepción, JavaScript crea automáticamente un objeto Error, el cual se pasa
como argumento al catch.

Este objeto tiene las siguientes propiedades:

• name: nombre del tipo de error (TypeError, ReferenceError…).
• message: mensaje de texto sobre los detalles del error.
• stack: pila de llamadas actual. Básicamente es una cadena con información sobre la secuencia
de llamadas anidadas que condujeron al error.
Tipos de errores comunes
Estos son algunos de los tipos de errores más comunes. Todos heredan de la clase base Error.

Tipo ¿Cuándo ocurre? Ejemplo

ReferenceError Variable no definida // No se declara x

[Link](x);
TypeError Operación con tipo incorrecto [Link]();

SyntaxError Error de sintaxis [Link](“{json mal}”);

RangeError Valor fuera de rango “hola”.repeat(-1);

Filtrado de errores
A veces queremos tratar de forma diferente ciertos tipos de error.
Operador throw
Podemos lanzar errores personalizados haciendo uso del operador throw.
Excepciones personalizadas
Podemos crear nuestras propias clases de error heredando de la clase Error.

Esto permite clasificar nuestros errores y tratarlos de forma específica.

Recomendaciones y buenas prácticas

• No usar try/catch de forma abusiva, solamente donde pueda haber un fallo real.

• Utilizar [Link] para mostrar mensajes más claros y técnicos por consola que faciliten la
depuración.

• Centralizar el manejo de errores en un lugar común si la aplicación va creciendo.