Manejo de Errores y Transformaciones de Arrays en JavaScript

Clase 25 de 35 • Curso de ECMAScript: Historia y Versiones de JavaScript

Resumen

Las siguientes características de ES10 o ES2019 que aprenderás son: parámetro opcional de catch y un método para tranformar arrays a objetos

Parámetro opcional de catch

El parámetro opcional de catch permite omitir el error si es necesario.

try {
  // Manejar el código
} catch (err) {
  // Se utiliza el parámetro `err`
}

try {
  // Manejar el código
} catch {
  // Manejar el error sin el parámetro.
}

Aunque siempre es recomendable manejar el error como parámetro, ya que tiene más información del problema.

Cómo transformar un array de arrays en un objeto

El método Object.fromEntries devuelve un objeto a partir de un array donde sus elementos son las entries en forma [propiedad, valor].

Se considera la operación inversa de Object.entries().

const arrayEntries = [
  [ 'name', 'Andres' ],
  [ 'email', 'andres@correo.com' ],
  [ 'age', 23 ]
] 

const usuario = Object.fromEntries(arrayEntries) 

console.log(usuario)
/* {
  name: 'Andres',
  email: 'andres@correo.com',
  age: 23
}
*/

Contribución creada por Andrés Guano (Platzi Contributor).

Yuli Alexandra Pulido Castañeda

student•

Hola Chic@s :)

ES10:

Try catch

try {
    hello ();
} catch (error) {
    console.log(error);
}

try {
    onotherFn();
} catch {
    console.log("esto es un error")
}

FromEntries

const entries = new Map ([["name", "alexa"], ["age", 24]]);
console.log(entries);
console.log(Object.fromEntries(entries));

Jason Steven Méndez Balambá

student•

Copied :) ty.

Eduardo César Henao Echeverri

student•

Para quienes no entiendan por qué el profesor usó Map en vez de un array, les comento que también se puede usar el mismo método con un array normal,

// Ahora se puede cambiar de un array a un objeto
const entries = [
  ["name", "Sime"],
  ["age", 30],
];
console.log("Array original", entries);
// Array origintal [ [ 'name', 'Sime' ], [ 'age', 30 ] ]
console.log("Array transformado a object", Object.fromEntries(entries));
// Array transformado a object { name: 'Sime', age: 30 }

Porfirio González López

student•

¿Antes a fuerza se tenía que usar esa estructura de 'new Map()' para encerrar el Array de arrays?

const entries = new Map ([["name", "alexa"], ["age", 24]]);
    console.log(entries);
    console.log(Object.fromEntries(entries));

Pero ahora ya no?

const arrayEntries = [
    [ 'name', 'Andres' ],
    [ 'email', 'andres@correo.com' ],
    [ 'age', 23 ]
]
const usuario = Object.fromEntries(arrayEntries)
console.log(usuario)

Eduardo Acosta

student•

lo que no entiendo es como es que dijo que lo haría con un array u uso map XDDDDD

Zajith Corro Viveros

student•

Un uso de try { } catch { } es cuando tienes llamadas a una API, pero con async ... await

async function getUsers() {
  try {
    const data = await fetch('....')
  } catch {
    console.log(error)
  }
}

Dado que a diferencia de las promesas, no tenemos un método then ... catch

Magdiel Linares

student•

Me preguntaba como hacer lo opuesto, de Object a Array... usando entries() seria:

const array = Object.entries(object);
console.table(array);

Kevin Salazar

student•

También puede hacer Array.from(object).

Juan Carlos Montilla Sánchez

student•

Bueno, estuve probando con Array.from(object) y no me lo tomó, me enviaba el array vacío

Arnoll Bermudez

student•

quisiera comentarles algunas cosas que no se pueden hacer con el OjectfromEntries, si tenemos el siguiente codigo

const entries = new Map([["name", "Arnoll"],["Country", "Col"],["age", 20]]);
console.log(entries);
console.log(Object.fromEntries(entries));

no funcionara si tenemos mas de un par de datos dentro del array por ejemplo:

Input
const entries = new Map([["name", "Arnoll", "Country", "Col"],["age", 20]]);

Output
{ name: 'Arnoll', age: 20 }

para que hayan mas elementos deben estar separados de a par por los corchetes por ejemplo:

Input
const entries = new Map([["name", "Arnoll"],["Country", "Col"],["age", 20]]);

Output
{ name: 'Arnoll', Country: 'Col', age: 20 }

acepto feedback

Leopoldo Martinez

student•

Se puede pasar directamente el array a Object.fromEntries y tambien lo va a transformar en un objeto. Sin necesidad de pasarlo por new Map

const transformar = [['nombre', 'Leopoldo'],['edad','35']]
const entries = new Map(transformar)
console.log(transformar)
console.log(Object.fromEntries(transformar))
console.log(Object.fromEntries(entries))

Brahayan Ferney González Vanegas

student•

Bastante decepcionado de las explicaciones, solo de saber que Oscar es el profesor de los siguientes cursos en mi ruta Full Stack Developer con JavaScript, ya decepciona bastante. No por su conocimiento, sencillamente hay personas que sirven para explicar y otras no.

Nestor Ignacio Rojas Guarachi

student•

haha la verdad si se queda muy corto en las explicaciones habria que comentar en el 1er video para que la mayoria sepa como mas o menos esta orientado el curso

Porfirio González López

student•

¿Por qué el profesor uso 'new Map()' para encerrar el Array de arrays?

Sí se puede directamente.

const arrayEntries = [
    [ 'name', 'Andres' ],
    [ 'email', 'andres@correo.com' ],
    [ 'age', 23 ]
]
const usuario = Object.fromEntries(arrayEntries)
console.log(usuario)

Jorge Luis Silva Medina

student•

Puede ser para dar a entender que es un mapa de clave-valor y así obtener los entries.

Edward Hernandez

student•

Para confundir mas, por supuesto.

Eduardo César Henao Echeverri

student•

El error del catch ahora es opcional

try {
  hello();
} catch(e) {
  console.log('F por el hello()!')
  console.log(e);
}

try {
  anotherFn();
} catch {
  console.log('Esto es un error')
}

Teo Zavala

student•

Luis Alfredo Suarez

student•

ES10: try catch y fromEntries

Veamos más detalladamente sobre estas dos características introducidas en ECMAScript 2019 (ES10): try...catch y Object.fromEntries().

try...catch con parámetros opcionales en catch:
En ECMAScript 2019, se introdujo una mejora en la sintaxis del bloque catch que permite omitir el parámetro entre paréntesis.
Anteriormente, en un bloque catch, era necesario proporcionar un parámetro para capturar la excepción, incluso si no planeabas utilizarlo. Con la actualización en ES10, puedes escribir un bloque catch sin parámetros, lo que resulta útil cuando solo estás interesado en manejar la excepción sin necesidad de acceder al objeto de error.

Por ejemplo:
```
try {
    // Código que puede generar una excepción
} catch {
    // Manejar la excepción sin necesidad del parámetro de error
}
```
Esta característica hace que el código sea más limpio y evita la necesidad de declarar un parámetro que no se va a usar.
Object.fromEntries():
Object.fromEntries() es un método estático que se agregó en ES10. Permite convertir un array de pares clave-valor en un objeto. Antes de esta adición, para crear un objeto a partir de un array de pares clave-valor, tenías que recorrer el array y agregar cada par clave-valor al objeto manualmente. Con Object.fromEntries(), este proceso se simplifica significativamente.

Por ejemplo:
```
const entries = [
    ['nombre', 'Juan'],
    ['edad', 30],
    ['ciudad', 'Madrid']
];

const obj = Object.fromEntries(entries);

console.log(obj); // { nombre: 'Juan', edad: 30, ciudad: 'Madrid' }
```
Este método es útil cuando trabajas con datos en forma de pares clave-valor y deseas convertirlos en un objeto.

Estas características son solo dos de las muchas mejoras y adiciones que se introdujeron en ECMAScript 2019 (ES10) para mejorar la experiencia de programación en JavaScript.

Espero sea de utilidad. 👨‍💻

Andrés Soret Chacin

student•

