No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

ES10: try catch y fromEntries

25/35
Recursos

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', '[email protected]' ],
  [ 'age', 23 ]
] 

const usuario = Object.fromEntries(arrayEntries) 

console.log(usuario)
/* {
  name: 'Andres',
  email: '[email protected]',
  age: 23
}
*/

Contribuci贸n creada por Andr茅s Guano (Platzi Contributor).

Aportes 23

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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));

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 }

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

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

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

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

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.

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))

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')
}

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

馃摉 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 }
*/

ES10: try catch y fromEntries


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

  1. 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.

  2. 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. 馃懆鈥嶐煉

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.

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 鈥渆rr鈥 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', '[email protected]' ],
  [ 'age', 23 ]
] 

const usuario = Object.fromEntries(arrayEntries) 

console.log(usuario) // { name: 'Andres', email: '[email protected]', 
// age: 23 }

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

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 鈥渕uere鈥 (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 鈥渁trapar鈥 errores para que el script pueda, en lugar de morir, hacer algo m谩s razonable.

Apuntes馃崕
Try catch

El try鈥atch la declaraci贸n se compone de un try bloque y o bien un catch bloque, a finally bloque, o ambos. El c贸digo en el try el bloque se ejecuta primero, y si lanza una excepci贸n, el c贸digo en el catch el bloque ser谩 ejecutado. El c贸digo en el finally el bloque siempre se ejecutar谩 antes de que el flujo de control salga de toda la construcci贸n.

Antigua sintaxis

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

nueva sintaxis

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

//el ouput es : es un error ya que el try no encuentra la funcion y activa el catch.


El m茅todo est谩tico Object.fromEntries() 馃殌

transforma una lista de pares clave-valor en un objeto.

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

ejemplo:

const entries = new Map([
  ['foo', 'bar'],
  ['baz', 42],
]);

const obj = Object.fromEntries(entries);

console.log(obj);
// Expected output: Object { foo: "bar", baz: 42 }

edit: Like
Mas informaci贸n:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/fromEntries

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 馃槂

/*sirve para manejar errores, si no pasa la primera opcion, sucedera la segunda */
/*usare promesas para que todo el codigo se pueda ejecutar, si no, no lo hace */

function primerTry() {
    return new Promise((resolve) => {
        try {
            resolve(hello());
        } catch (error) {
            console.log(error);
        }
    })
}
primerTry().then(resolve => console.log(resolve));


function segundoTry() {
    return new Promise((resolve) => {
        try {
            resolve(anotherFunction());
        } catch (error) {
            throw new Error("madafacka");
        }
    })
}
segundoTry().then(resolve => console.log(resolve));


function thisFunctionIsGonnaWork() {
    console.log("************this works************");
}

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

Mi resumen:

// Con fromEntries ES10,se puede transformar un array de arrays a un objeto

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

    // Map(2) { 'name' => 'Oscar', 'age' => 24 }
    // { name: 'Oscar', age: 24 }

    //otro ejemplo sin Map
const entrie = [
    ["name", "Vale"],
    ["age", 43],
  ];
  console.log("Array original", entrie);
  // Array origintal [ [ 'name', 'Vale' ], [ 'age', 43 ] ]
  console.log("Array transformado a object", Object.fromEntries(entrie));
  // Array transformado a object { name: 'Vale, age: 43 }
// par谩metro catch puede ser opcional (Manejo de errores)
//puedo hacer que lo muestre

try {
    hello ();
} catch (error) {
    console.log(error);
}
// ReferenceError: hello is not defined
//     at Object.<anonymous> (c:\Users\Usuario\ECMA-Vale\js\CursoEcmaScript\src\tempCodeRunnerFile.js:2:5)
//     (...)

//puedo hacer que no lo muestre y personalizarlo

try {
    onotherFn();
} catch {
    console.log("esto es un error")
}
//CUIDADO!!! En este 煤ltimo caso no sabr茅 qu茅 est谩 pasando.
//No sabr茅 el motivo por el cual pas贸 a catch