7 técnicas abreviadas de JavaScript que le ahorrarán tiempo

En este artículo, discutiremos 7 geniales trucos de taquigrafía en JavaScript que le ahorrarán tiempo al desarrollador.

1. Función de flecha: las funciones de flecha de JavaScript se introdujeron en ES6. La principal ventaja de esta función es que tiene una sintaxis más corta.

// Longhand 
function add(a, b) { 
   return a + b; 
} 
  
  
// Shorthand 
const add = (a, b) => a + b;

2. String de varias líneas: para strings de varias líneas, normalmente usamos el operador + con una nueva secuencia de escape de línea (\n). Podemos hacerlo de una manera más fácil usando acentos graves (`).

// Longhand 
console.log('JavaScript is a lightweight, interpreted, '
    + 'object-oriented language\nwith first-class '
    + 'functions, and is best known as the scripting '
    + 'language for Web \npages, but it is used in many'
    + 'non-browser environments as well.\n'); 
  
  
// Shorthand 
console.log(`JavaScript is a lightweight, interpreted, 
object-oriented language with first-class functions, 
and is best known as the scripting language for Web 
pages, but it is used in many non-browser environments 
as well.`);

3. Bucle for: para recorrer una array, normalmente usamos el bucle for tradicional. Podemos hacer uso del ciclo for…of para iterar a través de arreglos. Para acceder al índice de cada valor podemos usar for…in loop.

let myArr = [50, 60, 70, 80]; 
  
// Longhand 
for (let i = 0; i < myArr.length; i++) { 
  console.log(myArr[i]); 
} 
  
  
// Shorthand 
// 1. for of loop 
for (const val of myArr) { 
  console.log(val); 
} 
  
// 2. for in loop 
for (const index in myArr) { 
  console.log(`index: ${index} and value: ${myArr[index]}`); 
}

4. String en un número: hay métodos incorporados como parseInt y parseFloat disponibles para convertir una string en un número. También se puede hacer simplemente proporcionando un operador unario (+) delante del valor de la string.

// Longhand 
let a = parseInt('764'); 
let b = parseFloat('29.3'); 
  
  
// Shorthand 
let a = +'764'; 
let b = +'29.3';

5. Intercambiar dos variables

Para intercambiar dos variables, a menudo usamos una tercera variable. Pero se puede hacer fácilmente con la asignación de desestructuración de array.

//Longhand
let x = 'Hello', y = 'World';  
const temp = x; 
x = y; 
y = temp; 
  
  
//Shorthand 
[x, y] = [y, x];

6. Fusión de arrays: para fusionar dos arrays, se puede usar lo siguiente:

// Longhand 
let a1 = [2, 3]; 
let a2 = a1.concat([6, 8]); 
  
// Output: [2, 3, 6, 8] 
  
  
// Shorthand 
let a2 = [...a1, 6, 8]; 
  
// Output: [2, 3, 6, 8]

7. Comprobación de condiciones múltiples: para la coincidencia de valores múltiples, podemos poner todos los valores en una array y usar el método indexOf() o include().

// Longhand 
if (value === 1 || value === 'hello' || value === 2 || value === 'world') { 
    ...
} 
  
// Shorthand 1
if ([1, 'hello', 2, 'world'].indexOf(value) >= 0) { 
    ... 
}
  
// Shorthand 2
if ([1, 'hello', 2, 'world'].includes(value)) { 
    ... 
}