Índice
- Introducción
- Convertir string a number
- Convertir number a string
- Operador ternario o if abreviado
- Operadores de cortocircuito
- Nullish coalescing operator
- Optional Chaining
- Obtener valores únicos con Set
- includes para una condición multiple
- Potencias
- Conclusiones
- Referencias
1. Introducción
JavaScript cumplio 25 años recientemente y es ASOMBROSO como con el paso del tiempo este hermoso lenguaje de programación creció y evoluciono para implementarse en diferentes campos del desarrollo de software; así mismo la sintaxis mejoró bastante y considero importante conocer ciertos trucos de optimización a considerar para nuestros desarrollos en este 2021.
2. Convertir string a number
Tradicionalmente para convertir un string
a un number
se usaban los métodos parseInt()
y parseFloat()
para un entero y un decimal respectivamente, a continuación un ejemplo:
// De string a entero
const numero = "159";
console.log(numero); // "159"
console.log(parseInt(numero,10)); // 159
// De string a decimal
const numeroDecimal = "236.986";
console.log(numeroDecimal); //"236.986"
console.log(parseFloat(numeroDecimal,10)); //236.986
Ambos métodos funcionan muy bien, pero existe una manera más resumida para lograr a los mismos resultados anteponiendo el operador +
.
// De string a entero
const numero = "159";
console.log(numero); //"159"
console.log(+numero); // 159
// De string a decimal
const numeroDecimal = "236.986";
console.log(numeroDecimal); //"236.986"
console.log(+numeroDecimal); //236.986
También es posible usar el constructor del objeto Number
de la siguiente manera:
const numero = "159";
console.log(numero); // "159"
console.log(Number(numero)); // 159
De igual forma este método funciona con números decimales:
const numero = "236.986";
console.log(numero); // "236.986"
console.log(Number(numero)); // 236.986
3. Convertir number a string
Para convertir un number
a un string
se puede usar el método toString()
de la siguiente manera:
const edad = 15;
console.log(typeof edad); //number
console.log(typeof edad.toString()); //string
Podemos llegar al mismo resultado concatenando un number
con un string
vacio,
const edad = 15;
console.log(typeof edad); //number
console.log(typeof (edad + '')); //string
¡Bastante sencillo!
4. Operador ternario o if abreviado
Este operador puede resumir en una sola línea de código un if
tradicional.
En vez de esto:
const nota = 80;
if(nota>=51){
console.log("Aprovado");
}else{
console.log("Reprobado");
}
//salida: Aprobado
Podriamos hacer esto:
const nota = 80;
const res = (nota>=51) ? console.log("Aprovado"): console.log("Reprobado")
//salida: Aprobado
Consideraciones acerca del operador ternario o if abreviado:
- Se debe crear una variable con la condición a evaluar.
- Lo que venga a continuación del operador
?
se evalua si la condición es verdadera. - Lo que venga a continuación del operador
:
se evalua si la condicón es falsa, como si fuera una sentenciaelse
- El operador
:
es obligatorio escribirlo aunque no lo necesitemos, si este es el caso se acostumbra devolvernull
como se muestra en el siguiente ejemplo.
const nombre = "Cris";
if(nombre === "Cris"){
console.log(`Hola, soy ${nombre}`);
}
//salida: Hola soy Cris
const res = (nombre === "Cris") ? console.log(`Hola, soy ${nombre}`): null
//salida: Hola soy Cris
5. Operadores de cortocircuito
Los operadores de cortocircuito, al igual que un if
o un operador ternario, evalúan condiciones de una manera más eficiente.
Operador &&
El operador de cortocircuito &&
actúa como un if
simple (sin else). Si y solo si la condición se evalúa como true
entonces se ejecuta, caso contrario ignora el código.
Sintaxis
expr1 && expr2
Sí
expr1
evalúa comotrue
entonces se ejecutaexpr2
Síexpr1
evalúa comofalse
entonces NO se ejecuta ninguna de las expresiones, la línea de código es ignorada por el interprete de javascript.
*Síexpr1
contiene unnull
o unundefined
regresaránull
oundefined
respectivamente. *
Ejemplo #1
console.log(undefined && "perro"); //undefined
console.log(null && "perro"); //null
console.log(false && "perro"); //false
console.log(true && "perro"); //perro
Ejemplo #2
const frutas = ["Manzana","Pera","Limon","Banana"];
const longitud = frutas.length; //4
console.log(longitud === 4 && "Tengo 4 frutas");
//salida: Tengo 4 frutas
Ya que mi arreglo tiene 4 posiciones, la condicion longitud === 4
evalúa como true
, por ello se ve por consola "Tengo 4 frutas".
Operador ||
Este operador solo se ejecuta si la condición a evaluar es false
, null
o undefined
.
Sintaxis
expr1 || expr2
Sí
expr1
evalua comofalse
,null
oundefined
entonces se ejecutaexpr2
Síexpr1
evalua comotrue
entonces la salida es untrue
también
Ejemplo #1
console.log(undefined || "perro"); //perro
console.log(null || "perro"); //perro
console.log(true || "perro"); //true
console.log(false || "perro"); //perro
Ejemplo #2
const frutas = ["Manzana","Pera","Limon","Banana"];
const longitud = frutas.length; //4
console.log(longitud === 3 || "Tengo frutas");
//salida: Tengo frutas
Ya que la condición es false
entonces se ve por consola el mensaje "Tengo frutas".
Consideraciones acerca de los operadores de cortocircuito:
- Son un poco más abstractos pero sencillos de comprender.
- Son usados bastante en React.js para el renderizado condicional de componentes.
- No se deben confundir con el
or
eand
lógicos, que si bien se escriben igual, pero cumplen funciones diferentes. - Cuando usamos
&&
y la condición a evaluar es falsa, se imprimirafalse
. - Cuando usamos
||
y la condición a evaluar es verdadera, se imprimiratrue
. - En estos 2 últimos aspectos es mejor recibir o devolver un booleano (
true
ofalse
) que unnull
o unundefined
.
6. Nullish coalescing operator
Este operador algo extraño para muchos (??
) es muy similar al operador de cortocircuito ||
que exclusivamente sirve para evaluar condiciones null
o undefined
.
Sintaxis
expr1 ?? expr2
Sí
expr1
esnull
oundefined
se ejecuta laexpr2
.
Síexpr1
no esnull
niundefined
se ejecuta la mismaexpr1
.
Ejemplo #1
console.log(undefined ?? "perro"); //perro
console.log(null ?? "perro"); //perro
console.log("gato" ?? "perro"); //gato
console.log(false ?? "perro"); //false
console.log(true ?? "perro"); //true
console.log([] ?? "perro"); //[]
console.log({} ?? "perro"); //{}
//Solo devolverá "perro" si la expreción a evaluar es `null` o `undefined`.
Consideraciones con el nullish coalescing operator
- Al evaluar
null
yundefined
este operador no es muy usado, pero no está demás saber de su existencia.
7. Optional Chaining
El operador de Encadenamiento Opcional permite realizar una especie de "validación" en nuestros programas cuando empleamos objetos, arreglos o funciones.
Considere el siguiente ejemplo, donde se tiene un array edades
con algunos números, lo que se desea obtener es un nuevo arreglo que contenga las edades que son mayores a 18 años, (con un filter
bastante sencillo de hacer).
const edades = [8,19,20,10,70,56];
const mayoresDeEdad = edades.filter((edad) => {
return edad >= 18
});
console.info(mayoresDeEdad); // [19,20,70,56]
Ahora bien, imaginemos que el arreglo de edades lo obtenemos realizando una consulta a una API o a una base de datos, por ende cabe la posibilidad de que en el transcurso de dicha consulta pase algún imprevisto o un error que produzca que nuestro array edades
venga con un valor de null
o undefined
, como se ve a continuación:
Al intentar recorrer un arreglo que es undefined
JavaScript lanza este error interrumpiendo la ejecución del programa por completo, este comportamiento en librerías frontend modernas como por ejemplo React se lo paga caro, ya que el sitio entero puede dejar de funcionar. Entonces, ¿qué podemos hacer para poder controlar un poco mejor este escenario? La solución buena, y quizá la más sencilla es emplear el Optional Chaining o Eencadenamiento Opcional.
Sintaxis
obj.val?.prop
obj.val?.[expr]
obj.arr?.[index]
obj.func?.(args)
Como se puede observar en la sintaxis para usar el Optional Chaining basta anteponer ?
al arreglo, objeto o función, nuestro ejemplo quedaría de la siguiente manera:
const edades = [8,19,20,10,70,56];
const mayoresDeEdad = edades?.filter((edad) => {
return edad >= 18
});
console.info(mayoresDeEdad); // [19,20,70,56]
Coloquialmente y omitiendo por un momento el uso de lenguaje técnico, al emplear el ?
es como si dijeramos: "Okay JavaScript, quiero que me recorras el arreglo edades
que te estoy pasando, pero si por cualquier motivo edades
viene como null
o como undefined
no me lances por consola esos errores feos que tienes y que matan mi app web, mejor solo mostrame por salida ese undefined
del arreglo. Gracias JavaScript 😍". El resultado sería el siguiente:
Quizá hasta este punto te preguntes: ¿Por qué se llama encadenamiento opcional? La respuesta radica en su mismo nombre y para ilustrarlo mejor veremos un último ejemplo:
Consideremos que tenemos el siguiente objeto auto
y deseamos imprimir por consola la serie
const auto ={
marca: "Toyota",
ruedas: 4,
motor:{
tamaño:"Grande",
serie: "ARFY-9562"
}
}
console.log(auto.motor.serie); //"ARFY-9562"
En este ejemplo para ejemplificar el concepto de encadenamiento opcional no se usa destructuración de objetos
Una vez más imaginemos que por cualquier motivo intentamos acceder al motor
y luego a su serie
pero estos no vienen en el objeto auto
const auto ={
marca: "Toyota",
ruedas: 4
}
console.log(auto.motor.serie);
//Uncaught TypeError: can't access property "serie", auto.motor is undefined
Nuevamente nuestro pequeño programa exploto, pero ya sabemos como solucionar esto, ¿verdad? 😁
const auto ={
marca: "Toyota",
ruedas: 4,
}
console.log(auto?.motor?.serie); // undefined
Bastaría con hacer motor?
pero para entender mejor por qué esta característica de JavaScript se llama encadenamiento opcional hacemos auto?.motor?.serie
así nos aseguramos que el objeto principal auto
tampoco venga como null
o undefined
.
Si bien es horrible ver un undefined
por consola al desarrollar software considero que es mucho mejor que un error de tipo: Uncaught TypeError: can't access property "serie", auto.motor is undefined que muchas veces provocan que nuestro programa falle en su totalidad.
8. Obtener valores únicos con Set
La MDN menciona que el objeto Set
permite almacenar valores únicos de cualquier tipo, incluso valores primitivos u referencias a objetos.
Por ende, es bastante usado cuando necesitamos eliminar elementos duplicados de un arreglo, por ejemplo:
const numeros = [1,5,49,8,2,20,80,1,49,20];
const numerosSinRepetidos =[...new Set(numeros)];
console.info(numerosSinRepetidos); //[1, 5, 49, 8, 2, 20, 80]
9. includes
para una condición múltiple
El método includes
puede emplearse para escribir una condicional de una manera muy elegante y sencilla de comprender:
let x= "b";
if(x==="a" || x==="b" || x==="c" || ) { // pasa la condición si x=a, o x=b o x=c
console.log("x es: a, b o c");
}
//salida: "x es: a, b o c"
//Manera resumida:
if(["a","b","c"].includes(x)){
console.log("x es: a, b o c | Use includes");
}
//salida:"x es: a, b o c | Use includes"
Consideraciones a tomar en cuenta:
- Evalúa una condición usando un "o lógico" (
||
). - Evalúa una sola variable.
-
includes
retorna siempre un valor booleano.
Si deseas conocer mejor el funcionamiento del método includes puedes leer este post mío.
10. Potencias
En vez de hacer esto:
Math.pow(2,3); // 8
Puedes hacer esto:
2**3 // 8
11. Obtener el último elemento de un arreglo
Podemos usar el método slice
para devolver el último elemento del arreglo.
const numeros = [1,2,3,4,5];
console.log(numeros.slice(-1)); // [5]
¡Bastante sencillo!
¡Espero que hayas disfrutado y sobre todo comprendido estos 10 tips con JavaScript, hasta un nuevo post! Happy Coding
Conclusiones
- Puedes convertir un string a number anteponiendo en operador
+
a la variable a convertir. - Puedes convertir un number a string concatenándolo con un string vacío.
- El operador ternario, if abreviado o if de una sola línea permite redactar código más legible.
- Utiliza los operadores de corto circuito
&&
y||
para evaluar condiciones. - El nullish coalescing operator permite evaluar condiciones
null
yundefined
. - Emplea el optional chaining para verificar si arreglos, objetos o funciones son
null
oundefined
. - El objeto
Set
combinado con el spread operator es útil para limpiar arreglos de duplicados. - El método
includes
permite escribir condiciones más limpias para evaluar. - Puedes usar el operador de doble asterisco para elevar un número a otro.
- Podemos usar el método
slice
con parámetros negativos para devolver el último elemento de un arreglo.
Referencias
- https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
- https://5uoaggxrhmuk3atsxrir2opine--developer-mozilla-org.translate.goog/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining
- https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Set
Top comments (5)
El nullish coalescing operator y el optional chaining me vienen como anillo al dedo. No tengo demasiada experiencia en JS, pero tengo que trabajar con él para un proyecto. Ya estaba harto de andar haciendo constantemente comprobaciones que ahora veo que se pueden abreviar bastante. A ver si poco a poco le voy perdiendo el asco.
¡Muy buen artículo, Cristian!
MiguelMJ muchas gracias por leer mi post, es un poco complicado comprender conceptos nuevos al principio pero poco a poco uno va mejorando, es importante practicar mucho y tener una actitud positiva, nuevamente gracias por leerme y por comentar este pequeño artículo, saludos de un colega a otro.
Uno de los mejores post de javascript, dure tiempo para aprender varios trucos y aquí los cuenta de la forma sencilla que he visto, excelente
Excelente justo lo que necesito ahora que estoy estudiando a tope JS.
Genial puedes compartir mas métodos así?