10 trucos y optimizaciones de c贸digo con JavaScript para 2021馃槑

Cristian Fernando - Mar 29 '21 - - Dev Community

脥ndice

  1. Introducci贸n
  2. Convertir string a number
  3. Convertir number a string
  4. Operador ternario o if abreviado
  5. Operadores de cortocircuito
  6. Nullish coalescing operator
  7. Optional Chaining
  8. Obtener valores 煤nicos con Set
  9. includes para una condici贸n multiple
  10. Potencias
  11. Conclusiones
  12. 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
Enter fullscreen mode Exit fullscreen mode 
// De string a decimal
const numeroDecimal = "236.986";
console.log(numeroDecimal); //"236.986"
console.log(parseFloat(numeroDecimal,10)); //236.986
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode 
// De string a decimal
const numeroDecimal = "236.986";
console.log(numeroDecimal); //"236.986"
console.log(+numeroDecimal); //236.986
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

隆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
Enter fullscreen mode Exit fullscreen mode

Podriamos hacer esto:

const nota = 80;
const res = (nota>=51) ? console.log("Aprovado"): console.log("Reprobado")
//salida: Aprobado
Enter fullscreen mode Exit fullscreen mode

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 sentencia else
  • El operador : es obligatorio escribirlo aunque no lo necesitemos, si este es el caso se acostumbra devolver null 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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

S铆 expr1 eval煤a como true entonces se ejecuta expr2
S铆 expr1 eval煤a como false entonces NO se ejecuta ninguna de las expresiones, la l铆nea de c贸digo es ignorada por el interprete de javascript.
*S铆 expr1 contiene un null o un undefined regresar谩 null o undefined respectivamente. *

Ejemplo #1

console.log(undefined && "perro"); //undefined
console.log(null && "perro"); //null
console.log(false && "perro"); //false
console.log(true && "perro"); //perro
Enter fullscreen mode Exit fullscreen mode

Ejemplo #2

const frutas = ["Manzana","Pera","Limon","Banana"];
const longitud = frutas.length; //4

console.log(longitud === 4 && "Tengo 4 frutas");
//salida: Tengo 4 frutas
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

S铆 expr1 evalua como false,null o undefined entonces se ejecuta expr2
S铆 expr1 evalua como true entonces la salida es un true tambi茅n

Ejemplo #1

console.log(undefined || "perro"); //perro
console.log(null || "perro"); //perro
console.log(true || "perro"); //true
console.log(false || "perro"); //perro
Enter fullscreen mode Exit fullscreen mode

Ejemplo #2

const frutas = ["Manzana","Pera","Limon","Banana"];
const longitud = frutas.length; //4

console.log(longitud === 3 || "Tengo frutas");
//salida: Tengo frutas
Enter fullscreen mode Exit fullscreen mode

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 e and l贸gicos, que si bien se escriben igual, pero cumplen funciones diferentes.
  • Cuando usamos && y la condici贸n a evaluar es falsa, se imprimira false.
  • Cuando usamos || y la condici贸n a evaluar es verdadera, se imprimira true.
  • En estos 2 煤ltimos aspectos es mejor recibir o devolver un booleano (true o false) que un null o un undefined.

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
Enter fullscreen mode Exit fullscreen mode

S铆 expr1 es null o undefined se ejecuta la expr2.
S铆 expr1 no es null ni undefined se ejecuta la misma expr1.

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`.
Enter fullscreen mode Exit fullscreen mode

Consideraciones con el nullish coalescing operator

  • Al evaluar null y undefined 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]
Enter fullscreen mode Exit fullscreen mode

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:

img

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)
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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:

img2

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"
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Puedes hacer esto:

2**3 // 8
Enter fullscreen mode Exit fullscreen mode

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]
Enter fullscreen mode Exit fullscreen mode

隆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 y undefined.
  • Emplea el optional chaining para verificar si arreglos, objetos o funciones son null o undefined.
  • 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

gif

Image
Tycoon reveals algorithm trading: FMZ Quant platform market maker strategy

strategy, market, trading, fmzquant
Image
Eye Station: Promoting Workplace Safety Through Proper Emergency Response

station
Image
Discovering Little Amsterdam: A Culinary Journey in Oscenox
Image
React vs. Angular vs. Vue: Which Framework to Choose in 2024?
Image
Tips to Maintain Strong Cloud Security

cloud, cloudsecurity, infosectrain, cloudcomputing
Image
Reimagining User Experience of Markdown Link

ux, uxdesign, markdown
Image
Eye Station: Proper Installation and Maintenance for Workplace Readiness

eye, stations
Image
馃専 Welcome to BitNest Loop! 馃専
Image
cludefare acme 璇佷功鐢宠
Image
What a fascinating and new python framework!
Image
What a fascinating python framework!
Image
Linking magic

magic
Image
Navigating Expo 馃摬馃珷

webdev, programming, mobile
Image
馃殌 Check out my new video on YouTube! 馃殌

webdev, beginners, tutorial, react
Image
Understanding Kotlin鈥檚 Any, Unit, Nothing

androiddev, kotlin, android
Image
Mastering Pair Programming: Overcoming Challenges for Seamless Collaboration and Success

pairprogramming
Image
Transformation of Mobile App Designing

mobile, design, ui, ux
Image
# Animated Login and Registration Forms with HTML, CSS, and JavaScript 馃専

webdev, html, css, learning
Image
Linking Git with GitHub and Android Studio: A Step-by-Step Guide

git, github, programming, development
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .