Aprenda estos ingeniosos trucos de JavaScript en menos de 5 minutos

Técnicas de ahorro de tiempo utilizadas por profesionales

1. Borrar o truncar una matriz

Una forma fácil de borrar o truncar una matriz sin reasignarla es cambiando el lengthvalor de su propiedad:

const arr = [11, 22, 33, 44, 55, 66];
// truncantingarr.length = 3;console.log(arr); //=> [11, 22, 33]
// clearingarr.length = 0;console.log(arr); //=> []console.log(arr[2]); //=> undefined

2. Simulación de parámetros con nombre con desestructuración de objetos

Es muy probable que ya esté utilizando objetos de configuración cuando necesite pasar un conjunto variable de opciones a alguna función, como esta:

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 intenta simular parámetros con nombre en JavaScript. La llamada a la función se ve bien. Por otro lado, la lógica de manejo de objetos de configuración es innecesariamente detallada. Con la desestructuración de objetos ES2015, puede sortear este inconveniente:

function doSomething({ foo = 'Hi', bar = 'Yo!', baz = 13 }) { // ...}

Y si necesita hacer que el objeto de configuración sea opcional, también es muy simple:

function doSomething({ foo = 'Hi', bar = 'Yo!', baz = 13 } = {}) { // ...}

3. Desestructuración de objetos para elementos de matriz

Asignar elementos de matriz a variables individuales con la desestructuración de objetos:

const csvFileLine = '1997,John Doe,US,[email protected],New York';
const { 2: country, 4: state } = csvFileLine.split(',');

4. Cambiar con rangos

NOTA: Después de pensarlo un poco, he decidido diferenciar este truco de los demás en este artículo. Esta NO es una técnica que ahorra tiempo, NI es adecuada para el código de la vida real. Tenga en cuenta: los "Si" siempre son mejores en tales situaciones.

A diferencia de los otros consejos de esta publicación, es más una curiosidad que algo para usar realmente.

De todos modos, lo guardaré en este artículo por razones históricas.

Aquí hay un truco simple para usar rangos en declaraciones de cambio:

function getWaterState(tempInCelsius) { let state; switch (true) { case (tempInCelsius  0 && tempInCelsius < 100): state = 'Liquid'; break; default: state = 'Gas'; }
 return state;}

5. Espere múltiples funciones asincrónicas con async / await

Es posible awaitfinalizar varias funciones asíncronas usando Promise.all:

await Promise.all([anAsyncCall(), thisIsAlsoAsync(), oneMore()])

6. Creando objetos puros

Puede crear un objeto 100% puro, que no heredará ninguna propiedad o método de Object(por ejemplo constructor, toString()y así sucesivamente).

const pureObject = Object.create(null);
console.log(pureObject); //=> {}console.log(pureObject.constructor); //=> undefinedconsole.log(pureObject.toString); //=> undefinedconsole.log(pureObject.hasOwnProperty); //=> undefined

7. Formateo de código JSON

JSON.stringifypuede hacer más que simplemente encadenar un objeto. También puede embellecer su salida JSON con él:

const obj = { foo: { bar: [11, 22, 33, 44], baz: { bing: true, boom: 'Hello' } } };
// The third parameter is the number of spaces used to // beautify the JSON output.JSON.stringify(obj, null, 4); // =>"{// => "foo": {// => "bar": [// => 11,// => 22,// => 33,// => 44// => ],// => "baz": {// => "bing": true,// => "boom": "Hello"// => }// => }// =>}"

8. Eliminación de elementos duplicados de una matriz

Mediante el uso de ES2015 Sets junto con el operador Spread, puede eliminar fácilmente elementos duplicados de una matriz:

const removeDuplicateItems = arr => [...new Set(arr)];
removeDuplicateItems([42, 'foo', 42, 'foo', true, true]);//=> [42, "foo", true]

9. Acoplamiento de matrices multidimensionales

Aplastar matrices es trivial con el operador Spread:

const arr = [11, [22, 33], [44, 55], 66];
const flatArr = [].concat(...arr); //=> [11, 22, 33, 44, 55, 66]

Desafortunadamente, el truco anterior solo funcionará con matrices bidimensionales. Pero con llamadas recursivas, podemos hacerlo adecuado para matrices con más de 2 dimensiones:

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 ahí lo tienes! Espero que estos pequeños trucos le ayuden a escribir un JavaScript mejor y más bonito.