Técnicas para ahorrar tiempo usadas por profesionales
1. Vaciar o truncar un array
Una forma sencilla de vaciar o truncar un array sin reasignarlo es cambiar su el valor de su propiedad length
|
1 2 3 4 5 6 7 8 9 10 |
const arr = [11, 22, 33, 44, 55, 66]; // truncado arr.length = 3; console.log(arr); //=> [11, 22, 33] // vaciado arr.length = 0; console.log(arr); //=> [] console.log(arr[2]); //=> undefined |
2. Simular parámetros nombrados con desestructuración de objetos
Es muy posible que ya estés usando objetos de configuración cuando necesitas pasar una serie de variables a una función, tal que así:
|
1 2 3 4 5 6 7 8 |
doSomething({ foo: 'Hello', bar: 'Hey!', baz: 42 }); function doSomething(config) { const foo = config.foo !== undefined ? config.foo : 'Hi'; const bar = config.bar !== undefined ? config.bar : 'Yo!'; const baz = config.baz !== undefined ? config.baz : 13; // ... } |
Este es un patrón antiguo pero efectivo, que intentar simular parámetros nombrados en JavaScript. La llamada a la función está bien, pero por otro lado, el manejo del objeto config es innecesariamente verboso. Con la desestructuración de objetos de ES2015, podemos evitarlo:
|
1 2 3 |
function doSomething({ foo = 'Hi', bar = 'Yo!', baz = 13 }) { // ... } |
Y si necesitas que el objeto config sea opcional, también es muy sencillo:
|
1 2 3 |
function doSomething({ foo = 'Hi', bar = 'Yo!', baz = 13 } = {}) { // ... } |
3. Desestructuración de objetos para elementos de arrays
Asignar elementos de array a variables individuales con desestructuración de objetos:
|
1 2 3 |
const csvFileLine = '1997,John Doe,US,john@doe.com,New York'; const { 2: country, 4: state } = csvFileLine.split(','); |
4. Switch con rangos
Aquí tienes un sencillo truco para usar rangos en la sentencia switch:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
function getWaterState(tempInCelsius) { let state; switch (true) { case (tempInCelsius <= 0): state = 'Solid'; break; case (tempInCelsius > 0 && tempInCelsius < 100): state = 'Liquid'; break; default: state = 'Gas'; } return state; } |
5. Esperar múltiples funciones asíncronas con async/await
Es posible esperar await a que terminen múltiples funciones asíncronas usando Promise.all.
|
1 |
await Promise.all([anAsyncCall(), thisIsAlsoAsync(), oneMore()]) |
6. Creando objetos puros
Puedes crear objetos 100% puros, que no heredan ninguna propiedad o método de Object (por ejemplo, constructor, toString(), entre otros).
|
1 2 3 4 5 6 |
const pureObject = Object.create(null); console.log(pureObject); //=> {} console.log(pureObject.constructor); //=> undefined console.log(pureObject.toString); //=> undefined console.log(pureObject.hasOwnProperty); //=> undefined |
Formateo de código JSON
JSON.stringify puede hacer más que sencillamente convertir a string un objeto. También puede 'embellecer' la salida de nuestro JSON con:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
onst obj = { foo: { bar: [11, 22, 33, 44], baz: { bing: true, boom: 'Hello' } } }; // El tercer parámetro es el número de espacios usados para // embellecer la salida del JSON. JSON.stringify(obj, null, 4); // =>"{ // => "foo": { // => "bar": [ // => 11, // => 22, // => 33, // => 44 // => ], // => "baz": { // => "bing": true, // => "boom": "Hello" // => } // => } // =>}" |
8. Eliminar elementos duplicados en un array
Usando Set de ES2015 con el operador Spread, podemos fácilmente eliminar elementos duplicados dentro de un array.
|
1 2 3 4 |
const removeDuplicateItems = arr => [...new Set(arr)]; removeDuplicateItems([42, 'foo', 42, 'foo', true, true]); //=> [42, "foo", true] |
9. 'Aplanar' arrays multidimensionales
'Aplanar' arrays es trivial mendiante el operador Spread:
|
1 2 3 |
const arr = [11, [22, 33], [44, 55], 66]; const flatArr = [].concat(...arr); //=> [11, 22, 33, 44, 55, 66] |
Desafortunadamente, el truco anterior sólo funciona con arrays bidimensionales. Pero con llamadas recursivas, podemos usarlo con arrays de más de dos dimensiones:
|
1 2 3 4 5 6 7 8 9 10 11 |
function flattenArray(arr) { const flattened = [].concat(...arr); return flattened.some(item => Array.isArray(item)) ? flattenArray(flattened) : flattened; } const arr = [11, [22, 33], [44, [55, 66, [77, [88]], 99]]]; const flatArr = flattenArray(arr); //=> [11, 22, 33, 44, 55, 66, 77, 88, 99] |
¡Y aquí lo tenemos! Espero que estos pequeños trucos os ayuden a escribir un mejor código JavaScript
Nota: puedes encontrar el artículo original en https://medium.freecodecamp.org/9-neat-javascript-tricks-e2742f2735c3