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.
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.
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.
Te recomendamos leer: 5 razones para NUNCA aprender JavaScript
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
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.
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
¿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:
Se necesita una variable con la condición a evaluar.
Lo que está después del operador ?
se evalúa si la condición es verdadera.
Lo que está después del operador :
se evalúa si la condición en falsa, igual que la sentencia else
.
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
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.
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
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
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.
¿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 👌🏻
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.
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
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: ['🙈', '🙉', '🙊']
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]
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 👋🏻
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
ySet
Y por último en el Output seria:
//> Output: [ 0, 1, 2, 3, 5, 8, 13 ]
Igual, muy buenos trucos
¡Saludos!
Errores de dedo! muchas gracias por notarlo, enseguida lo corrijo!
Que consejos tan buenardos 💚🔥 muchas gracias 💚💚💚
¡Excelente artículo! Me surgieron algunas preguntas:
+
yNumber
?Boolean
y!!
😬No estoy tan mal, sabía la mayoría de ellos pero refrescarlos está bien. Está super el post.
Buen aporte, muy interesante. Hoy aprendí algo nuevo.
Excelente. Gracias por compartir
Excelente recurso!
Muy buen post, si hubo un par que no conocía, excelente a seguir aprendiendo!!!
Thank you so much for everything. This information is worth several days of hard work.
cookie clicker
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’]
A propósito, sabes dónde puedo encontrar ejercicios para reforzar más el tema de promesas, callbacks, try catch, proxy en JS?
En el curso de asincronismo con JavaScript y en el curso profesional de JavaScript encuentras ese contenido.
Para encontrar ejercicios prácticos, basta con hacer una consulta sencilla en Google.
De Platzi he aprendido, que nunca debemos parar de aprender!
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.
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.
¡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.Grandiosos trucos !!!
De mucha utilidad.
Solo queda practicar para reforzar este conocimiento.
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
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.
Otro blog guardado para cuando ya haga la escuela de JS
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 imprimedato
console.log(dato) //> Output:'270.56923'
Ya agregando el nombre correcto si reflejaría el output indicado.
console.log(dato2) //> Output:'270.56923'
Buen contenido,bastante acertado. Gracias.
¡Muchas gracias por compartir los consejos Alex!
Gracias por el aporte. Aun comienzo y lo entendí.😃
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!
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!
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
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.
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
OMG Alex que buen contenido 💚
Estos apuntes se van directo a los temas de mayor relevancia que consulto hehe 😄 Gracias.
Trucazos, muchas gracias
Excelente
gracias, habian cosas que no sabia
Excelente articulo, muy util y se va para mis apuntes. Muchas gracias.
Increíble aporte, Gracias
Muy buen articulo!!!
Muchas gracias, excelente artículo, esto llega en el momento preciso 💚
Gracias por compartir!!! Esta información vale oro.