6 características de JavaScript que debe conocer

Hace poco más de un año hablamos sobre las 5 “nuevas” funciones de JavaScript que debe saber para desarrollarse cómodamente en Gutenberg. Allí aprendimos cuáles son la destrucción de los objetos y la matriz, cómo crear flechas, cuáles son los operadores de propagación y descanso, etc. Afortunadamente, JavaScript tiene muchas funciones que, una vez que los familiarice, lo ayudará a escribir un código más inteligible y breve. Hoy les mostraré seis funciones de JavaScript muy interesantes. Operadores, objetivo variable, promesas, funciones asincrónicas … ¿estás listo para aprenderlos a todos?
#1 Cadena opcional en JavaScript con el operador? El operador de encadenamiento opcional permite el acceso simplificado a los atributos de un objeto cuando existe la posibilidad de que uno esté indefinido o nulo. Por ejemplo, suponga que tiene un objeto como el siguiente: const toni = {nombre: ‘Antonio’, detalles: {edad: 35,},}; Para acceder a la edad de Toni, primero tiene acceso al atributo de detalles y luego en edad: function getAge (persona) {return persona.details.age; } El problema que tenemos en la posición anterior y estoy seguro de que no hay nada nuevo para usted, es que las propiedades que esperamos tener no siempre están ahí. Es decir, si la persona o la persona. Las colas no son sinfinar, la función anterior activará un error de tipo:
Getage (Toni); // 35 getage ({}); // Uncud TypeError: Person.details está Ustefinido, superamos este problema agregando algunas medidas de seguridad: function getAge (persona) {if (! Person) {return; } if (! Person.details) {return; } return persona.details.age; } Getage (toni); // 35 getage ({}); // Indfinido que lo repara claramente. Desafortunadamente, la función resultante es más compleja y tiene mucho código ruidoso que elimina nuestra atención de las cosas que realmente importan. Para volver a la pista correcta y arreglar la solución de una manera más simple, ¿todo lo que tenemos que hacer es usar el operador de cadena opcional? : function getAge (persona) {return Person? .details? .age; } Getage (toni); // 35 getage ({}); // Sin fondos, este operador nos permite acceder a cada propiedad siempre que no esté sin defensa ni nula. Tan pronto como detecta que estamos tratando de acceder a una propiedad de objeto no existente, devoluciones indefinidas. # 2 Operador de Coalescing Nullish (??) En Javascript Es muy fácil establecer un valor predeterminado usando este operador: || , ¿Correcto? ¡Equivocado! Todos hemos hecho esto, pero puede conducir a efectos secundarios inesperados si no tiene cuidado … por ejemplo, supongamos que tenemos un selector en nuestra tienda Rodux que nos permite recuperar un valor de usuarios. Si el usuario no ha especificado otro valor (es decir, el valor no está definido), devolvemos un valor predeterminado usando || :
Función getValue (estado) {return state.Value || 5; } Ahora, veamos algunos ejemplos de lo que obtenemos con la función anterior después de que el usuario ha establecido un valor u otro: // sin setValue (x) … getValue (); // 5 setValue (2); GetValue (); // 2 setValue (1); GetValue (); // 1 setValue (0); GetValue (); // 5 HOP! ¡Todo funcionó bien hasta que llegué al último caso! Aparentemente, si el usuario establece el valor en 0, el resultado de la función se convierte en 5. ¿Por qué? Bueno, la razón es bastante obvia: x || y Devuelve y si y solo si, x es un valor “falso”. Esto generalmente funciona bien, porque no fallado es un valor falso. Pero también son falsos o 0, por ejemplo. En realidad, queríamos establecer un valor predeterminado cuando no existe. Por lo tanto, podemos agregar una protección para verificar si hay o no un valor: la función getValue (estado) {if (undefined === state.value) return 5; Estado de retorno. Valor; } E incluso podemos escribirlo usando el operador ternario si nos sentimos ansiosos: function getValue (estado) {return undefined === state.value? 5: Estado. Valor; } Pero, una vez más, ambas soluciones complican innecesariamente el código. Para asignar un valor implícito a una variable, ¿debemos usar el operador NULL Coalesce? , que devuelve el lado derecho si y solo si el lado izquierdo es nulo o no afinado:
Función getValue (estado) {return state.value ?? 5; } Y, ¡Surprise-Surprise!, El resultado es exactamente lo que queríamos: // sin setValue (x) … getValue (); // 5 setValue (2); GetValue (); // 2 setValue (1); GetValue (); // 1 setValue (0); GetValue (); // 0 A y, por cierto, puede usar este operador combinado con una misión. Por ejemplo, este: valor = valor? 5; Es equivalente a esto: valor ?? = 5; Las promesas # 3 y las promesas asincrónicas son un mecanismo implementado en JavaScript que nos permite simplificar nuestro código fuente cuando trabajamos con operaciones asíncronas, es decir, operaciones cuyos resultados no están disponibles de inmediato. Por ejemplo, si queremos extraer datos de nuestro servidor, está claro que la respuesta no será instantánea, porque debemos esperar a que el servidor reciba la solicitud, procesarlos y enviarnos la respuesta. En las versiones de JavaScript más antiguas y bibliotecas (por ejemplo, jquey) solíamos implementar esto con llamadas inversas. La idea era bastante simple: junto con la demanda misma, defina la función (devolución de llamada) que debería llamarse una vez que la respuesta esté disponible. De esta manera, cuando finalice la operación asíncrona (es decir, los datos del servidor), la biblioteca llamará a nuestra función y nuestra lógica se reanudará: jquery.ajax ({url: ‘https://server.com/wp-json/ wp /users /1 ‘, éxito: (usuario) => {console.log (user);},}); Si activamos solo una solicitud, aislada, esta solución es bastante elegante y conveniente. Pero tan pronto como tenemos que cumplir más solicitudes, las cosas se ensucian rápidamente. Por ejemplo, si queremos solicitar a dos usuarios diferentes, debe vestir las llamadas inversas:
jQuery.AJAX ({url: ‘https://server.com/wp-json/wp/v2/users/1’, éxito: (user1) => {jquery.AJAX ({url: ‘https: // .com/wp-json/wp/v2/users/2 ‘, éxito: (user2) => {console.log (user1, user2);},};},}); Las promesas son la solución a este problema: si obtiene un resultado particular, no es inmediato (como, por ejemplo, cuando recuperamos algo de un servidor), podemos devolver inmediatamente una promesa de JavaScript. Este objeto es un recubrimiento de valor real y significa la “promesa” de que el valor estará disponible en un momento dado en el futuro. Por ejemplo, si reescribiéramos nuestro primer fragmento usando promesas, se vería así: prome = wp.apifet ({url: ‘https://server.com/wp-json/wp/v2/users/1’ ,}); promet.hen ((usuario) => console.log (usuario)); Como puede ver, wp.apifetch debe hacerse cargo del usuario 1 en el servidor, pero ofrece un resultado inmediato. Sin embargo, el resultado no es el propio usuario, sino una promesa que se resolverá para el usuario una vez que se completen las solicitudes. Por lo tanto, todo lo que tenemos que hacer es escribir una devolución de llamada que procese la respuesta de la promesa cuando se resuelva. Podrías pensar ahora que esto no es tan difícil por lo que tenía antes, ¿verdad? Después de todo, todavía usamos llamadas inversas … pero puede ver lo útil que es una vez que comenzamos a combinar más solicitudes:
Constance1 = wp.apifetch ({url: ‘https://server.com/wp-json/wp/v2/users/1’,}); Construment2 = wp.pifet ({url: ‘https://server.com/wp-json/wp/v2/users/2’,}); Promise.all ([Promis1, promise2]) .sen ([user1, user2]) => console.log (user1, user2);); Usando promesas, logramos lanzar dos solicitudes paralelas para hacerse cargo de los usuarios 1 y 2 y usar promesa. Todos para esperar a que ambas promesas se resuelvan. No hay código de espagueti con llamadas vestidas involucradas. Bueno, lo mejor de las promesas aún está por venir. Podemos usar un poco de azúcar sintáctica para trabajar con promesas de JavaScript y escribir un código asíncrono que muestre sincrónico. Todo lo que tiene que hacer es definir una función asíncrona utilizando la palabra clave asíncrona y de repente las cosas se vuelven mucho más fáciles: la función async logTWoUsers (id1, id2) {const user1 = await wp.apifet ({url: ‘…’ + id1}); const user2 = ALEA WP.APIFET ({url: ‘…’ + id2}); console.log (user1, user2); } Siempre que llame a una función asíncrona en una función asíncrona, puede esperar su resultado utilizando la palabra clave. Lo único que debe recordar es que cuando define una función async, su resultado siempre será una promesa: la función async getBerFive () {return 5; } Const P = getNumberFive (); // prometido P.Sen (console.log); // Imprime el dominio variable “5” # 4 Cuando se usa y consiste como probablemente ya sepa, ahora puede declarar variables usando las palabras clave LET y const. El primero define una variable, y el segundo define una constante: Sea x = 1; console.log (x);
// 1 x = 2; console.log (x); // 2 const y = 1; console.log (y); // 1 y = 2; // typeError no capturado: asignación no válida a const ‘y’ console.log (y); // 1 podría estar tentado a creer que LET y VAR son los mismos, porque ambas palabras clave nos permiten declarar una variable imparable. Pero hay una diferencia sustancial entre ellos: su dominio. Con Let and Con, el alcance de la variable es el bloque en el que se define. En cal, es toda la función. Funion fn () {if (true) {var x = 1; Sea y = 2; Const z = 3; } // end if console.log (x); // 1 consola.log (y); // Uncude RefferenceError: y no está definido console.log (z); // Uncude RefectionError: Z no está definido} # 5 Transformación de datos cuando se usa JSON.Pars la función JSON. Por ejemplo: const x = json.parse (‘{“x”: 1, “a”: [1,2,3]}’); // Objeto {X: 1, A: [1, 2, 3]} Lo que la mayoría de la gente no sabe al respecto es apoyar un segundo argumento llamado Reviver. Este parámetro es una función que se ejecutará para cada elemento que se analiza, lo que le permite manipular el valor como desee. Por ejemplo, imagine una cadena JSON como la siguiente: const json = ‘{“nombre”: “David”, “cumpleaños”: “1985-12-01t10: 00: 00.000z”}’; Si usamos json.parsa tal como está, generará un objeto con dos atributos de cadena: nombre y día de cumpleaños. Pero si ofrecemos una función JSON. Parse Reviver, podemos asegurarnos de que el día del cumpleaños se analice como datos: const user = json.parse (json, (clave, valor) =>