Existen ciertos errores que no debemos cometer si estamos aprendiendo a programar en JavaScript.
Podríamos decir que no son errores exactamente, si no estándares que se tienen a la hora de programar en este lenguaje.
Esto con el fin de que nuestro código sea mucho más legible, y se pueda entender mejor. Y en ocasiones pueden funcionar para mejorar nuestro rendimiento en la página.
Recordemos que muchas veces no somo los unicos que tenemos que entender nuestro código. Ya que si trabajas en una empresa, o bien buscas empleo, es importante tener en cuenta estos factores para demostrar que eres ordenado con tu código, y los demás puedan entenderlo mucho mejor. 👨💻
1° Caso: Condiciones redondantes
No debemos de tener condiciones las cuales si dan true, devuelve true.
Como se muestra en el siguiente caso. 👇
❌
const num1 = 10;
const num2 = 5;
const validacionEntreNumeros = ( num1, num2 ) => {
if( num1 > num2 ){
return true;
}else {
return false;
}
}
O el mismo caso, pero usando ternarias.
❌
const num1 = 10;
const num2 = 5;
const validacionEntreNumeros = ( num1, num2 ) => {
return num1 > num2
? true
: false;
}
Por lo que, en un caso como este, es recomendable devolver directamente la condición.
✅
const num1 = 10;
const num2 = 5;
const validacionEntreNumeros = ( num1, num2 ) => {
return num1 > num2;
}
Mucho más limpio, verdad?
2° Caso: No utilices filter
, ni un bucle
para hacer esto.
Si tenemos el siguiente array de objetos. 👇
const personas = [
{ name: 'Karla', age: 14 },
{ name: 'Jack', age: 17 },
{ name: 'Jonathan', age: 15 }
]
Y queremos buscar si alguna de las personas de los objetos es mayor de edad. Donde en caso de que sí haya, devolverá true
Posiblemente te verías tentado a usar el método filter
.
De esta manera. 👇
❌
const personas = [
{ name: 'Karla', age: 14 },
{ name: 'Jack', age: 17 },
{ name: 'Jonathan', age: 15 }
]
Boolean(personas.filter(persona => {
return persona.age >= 18;
})[0])
Esta manera es horrible, ya que debemos acceder a la primera posición, y además de eso tenemos que convertir todo en un Booleano.
Otra forma errónea es utilizando algún bucle, como lo sería un forEach
, while
, o for
.
Como el siguiente ejemplo. 👇
❌
const personas = [
{ name: 'Karla', age: 14 },
{ name: 'Jack', age: 17 },
{ name: 'Jonathan', age: 15 }
]
let found = false;
personas.forEach(persona => {
if( !found ) {
found = persona.age >= 18;
}
})
Esto no es correcto, ya que lo que hará es recorrer todos los objetos idenpendientemente de si lo a encontrado ya.🤦♂️
Por lo que, en su lugar, debemos utilizar el método some
.
De esta manera. 👇
✅
const personas = [
{ name: 'Karla', age: 14 },
{ name: 'Jack', age: 17 },
{ name: 'Jonathan', age: 15 }
]
personas.some((persona) => {
return persona.age >= 18;
})
Esta es la mejora forma de hacerlo, ya que el método some
devolverá true al primer elemento que cumpla la condición.👌
3° Caso: Usar var
en vez de let
y const
Hoy en día no es recomendable definir variables con la palabra reservada var
. Ya que este nos puede generar problemas en nuestro código.
Y uno de los principales problemas de este es que no nos da error al redeclarar una variable. Lo cuál es muy peligroso para nuestras aplicaciones.
Un ejemplo de este probleba es el siguiente:
var valor = 1;
console.log(valor) // 1
var valor = 'Armando'
console.log(valor); //Armando
var valor = true;
console.log(valor); // true
Otro caso un poco más claro es el siguiente:
❌ Usando var
. 👇
var name = 'Armando'
if (name === 'Armando') {
var name = 'Guillermo'
}
console.log(name) // 'Guillermo'
✅ Usando let
y const
. 👇
const name = 'Armando'
if (name === 'Armando') {
let name = 'Guillermo'
}
console.log(Armando) // 'Armando'
En conclusión, siempre trata en la medida de los posible hacer uso de las palabras reservadas let
y const
para declarar variables en tú código.
Te ahorrará muchos problemas. 😉
4° Caso: Usar ==
en vez de ===
para comparar valores.
El operador ==
no es recomendable utilizarlo para comparar valores, ya que este NO compara si las variables son de diferente tipo.
A diferencia del operador ===
que si compara tanto el valor como el tipo de los valores que se están comparando.
❌
const string == '21'
const number == 21
string == number; // true
✅
const string = '21'
const number = 21
string === number; // false