🥇12 trucos para trabajar con JavaScript que no encontrarás en la mayoría de los tutoriales

Cuando empecé a aprender JavaScript, lo primero que hice fue hacer una lista de trucos que me ayudaban a ahorrar tiempo. Los vi en otros programadores, en diferentes sitios y manuales.

En este artículo, mostraré 12 formas excelentes de mejorar y acelerar tu código JavaScript. En la mayoría de los casos, son universales.

Recordamos: para todos los lectores de «Habr» — un descuento de 10,000 rublos al registrarse en cualquier curso de Skillbox usando el código promocional «Habr».

Skillbox recomienda: Curso práctico «Desarrollador Móvil PRO».

Filtrando valores únicos

MATRICES

El tipo de objeto Set fue introducido en ES6, junto con el operador spread, que podemos usar para crear un nuevo array que solo contenga valores únicos.

const array = [1, 1, 2, 3, 5, 5, 1]
const uniqueArray = [...new Set(array)];

console.log(uniqueArray); // Resultado: [1, 2, 3, 5]

En una situación normal, necesitarías mucho más código para realizar la misma operación.

Este truco funciona para arrays que contienen tipos primitivos: undefined, null, boolean, string y number. Si trabajas con un array que contiene objetos, funciones o arrays adicionales, necesitarás otro enfoque.

Longitud del array en ciclos

CICLOS

Cuando estudias for para ciclos, sigues el procedimiento estándar:

for (let i = 0; i < array.length; i++) {
  console.log(i);
}

Sin embargo, con esta sintaxis, el ciclo for verifica la longitud del array en cada iteración.

A veces puede ser útil, pero en la mayoría de los casos es más eficiente almacenar en caché la longitud del array, lo que requiere una sola referencia a él. Podemos hacerlo definiendo una variable de longitud, donde establecemos la variable i, por ejemplo así:

for (let i = 0, length = array.length; i < length; i++) {
  console.log(i);
}

En principio, casi lo mismo que lo anterior, pero al aumentar el tamaño del ciclo obtendremos un ahorro de tiempo significativo.

Evaluación de cortocircuito (evaluación de McCarthy)

OPERADORES CONDICIONALES

El operador ternario es una forma rápida y eficiente de escribir declaraciones condicionales simples (y a veces no tan simples):

x > 100 ? 'más de 100' : 'menos de 100';
x > 100 ? (x > 200 ? 'más de 200' : 'entre 100-200') : 'menos de 100';

Pero a veces incluso el operador ternario es más complejo de lo necesario. En su lugar, podemos usar los operadores lógicos 'and' && y 'or' || para evaluar algunas expresiones de forma aún más breve. A menudo se le llama 'cortocircuito' o 'evaluación de cortocircuito'.

¿Cómo funciona?

Supongamos que queremos devolver solo una de dos o más condiciones.

El uso de && devolverá el primer valor false. Si cada operando se evalúa como true, se devolverá la última expresión evaluada.

let one = 1, two = 2, three = 3;
console.log(one && two && three); // Resultado: 3
 
console.log(0 && null); // Resultado: 0

El uso de || permitirá devolver el primer valor true. Si cada operando se evalúa como false, se devolverá el último valor evaluado.

let one = 1, two = 2, three = 3;
console.log(one || two || three); // Resultado: 1
 
console.log(0 || null); // Resultado: null

Ejemplo 1

Digamos que queremos devolver el length de una variable, pero no sabemos su tipo.

En este caso, se puede usar if/else para verificar que foo es del tipo adecuado, pero este método puede resultar demasiado largo. Por lo tanto, es mejor usar nuestra "evaluación corta".

return (foo || []).length;

Si la variable foo tiene un length adecuado, este se devolverá. De lo contrario, obtendremos 0.

Ejemplo 2

¿Tuviste problemas accediendo a un objeto anidado? Puede que no sepas si un objeto o una de sus propiedades existe, lo que puede causar problemas.

Por ejemplo, queríamos acceder a la propiedad data en this.state, pero data no está definida hasta que nuestra programa retorna la solicitud.

Dependiendo de dónde lo usemos, la llamada a this.state.data podría impedir que la aplicación funcione. Para solucionar el problema, podríamos envolverlo en una expresión condicional:

if (this.state.data) {
  return this.state.data;
} else {
  return 'Fetch Data';
}

Una opción más adecuada sería utilizar el operador "or".

return (this.state.data || 'Fetch Data');

No podemos modificar el código anterior para usar &&. El operador 'Fetch Data' && this.state.data devolverá this.state.data sin importar si es undefined o no.

Cadena opcional

Se puede sugerir utilizar la cadena opcional al intentar devolver una propiedad profundamente en una estructura arbórea. Así, el símbolo de signo de interrogación ? se puede usar para extraer una propiedad solo si no es null.

Por ejemplo, podríamos haber refactorizado el ejemplo anterior, obteniendo this.state.data?.. (). Es decir, data se devuelve solo si el valor no es null.

O, si es importante si el state está definido o no, podríamos devolver this.state?.data.

Conversión a Boolean

CONVERSIÓN DE TIPOS

Además de los valores booleanos normales true y false, JavaScript también considera todos los demás valores como truthy o falsy.

A menos que se indique lo contrario, todos los valores en JavaScript son truthy, a excepción de 0, «», null, undefined, NaN y, por supuesto, false. Estos últimos son falsy.

Podemos alternar fácilmente entre ambos utilizando el operador !, que también convierte el tipo a booleano.

const isTrue = !0;
const isFalse = !1;
const alsoFalse = !!0;
 