No importa lo buenos que seamos en la programación, a veces nuestros scripts tienen errores. Pueden ocurrir debido a nuestros descuidos, una entrada inesperada del usuario, una respuesta errónea del servidor y por otras razones más.

Por lo general, un script “muere” (se detiene inmediatamente) en caso de error, imprimiéndolo en la consola.

Para eso existe la construcción sintáctica try...catch que nos permite “atrapar” errores para que el script pueda, en lugar de morir, hacer algo más razonable.

Alejandro Ramos

student•

uhmmm me quedo un poco falto de explicación, pero ta bn

Maria Gabriela Rodriguez Cuevas

student•

📖 Archivos del Proyecto 📖

Pasos 📌

• Dentro de la carpeta es10, crear el archivo llamado: 02-try-catch.js
- - ◦ El código queda:

//Compilar: seleccionar el código + click derecho + Run Code

//Ejercicio #1
try {
	hello();
} catch(error) {
	console.log(error);
}

/*output: ocurre un error y lo muestra por consola
ReferenceError: hello is not defined
*/

//Ejercicio #2
try {
	anotherFn();
} catch(error) {
	console.log('Esto es un error');
}

/*output: muestra el console porque entró en el catch
Esto es un error
*/

• Dentro de la carpeta es10, crear el archivo llamado: 03-fromentries.js ◦ El código queda:

//Compilar: seleccionar el código + click derecho + Run Code

//Ejercicio #1
const entries = new Map([["name", "oscar"], ["age", 34]]);
console.log(entries);
console.log(Object.fromEntries(entries));

/*output:
Map(2) { 'name' => 'oscar', 'age' => 34 }
{ name: 'oscar', age: 34 }
*/

Nahuel Torres

student•

En esta clase me he dado cuenta que existen dos map. el .map() y el Map([...]) ++Segun lo que he buscado (corríjanme si estoy mal)++

Es que .map() es un método que se utiliza en arrays, para crear un nuevo array con los resultados de aplicar una funcion a cada elemento del array original.

var numbers = [1, 5, 10, 15];

var doubles = numbers.map(function (x) {
  return x * 2;
});
console.log(doubles);

Y el otro Map([...]) es una estructura que esta diseñada para guardar pares clave-valor, que no acepta repetidos en sus key/clave.

const miMapa = new Map(); //Creamos dicho elemento
miMapa.set("clave1", "valor1");
miMapa.set("clave2", "valor2");
miMapa.set("clave3", "valor1");
miMapa.set("clave3", "valor6");
miMapa.set("clave4", "valor2");
console.log(miMapa);
console.log(miMapa.get("clave3"));

//Responde:
Map(4) {
  'clave1' => 'valor1',
  'clave2' => 'valor2',
  'clave3' => 'valor6',
  'clave4' => 'valor2'
}
valor6

Ese seria mi aporte, espero no esté muy mal y a alguien le sirva :)

Aaron Carhuaricra

student•

Buen dia comunidad, para los que se preguntan por que el profe Oscar uso new Map en vez de un array de array o para los que piensen que se confundio, logre encontrar este enfoque a ver si nos ayuda un poco a entender.

Usar o no un Map

La diferencia principal entre usar un Map y no usarlo cuando se trabaja con Object.fromEntries() radica en las capacidades adicionales y flexibilidad que ofrece un Map en comparación con un simple array de pares clave-valor.

Usar un Map:

Tipos de Claves Variadas: En un Map, las claves pueden ser de cualquier tipo, incluidos objetos, lo que no es posible con un objeto JavaScript estándar. Esto puede ser útil si necesitas utilizar objetos complejos o valores no primitivos como claves.
Métodos y Propiedades de Map: Los objetos de tipo Map tienen métodos y propiedades específicas que no están disponibles en los objetos JavaScript regulares, como set(), get(), delete(), size, etc. Estos métodos pueden ser útiles para manipular los datos dentro del Map.
Orden de Inserción: Un Map mantiene el orden de inserción de los elementos, lo que significa que los elementos se almacenan en el orden en el que se agregaron al Map. Esto garantiza que puedas iterar sobre los elementos en el mismo orden en el que se insertaron.

No usar un Map:

