10 trucos claves para trabajar con JavaScript

JavaScript ya tiene más de 20 años en este mundo y con el paso del tiempo ha crecido y evolucionado implementando mejoras de forma constante. Es un lenguaje de múltiples paradigmas, ya que admite programación funcional, imperativa y controlada por eventos. Como si esto no fuera suficiente, tiene una API para trabajar con textos, estructuras de datos, el DOM y más.

En pasadas publicaciones aprendimos a sacarle jugo a HTML y también a CSS con una serie de trucos para esos lenguajes. Ahora es el turno de JavaScript el cual es muy flexible y amigable a la hora de programar con él.

🧠Para aprender más trucos y técnicas, no te pierdas nuestra nueva escuela de Javascript

1. Conversión de tipos

Existen diferentes maneras para convertir un dato cualquiera en el tipo de dato de tu preferencia. En el siguiente ejemplo te explicaré cómo convertir a numérico, booleano y string.

Convertir a numérico

El dato numérico puede ser de dos tipos: entero y de punto flotante, también conocido como decimal. Para convertir un dato cualquiera en un entero tienes varias opciones, una de ellas es utilizar los métodos parseInt() y parseFloat(), dependiendo de si quieres trabajar con números enteros o de punto flotante.

// Entero
const dato = '27'
const numero = parseInt(dato, 10)

console.log(dato) 
//> Output: '27'
console.log(numero) 
//> Output: 27

// Flotante
const dato2 = '270.56923'
const numero2 = parseFloat(dato, 10)

console.log(dato) 
//> Output: '270.56923'
console.log(numero2) 
//> Output: 270.56923

Esta es la forma tradicional y funciona muy bien. Sin embargo, existe una opción más rápida de conseguir el mismo resultado, la cual consiste en anteponer el operador unario + al dato que quieres convertir.

// Entero
const dato = '27'
console.log(dato) 
//> Output: '27'
console.log(+dato) 
//> Output: 27

// Flotante
const dato2 = '270.56923'
console.log(dato2) 
//> Output: '270.56923'
console.log(+dato2) 
//> Output: 270.56923

Existe una tercera forma de convertir números dentro de JavaScript y es empleando el constructor del objeto Number().

// Entero
const dato = '27'
const numero = Number(dato)

console.log(dato) 
//> Output: '27'
console.log(numero) 
//> Output: 27

// Flotante
const numero = '270.56923';
console.log(numero); 
//> Output: '270.56923'
console.log(Number(numero)); 
//> Output: 270.56923

¡Listo! Con estos tres sencillos trucos puedes convertir un dato de cualquier tipo a numérico.

Te recomendamos leer: 5 razones para NUNCA aprender JavaScript

Convertir a booleano

Si quieres convertir cualquier dato a booleano, JavaScript ofrece dos opciones. La primera es utilizar el constructor del objeto Boolean() y la segunda es hacer uso del operador !!, también conocido en inglés como Double Bang Operator.

const data = 100

// Constructor Boolean()
const booleano = Boolean(data) 
//> Output: true

// Double Bang Operator
const booleano2 = !!data 
//> Output: true

Convertir a string

Para finalizar los trucos de convertir un dato en otro, existen tres opciones con las que puedes transformar un número en un string. La primera es usar el método toString(), la segunda es con el constructor del objeto String() y la tercera es concatenar el dato a un string vacío, pero esta opción es mejor evitarla, ya que es la menos eficiente y menos clara al leer el código de las tres.

// Método toString()
const phone = 4515698204
console.log(typeof phone.toString) 
//> Output: string

// Función String
const numero = 213214
const texto = String(numero)
console.log(typeof texto) 
//> Output: string

// Concatenando un string vacio
const edad = 27
console.log(typeof (edad + '') 
//> Output: string

Con cualquiera de estos métodos no habrá ningún dato que se resista a ser cambiado de tipo y, aunque estos trucos son bastante útiles, no son los únicos que te voy a enseñar.

2. Interpolación de strings

La interpolación de strings o cadenas de texto no es otra cosa que concatenar texto con otros textos o variables. Anteriormente, se hacía uso de múltiples operadores unarios + para concatenar cada valor deseado, lo cual resulta en un código como el siguiente:

const nombre = 'Alex'
const apellido = 'Camacho'
const saludo = 'Bienvenida' + nombre + ' ' + apellido
console.log(saludo) 
//> Output: Bienvenida Alex Camacho

Es un código bastante difícil de escribir y de leer. Por lo tanto, es recomendable que evites concatenar de esta forma. Actualmente, existe una opción más clara de conseguir el mismo resultado y es a través de los string template literals.

const nombre = 'Alex'
const apellido = 'Camacho'
const saludo = `Bienvenida ${nombre}   ${apellido}`
console.log(saludo) 
//> Output: Bienvenida Alex Camacho

3. Operador ternario

¿Sabías que un if-else simple puede ser resumido en una sola línea de código? Esto es posible gracias al operador ternario, el cual puede mirarse como un if resumido.

El código de un if-else tradicional sería este:

const calificacion = 95;

if (calificacion >= 70) {
	console.log('Materia aprobada')
} else {
	console.log('Materia reprobada')
}

//> Output: Materia aprobada

Al usar el operador ternario, el código resultante es:

const calificacion = 95;
const resultado = (calificacion >= 70) 
								? console.log('Materia aprobada') 
								: console.log('Materia reprobada')

//> Output: Materia aprobada

El código es más simple y fácil de leer, aunque debes tener en cuenta las siguientes consideraciones:

1. Se necesita una variable con la condición a evaluar.

2. Lo que está después del operador ? se evalúa si la condición es verdadera.

3. Lo que está después del operador : se evalúa si la condición en falsa, igual que la sentencia else.

4. El operador : es necesario escribirlo aunque no se necesite, si no se necesita se acostumbra a devolver un null.

   const nombre = 'Alex'
   const saludo = nombre ? console.log(`Hola ${nombre}`) : null
   
   //> Output: Hola Alex
   

4. Operadores de cortocircuito

Continuando con el tema de los if y los ternarios tenemos a los operadores de cortocircuito, los cuales son && y ||. Estos operadores evalúan condiciones de forma más eficiente.

Operador &&

El operador && actúa como un if simple, o sea, sin else. Lo que quiere decir que se ejecuta si, y solamente si, la condición es evaluada como true, en caso contrario ignora el código.

const nombre = 'Alex' 

function saludarPersonalizado (nombre) {
	console.log(`Hola ${nombre}`)
}

// Se ejecutará solamente si el nombre tiene algún valor
nombre && saludarPersonalizado(nombre) 
//> Output: Hola Alex

Operador ||

El operador ||, a diferencia del anterior, se ejecuta únicamente si la condición a evaluar retorna false, null o undefined.

const nombre = null

function saludarGenerico () {
	console.log('Hola')
}

// Se ejecutará solamente si el nombre no tiene un valor definido
nombre || saludarGenerico() 
//> Output: Hola

5. Operador nullish

Sé que acabas de leer el título de esta sección y seguramente estás pensando ¿qué es el operador nullish? Bueno, este operador es ?? y ayuda a validar exclusivamente si el valor es null o undefined.

const datos = undefined

function noDatos () {
	console.log('La propiedad es null o undefined')
}

datos ?? noDatos() 
//> Output: La propiedad es null o undefined

Este operador no es muy usado en el día a día, pero es bastante útil conocer su existencia.

6. Default value

¿Sabes cómo asignarle un valor a una variable cuando esta viene vacía? Piensa en ello, tienes una variable que puede traer un valor, pero también puede no traerlo y únicamente si no lo trae deberías asignar uno. La respuesta más sencilla sería utilizando un if o también un operador de cortocircuito.

// if
if (!dato) { dato = 10 }

// cortocircuito
dato || dato = 10
dato && dato = 10

Si pensaste en hacerlo con un operador de cortocircuito como primera opción, déjame decirte que interiorizaste muy bien el concepto anterior y que por ahí va la respuesta. Simplemente debes combinar esos operadores con el de asignación = y así obtienes la versión más eficiente para este caso.

dato ||= 10
dato &&= 10

Sencillo, directo y rápido 👌🏻

7. Parámetro por defecto en una función

Veamos otro caso de valores por defecto, pero esta vez en una función. Imagina tener una función que recibe hasta cuatro parámetros, pero el tercero no siempre lo recibe. ¿Cómo evitar que arroje un error y mate a toda la aplicación? Ahí es donde entran los valores por defecto y se usan de la siguiente forma:

function comidas (desayuno, comida, merienda = '', cena) {
	...
}

Con esta sencilla asignación, cuando no se reciba un valor, que para este caso es merienda, la función asignará un string vacío y continuará con la ejecución.

8. Operador de encadenamiento opcional

Debes evitar que por falta de datos la aplicación falle. El operador que te ayuda con esto es el de encadenamiento opcional, también conocido como ?. Como lo habrás notado, este operador es útil para varias tareas y también tiene diferentes nombres, todo dependiendo del contexto en el que lo utilices.

El operador de encadenamiento opcional, en inglés conocido como optional chaining, permite hacer una validación a la hora de emplear objetos, arreglos o funciones.

Imagina que tienes el objeto persona, el cual tiene la siguiente estructura:

const persona = {
	nombre: 'Alex',
	apellido: 'Camacho',
	ubicacion: {
		pais: 'México',
		ciudad: 'Guadalajara'
		direccion: 'Calle #7 Colonia Random CP 1234'
	}
}

Para obtener la dirección del objeto anterior solo tendrías que hacer lo siguiente:

console.log(persona.ubicacion.direccion)

Pero, ¿qué sucede si el objeto de dicho usuario no tiene la propiedad de ubicación, porque el usuario decidió no incluir esos datos? En ese caso se obtendría un error como este: Uncaught TypeError: can't access property "direccion", persona.ubicacion is undefined, el cual definitivamente no querrás tener.

Aquí es donde debes usar el operador ? para que JavaScript no arroje este error a la cara y, en caso de no existir, devuelva un undefined.

console.log(persona?.ubicacion?.serie); 
//> Output: undefined

9. Cambiar el tamaño de un arreglo

El siguiente truco es bastante sencillo. Si tienes un arreglo sobre cual quieres eliminar el último elemento, ¿cómo lo harías? La forma tradicional es utilizando los métodos de pop() y splice().

let emojis = ['🙈', '🙉', '🙊', '🐵']
emojis.pop()
emojis.splice(3)

console.log(emojis) 
//> Output: ['🙈', '🙉', '🙊']

Esto funciona, pero también puedes modificar directamente el tamaño del string a través de la propiedad length.

emojis.length = 3
console.log(emojis) 
//> Output: ['🙈', '🙉', '🙊']

10. Eliminar duplicados

JavaScript tiene un objeto Set que es muy especial, ya que permite almacenar valores únicos de cualquier tipo. Al hablar de valores únicos quiere decir que no admite duplicados y esto lo vuelve bastante popular cuando se requieren eliminar esos elementos en un arreglo.

const numeros = [0, 1, 1, 2, 2, 3, 3, 5, 8, 13]
const fibonacci = [...new   Set(numeros)]
console.log(fibonacci) 
//> Output: [0, 1, 2, 3, 5, 8, 13]

Qué es memoization

A seguir aprendiendo

Ahora que has aprendido estos 10 trucos con JavaScript, es tu turno. Comparte en los comentarios el truco que no apareció en esta lista y consideres que es must saber para hacer nuestro día a día más fácil a la hora de programar en JavaScript.

Si quieres no parar de aprender y seguir perfeccionando tus conocimientos sobre este bonito lenguaje, te recomiendo que le eches un ojo al curso Práctico de JavaScript con el increíble JuanDC.

Nos vemos en los comentarios 👋🏻