145

10 trucos claves para trabajar con JavaScript

41417Puntos

hace 3 meses

Curso Práctico de JavaScript
Curso Práctico de JavaScript

Curso Práctico de JavaScript

Aprende desarrollo web con JavaScript. Practica los fundamentos de la programación para crear algoritmos que resuelven problemas en la vida real. Convierte problemas en algoritmos con JavaScript y expande su poder integrando HTML interactivo. Descubre el potencial de programar sitios web con JavaScript junto a tu profesor JuanDC.

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.

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.

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

console.log(dato) 
//> Output: '27'console.log(numero) 
//> Output: 27// Flotanteconst 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.

// Enteroconst dato = '27'console.log(dato) 
//> Output: '27'console.log(+dato) 
//> Output: 27// Flotanteconst 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().

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

console.log(dato) 
//> Output: '27'console.log(numero) 
//> Output: 27// Flotanteconst 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.

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 Operatorconst 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 = 4515698204console.log(typeof phone.toString) 
//> Output: string// Función Stringconst numero = 213214const texto = String(numero)
console.log(typeof texto) 
//> Output: string// Concatenando un string vacioconst edad = 27console.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'functionsaludarPersonalizado (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 = nullfunctionsaludarGenerico () {
	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 = undefinedfunctionnoDatos () {
	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.

// ifif (!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:

functioncomidas(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 = [...newSet(numeros)]
console.log(fibonacci) 
//> Output: [0, 1, 2, 3, 5, 8, 13]

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 👋🏻

Curso Práctico de JavaScript
Curso Práctico de JavaScript

Curso Práctico de JavaScript

Aprende desarrollo web con JavaScript. Practica los fundamentos de la programación para crear algoritmos que resuelven problemas en la vida real. Convierte problemas en algoritmos con JavaScript y expande su poder integrando HTML interactivo. Descubre el potencial de programar sitios web con JavaScript junto a tu profesor JuanDC.
Alex
Alex
alexcamachogz

41417Puntos

hace 3 meses

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
3
10733Puntos

Que consejos tan buenardos 💚🔥 muchas gracias 💚💚💚

2
57467Puntos

¡Excelente artículo! Me surgieron algunas preguntas:

  1. ¿Hay alguna diferencia (de performance, por ejemplo) al momento de convertir strings a números, entre el operador + y Number?
  2. Misma pregunta anterior pero entre Boolean y !! 😬
2
11093Puntos

No estoy tan mal, sabía la mayoría de ellos pero refrescarlos está bien. Está super el post.

2
336Puntos

Buen aporte, muy interesante. Hoy aprendí algo nuevo.

2
24682Puntos

Algunos bugs que vi xD:

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

faltaría un espacio entre ${nombre} y ${apellido}
porque de otro modo te quedaría el nombre y el apellido todo junto: 'Bienvenida AlexCamacho'

y en lo de no repetir números:

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

Te faltó un espacio entre new y Set
Y por último en el Output seria: //> Output: [ 0, 1, 2, 3, 5, 8, 13 ]

Igual, muy buenos trucos
¡Saludos!

1
41417Puntos
3 meses

Errores de dedo! muchas gracias por notarlo, enseguida lo corrijo!

2
6532Puntos

Muy buen post, si hubo un par que no conocía, excelente a seguir aprendiendo!!!

2
6999Puntos

Muchas gracias! Excelente post!
Yo agregaría lo siguiente:
Emplear el spread/rest operator:
El operador … que llegó con ES6 permite escribir código mucho más limpio y simplifica la forma en que llevamos a cabo distintas operaciones.
Por ejemplo, podemos rellenar arrays de la siguiente forma:
let first = [‘foo’, ‘bar’];
let second = [‘other foo’, …first, ‘other bar’];
// [‘other foo’, ‘foo’, ‘bar’, 'other bar’
Trabajar con objetos inmutables de una forma más sencilla:
let first = { foo: ‘foo’ };
let zeta = { …first, bar: ‘bar’ };
// { foo: ‘foo’, bar: ‘bar’ }
O recoger los argumentos de una función del siguiente modo:
function myFun(a, b, …manyMoreArgs) {
console.log(a);
console.log(b);
console.log(manyMoreArgs);
}

myFun(‘one’, ‘two’, ‘three’, ‘four’);
// ‘one’
// ‘two’
// [‘three’, ‘four’]

2
10850Puntos

A propósito, sabes dónde puedo encontrar ejercicios para reforzar más el tema de promesas, callbacks, try catch, proxy en JS?

2
15054Puntos
3 meses

El Curso Profesional de Javascript está muy loco! Me voló la cabeza en muchas ocasiones y su profesor, aunque en ocasiones se pone muy intenso con la información que comparte, es buenísimo.

Yo lo quiero tomar nuevamente ahora con más experiencia en Javascript y creo que lo aprovecharé mucho mejor.

1
10850Puntos
3 meses

Yo lo estoy tomando y tengo esa sensación de sé que esto es importante pero no sé que hacer con eso.
A mi modo de ver, debo seguir avanzando, leyendo más código para entenderlo más y exprimir todo su contenido.

2
76354Puntos

¡Excelente blogpost, Alex! 🙌 Muchas gracias por compartir. Desconocía el punto 9 y 10.

En mi caso, he visto que también se utiliza el operador nullish para tener valores por defecto en una función, y es útil por si se recibe un null que no es esperado.

Por ejemplo:

const paramDefault = (param = "Hola") => param;

console.log(paramDefault()); // "Hola"console.log(paramDefault(undefined)); // "Hola"console.log(paramDefault(null)); // nullconst paramNullish = param => param ?? "Hola";

console.log(paramNullish()); // "Hola"console.log(paramNullish(undefined)); // "Hola"console.log(paramNullish(null)); // "Hola"

Claro que es más complicado que se le pase un null como argumento a una función, pero el código podría estar más preparado para ese caso.

2
10850Puntos

De mucha utilidad.
Solo queda practicar para reforzar este conocimiento.

1

La mitad de los trucos no los conocia y es genial ver todo lo que se puede hacer, lamentablemente casi nunca los puedo usar por el sonarQ jajajaja pero en desarrollos personales los usare mucho

1

Excelente post Ale, solo en los string template literals, desde que los vi en la el curso de ES6 me parece que el método anterior y este son igual de difíciles de leer, talvez sea que no he hecho codigo tan complejo como para notarlo.

1
8341Puntos

Otro blog guardado para cuando ya haga la escuela de JS

1
7068Puntos

Hola muy buen artículo, lo único es que vi un typo en el siguiente código:

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

console.log(dato) 
//> Output: '27'console.log(numero) 
//> Output: 27// Flotanteconst dato2 = '270.56923'const numero2 = parseFloat(dato, 10)

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

Al momento de imprimir la variable dato2 se imprime dato

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

Ya agregando el nombre correcto si reflejaría el output indicado.

console.log(dato2) 
//> Output:'270.56923'
1
1886Puntos

Gracias por el aporte. Aun comienzo y lo entendí.😃

1
15054Puntos

Estos son los post de blog por los que me gustaría poder almacenar publicaciones dentro de mi cuenta y no sólo en mi pequeño archivo de bloc de notas de respaldo 😅

De igual manera, esto es lo genial de esta plataforma y comunidad!

1
8934Puntos

El Operador && también puede ser visto como “y”.

Boolean(true && true) // true and true//> Output: trueBoolean(true && false)
//> Output: falseBoolean(false && true)
//> Output: falseBoolean(false && false)
//> Output: false

El Operador || también puede ser visto como un “o”.

Boolean(true || true) // true or true//> Output: trueBoolean(true || false)
//> Output: trueBoolean(false || true)
//> Output: trueBoolean(false || false)
//> Output: false
1
15054Puntos

Genial aporte Alex! Están buenísimos estos trucos, y de seguro estaré integrando algunos a mis prácticas y códigos futuros (sobre todo los operadores de cortocircuito, me gustaron).

Muchas gracias por compartir!

1

Hola , Tengo una gran duda, se pueden crear apps, programas o cualquier tipo de software usando javascript sin que éste se encuentre acompañado de HTML y css o son un trío inseparables

1

En mi día a día utilizo Js como lenguaje de programación, y definitivamente, estos consejos son super útiles para redactar un código más corto y entendible. Excelente información.

1
5501Puntos

Muy útil este blog. Solo me queda la duda sobre el 6 truco ya que creo que le resta a la legibilidad y lectura del código, de resto 10/10

1
39122Puntos

OMG Alex que buen contenido 💚
Estos apuntes se van directo a los temas de mayor relevancia que consulto hehe 😄 Gracias.

1
12587Puntos

Trucazos, muchas gracias

1

Excelente articulo, muy util y se va para mis apuntes. Muchas gracias.

1
15645Puntos

Muchas gracias, excelente artículo, esto llega en el momento preciso 💚

1
31797Puntos

Gracias por compartir!!! Esta información vale oro.