Simplicidad: Si solo necesitas un simple array de pares clave-valor y no necesitas funcionalidades específicas de los Map, usar un array directamente junto con Object.fromEntries() es más simple y conciso.
Compatibilidad con APIs Antiguas: Algunas APIs o bibliotecas pueden esperar un simple array de pares clave-valor en lugar de un Map. En este caso, usar un array puede ser más apropiado.

Entonces, la elección entre usar un Map y no usarlo depende de los requisitos específicos de tu aplicación y del tipo de operaciones que necesites realizar con los datos. Si solo necesitas convertir un conjunto de pares clave-valor en un objeto JavaScript, Object.fromEntries() puede hacer el trabajo sin necesidad de un Map. Sin embargo, si necesitas realizar operaciones más avanzadas o trabajar con tipos de claves no estándar, un Map podría ser la mejor opción.

Carlos Andrade

student•

25/35 ES10: try catch y fromEntries El parámetro opcional de catch y el método Object.fromEntries para transformar arrays en objetos.

El parámetro opcional de catch permite omitir el uso del parámetro “err” en la función catch si no es necesario. Por ejemplo:

try {
  // código que puede generar un error
} catch {
  // manejar el error sin el parámetro "err"
}

El método Object.fromEntries convierte un array de entries (pares clave-valor) en un objeto. Por ejemplo:

const arrayEntries = [  [ 'name', 'Andres' ],
  [ 'email', 'andres@correo.com' ],
  [ 'age', 23 ]
] 

const usuario = Object.fromEntries(arrayEntries) 

console.log(usuario) // { name: 'Andres', email: 'andres@correo.com', 
// age: 23 }

Juan Diego Salvador Pacheco

student•

¿Cuál sería un ejemplo de optional catch binding?

Hector Maluy Fernandez

student•

https://www.javascripttutorial.net/es-next/optional-catch-binding/

silfredo mario

student•

¿Siempre tiene que ser un array multidimensional?

Porfirio González López

student•

Pues si quieres tener el objeto y su correcta estructura de keyword y valor, yo creo que sí.

Ricardo Alfonso Chavez Vilcapoma

student•

¿Para que sirve el new Map espcificamente? ¿Se usa actualmente?

Marcos Teixido

student•

Algo a tener en cuenta con el fromEntries es el nivel de profundidad, porque al tener mayor profundidad pueden dar resultados diferentes.

Manejo de Errores y Transformaciones de Arrays en JavaScript

Introducción

Historia y evolución de ECMAScript y JavaScript

Actualización y Propuestas en ECMAScript y JavaScript

Configuracion

Configuración de Herramientas para Desarrollo en JavaScript Avanzado

¿Qué se implementó en ES6?

Características de ECMAScript 6 para JavaScript Moderno

Template Literals y Multilínea en ECMAScript 6

Asignación de Parámetros por Defecto en ECMAScript 6

Desestructuración de Arrays y Objetos en JavaScript ECMAScript 6

Uso del Operador de Propagación y Parámetros Rest en JavaScript

Playground: Combina objetos JSON con el Spread Operator

Asignación y manejo de objetos en ECMAScript 6

Promesas en JavaScript: Manejo del Asincronismo con ECMAScript 6

Clases y Herencia en JavaScript: Sintaxis y Aplicaciones

Uso de Módulos en JavaScript ES6

Playground: Obtén una lista de películas

Generators en JavaScript: Cómo implementar y usar iteradores personalizados

Playground: Generador de identificadores para michis

Método ADD en ECMAScript 6: Agregando Elementos a un Set

¿Qué se implementó en ES7?

Actualizaciones de ECMAScript 7: Operadores Exponencial e Includes

¿Qué se implementó en ES8?

Métodos Object.Entries y Object.Values en ECMAScript 8

Manipulación de Strings y Arrays en ECMAScript 8

Async y Await en JavaScript: Controlando el Asincronismo

¿Qué se implementó en ES9?

Novedades de ECMAScript 9: Regex y Spread Operator en JavaScript

Manejo de Finally y Async en ECMAScript 9

¿Qué se implementó en ES10?

Novedades de ECMAScript 10: Métodos flat y trim en JavaScript