脥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