Todos los años tenemos nuevas actualizaciones en JavaScript que permiten hacer nuestra lógica de manera más legible y si se puede con menos lineas de código.
\nEn este pequeño escrito voy a mencionar algunas de estas por las cuales estoy emocionado (Algunas de estas estan todavia en etapa experimental).
\nEsta funcionalidad es una de las que pienso “Porque mierda no la metieron desde mucho antes”. Como todos saben, para acceder a un elemento que se encuentra en un listado a travez del índice se debe pasar este último dentro de llaves cuadradas, i.e.
\nconst list = ['banana', 'coconut', 'pineapple']\n\nconst lastElement = list[2] // pineapple\n Lo que se ve arriba esta bastante bien PERO hay detalles cuando quieres acceder a los últimos elementos de la lista. Tu supondrías que puedes acceder al último elemento de la lista de la misma manera que lo haces para el primero pero no, no podrías estar más equivocado, y es aquí donde no entiendes las decisiones que toma el cómite del EcmaScript
\nconst list = ['banana', 'coconut', 'pineapple']\n\nconst lastElement = list[-1] // undefined\n\n// The correct way to iterate thru the list in reverse order\n// is practically doing an operation. The length of the list - the element\n\nconst lastElement = list[list.length - 1] // pineapple\n Si, es aquí cuando te preguntas porque hacen eso y solo queda aceptar la realidad.
\nPero afortunadamente hay que gente cuerda y entiende que debe haber maneras más sencillas de hacer esto, y es aquí donde viene .at
\nconst list = ['banana', 'coconut', 'pineapple']\n\nconst firstElement = list.at(0) // banana\nconst lastElement = list.at(-1) // pineapple\n A que es bello. Gracias a esas personas que pensaron en esto y lo hicieron posible.
\nNo te ha pasado que tienes un listado de elementos y necesitas agruparlos por un tipo en dato en específico, si no te ha tocado ¿qué rayos es lo que haces?. Para lograr hacer este tipo de agrupamiento hay varias formas de hacerlo pero generalmente tocaba iterar por cada uno de los elemento, inicializar una colección vacía y agregar los elementos en el formato que se quería.
\nAhora con la incorporación de estos métodos no podría ser más sencillo.
\nconst inventory = [\n { name: 'asparagus', type: 'vegetables', quantity: 5 },\n { name: 'bananas', type: 'fruit', quantity: 0 },\n { name: 'goat', type: 'meat', quantity: 23 },\n { name: 'cherries', type: 'fruit', quantity: 5 },\n { name: 'fish', type: 'meat', quantity: 22 }\n];\n\nconst group = inventory.groupBy(({ type }) => type)\n\n/* group is:\n{ \n vegetables: [\n { name: 'asparagus', type: 'vegetables', quantity: 5 }, \n ],\n fruit: [\n { name: "bananas", type: "fruit", quantity: 0 },\n { name: "cherries", type: "fruit", quantity: 5 }\n ], \n meat: [\n { name: "goat", type: "meat", quantity: 23 },\n { name: "fish", type: "meat", quantity: 22 }\n ] \n}\n*/\n ¿Sencillo verdad?. Estos métodos va ayudar a muchos desarrolladores a reducir tiempo en sus trabajos y reducir la cantidad de lineas de código.
\nPor cierto, esta no es la única manera de hacerlo, como tal, el método recibe o espera una función que recibe como parametro el elemento, lo que permite que jueges en como quieres hacer las agrupaciones o la lógica para estas.
\nconst inventory = [\n { name: 'asparagus', type: 'vegetables', quantity: 5 },\n { name: 'bananas', type: 'fruit', quantity: 0 },\n { name: 'goat', type: 'meat', quantity: 23 },\n { name: 'cherries', type: 'fruit', quantity: 5 },\n { name: 'fish', type: 'meat', quantity: 22 }\n];\n\nfunction myCallback( { quantity } ) {\n return quantity > 5 ? 'ok' : 'restock';\n}\n\nconst group = inventory.groupBy( myCallback );\n\n/* group is:\n{ \n restock: [\n { name: "asparagus", type: "vegetables", quantity: 5 },\n { name: "bananas", type: "fruit", quantity: 0 },\n { name: "cherries", type: "fruit", quantity: 5 }\n ], \n ok: [\n { name: "goat", type: "meat", quantity: 23 },\n { name: "fish", type: "meat", quantity: 22 }\n ] \n}\n*/\n Como puedes ver es una manera muy práctica de hacer agrupaciones que estoy seguro muchos desarrolladores/as comenzaran a usar.
\nEl otro método usado es Array.groupByToMap básicamente lo que hace es lo mismo que su compañero pero en vez de retornar un objeto, retorna un Map.
\nconst inventory = [\n { name: 'asparagus', type: 'vegetables', quantity: 5 },\n { name: 'bananas', type: 'fruit', quantity: 0 },\n { name: 'goat', type: 'meat', quantity: 23 },\n { name: 'cherries', type: 'fruit', quantity: 5 },\n { name: 'fish', type: 'meat', quantity: 22 }\n];\n\nconst restock = { restock: true };\nconst sufficient = { restock: false };\n\nconst result = inventory.groupByToMap( ({ quantity }) => quantity < 6 ? restock : sufficient );\nconsole.log(result.get(restock));\n// expected output: Array [Object { name: "bananas", type: "fruit", quantity: 5 }]\n Tiene un detalle. Al usar este método ten presente que debes usar la misma key para obtener el/los elemento/s.
\n¿ Estas cansado de usar el operador ternario ? ¿ Crees que deberían haber maneras más sencillas de validar datos ? ¿ leíste lo anterior con voz de comerciante en televisión ?. Hay una solución para lo anterior ( excepto la voz de comerciante ) y es la implementación de este nuevo operador lógico.
\nconst customer = {\n\tfirstName: 'fernando',\n\tlastName: 'pineda',\n\tage: 30,\n\tisActive: true,\n\taddress: {\n\t\tcity: 'Bogota',\n\t\tcountry: 'Colombia',\n\t}\n}\n\n// Let's say you want to get the address information\n// but as these information could be optional\n// you need to validate if the field has data\n\n/*\n\tlet customerAddress = null\n\tif ( customer.addess && customer.addess.city ) {\n\t\tcustomerAddress = customer.address\n\t} else {\n\t\tcustomerAddress = {\n\t\t\tcity: '',\n\t\t\tcountry: ''\n\t\t}\n\t}\n*/\n\n// A shorter way of doing the above is\n\nconst customerAddress = customer.address ?? { city: '', country: '' }\n El uso de los dobles signos de interrogación permite comparar el valor del operando a la izquierda del operador, si este es un valor Nullish (null, undefined. Esta es u diferencia con el operando || que considera valores Falsy ), retorna el operando de la derecha.
","frontmatter":{"title":"JavaScript: Nuevas Funcionalidades ","image":"/assets/es_portrait.svg"},"excerpt":"Todos los años tenemos nuevas actualizaciones en JavaScript que permiten hacer nuestra lógica de manera más legible y si se puede con menos…"}},"pageContext":{"slug":"/posts/nuevas-funcionalidades-en-javascript/","title":"JavaScript: Nuevas Funcionalidades "}}, "staticQueryHashes": ["63159454"]}