console.log(true); // Resultado: true
console.log(typeof true); // Resultado: "boolean"

Conversión a cadena

CONVERSIÓN DE TIPOS

La conversión rápida de un número entero a cadena se puede hacer de la siguiente manera.

const val = 1 + "";
 
console.log(val); // Resultado: "1"
console.log(typeof val); // Resultado: "string"

Conversión a número entero

CONVERSIÓN DE TIPOS

La conversión inversa se realiza de esta manera.

let int = "15";
int = +int;
 
console.log(int); // Resultado: 15
console.log(typeof int); // Resultado: "number"

Este método también puede ser utilizado para convertir valores booleanos a valores numéricos estándar, como se muestra a continuación:

console.log(+true); // Retorno: 1
console.log(+false); // Retorno: 0

Puede haber situaciones en las que + se interprete como operador de concatenación en lugar de suma. Para evitar esto, es recomendable utilizar los tilde: ~~. Este operador es equivalente a la expresión -n-1. Por ejemplo, ~ 15 es igual a -16.

El uso de dos tildes consecutivas anula la operación, ya que — (- — n — 1) — 1 = n + 1 — 1 = n. En otras palabras, ~ -16 es igual a 15.

const int = ~~"15"
console.log(int); // Resultado: 15
console.log(typeof int); // Resultado: "number"

<Quick Powers

OPERACIONES

Desde ES7, se puede utilizar el operador de exponenciación ** como una forma abreviada para potencias. Esto es mucho más rápido que usar Math.pow(2, 3). Aunque parece sencillo, este detalle se incluye en la lista de trucos, ya que no siempre se menciona.

console.log(2 ** 3); // Resultado: 8

No lo confundas con el símbolo ^, que se utiliza comúnmente para la exponenciación. Pero en JavaScript, este es el operador XOR.

Hasta ES7, la abreviatura ** solo se podía aplicar a potencias de base 2 usando el operador de desplazamiento a la izquierda <<:

Math.pow(2, n);
2 << (n - 1);
2**n;

Por ejemplo, 2 << 3 = 16 es equivalente a la expresión 2 ** 4 = 16.

Flotante a número entero

OPERACIONES / CONVERSIÓN DE TIPOS

Si es necesario convertir un flotante a un número entero, se pueden usar Math.floor(), Math.ceil() o Math.round(). Pero también hay un camino más rápido, que es usar |, es decir, el operador OR.

console.log(23.9 | 0); // Resultado: 23
console.log(-23.9 | 0); // Resultado: -23

El comportamiento | depende en gran medida de si está tratando con números positivos o negativos, por lo que este método solo es adecuado si está seguro de lo que está haciendo.

n | 0 elimina todo lo que está después del separador decimal, truncando el número de punto flotante a un número entero.

Puede obtener el mismo efecto de redondeo usando ~~. Después de forzar la conversión a un número entero, el valor permanece sin cambios.

Eliminando los números de cierre

El operador OR se puede usar para eliminar cualquier cantidad de dígitos de un número. Esto significa que no necesitamos convertir tipos, como aquí:

let str = "1553";
Number(str.substring(0, str.length - 1));

En su lugar, simplemente escribimos:

console.log(1553 / 10   | 0)  // Resultado: 155
console.log(1553 / 100  | 0)  // Resultado: 15
console.log(1553 / 1000 | 0)  // Resultado: 1

Vinculación automática

CLASES

Las funciones de flecha de ES6 se pueden usar en los métodos de clase, y esto implica vinculación. Gracias a esto, podemos despedirnos de expresiones repetitivas, como this.myMethod = this.myMethod.bind(this)!

import React, { Component } from React;
 
export default class App extends Component {
  constructor(props) {
  super(props);
  this.state = {};
  }
 
myMethod = () =&gt; {
    
    // Este método está ligado implícitamente!
  }
 
render() {
    return (
      <>
        <div>
          {this.myMethod()}
        </div>
      </>
    )
  }
};

Recorte de matriz

MATRICES

Si necesita eliminar valores de una matriz, hay métodos más rápidos que splice().

Por ejemplo, si conoce el tamaño de la matriz original, puede redefinir su propiedad length de la siguiente manera:

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array.length = 4;

console.log(array); // Resultado: [0, 1, 2, 3]

Pero hay otro método, y es más rápido. Si la velocidad es lo que le importa, aquí está nuestra elección:

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
array = array.slice(0, 4);

console.log(array); // Resultado: [0, 1, 2, 3]

Imprimiendo el último valor (valores) de la matriz

MATRICES
Este truco requiere el uso del método slice().

let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

console.log(array.slice(-1)); // Resultado: [9]
console.log(array.slice(-2)); // Resultado: [8, 9]
console.log(array.slice(-3)); // Resultado: [7, 8, 9]

Formato del código JSON

JSON

Es posible que ya haya utilizado JSON.stringify. ¿Sabe que ayuda a formatear su JSON?

El método stringify() toma dos parámetros opcionales: una función replacer, que se puede usar para filtrar el JSON mostrado, y un valor space.

console.log(JSON.stringify({ alpha: 'A', beta: 'B' }, null, 't'));

// Resultado:
// '{
//     "alpha": A,
//     "beta": B
// }'

Eso es todo, espero que todos los trucos mencionados hayan sido útiles. ¿Y qué trucos conoces tú? Escribe los tuyos en los comentarios.

Skillbox recomienda:

Curso práctico de dos años «Soy Desarrollador Web PRO».

Curso en línea «Desarrollador C# desde cero».

Curso práctico de un año «Desarrollador PHP desde 0 hasta PRO».

Fuente: habr.com