Tabla de contenido
En esta ocasión quiero hablarte acerca de 8 buenas prácticas en Javascript que deberías de seguir para mejorar tus habilidades dentro del desarrollo web.
Pero antes de iniciar te recomiendo que si no estás familiarizado con Javascript o quieres aprender un poco más revises este enlace en donde realizo publicaciones sobre Javascript.
¿Por qué es necesario tener buenas prácticas en Javascript?
Como desarrolladores de software, la mayor parte de nuestras actividades consiste en estar leyendo código, desde la revisión de documentación para poder implementar nuevos servicios o librerías, hasta realizar procesos de depuración de errores u optimización de código.
Es por ello que en esta ocasión te quiero platicar sobre las buenas prácticas que permitirán dos cosas importantes:
Que la lectura de tu código después de algún tiempo de no tocarlo, sea mucho más fácil y entendible y que puedas trabajar con un equipo de desarrollo de una forma más fluída y armónica. ¡Comenzamos!
Utiliza nombres de variables fáciles de entender y con contexto.
Estamos muy tentandos a hacer algo como:
const f = moment().format("YYYY/MM/DD")Es una variable que no está contextualizada a lo que estás haciendo, además, nadie te cobra por agregar más código, esto lo podríamos reemplazar por
const fechaActual = moment().format("YYYY/MM/DD");Evita números mágicos
Otra de las buenas prácticas es evitar los números mágicos. Un número mágico es aquel número que ponemos en las condiciones o ciclos directamente, que afectan la lectura de tu código, ejemplo:
setTimeout(comprobarUsuariosNuevos, 86400000);¿Qué significa el número 86400000?, es muchísimo mejor poner algo como:
const MILISEGUNDOS_POR_DIA = 86400000;
setTimeout(comprobarUsuariosNuevos, MILISEGUNDOS_POR_DIA);Evita variables genéricas
Otra de las buenas prácticas que puedes aplicar es, evitar las variables genéricas, es decir, mientras más explícito puedas ser con tu código, estoy seguro que tu yo del futuro te lo agradecerá.
const ciudades = ["Cancún", "Mérida", "Campeche"]
for (let index = 0; index < ciudades.length; index++) {
console.log(ciudades[index])
}Tal vez en este momento te haga mucho sentido nombrar una variable como index, i, e, element, etc. pero más adelante se volverá complejo de contextualizar, por lo que tardarás más tiempo intentando deducir que sucede, mejor haz algo como:
const ciudades = ["Cancún", "Mérida", "Campeche"]
for (let ciudad = 0; ciudad < ciudades.length; ciudad++) {
console.log(ciudades[ciudad])
}No agregues contexto repetitivo
Otra de las buenas prácticas que puedes aplicar es, evita agregar contexto repetitivo, Algo muy común que hacemos es:
const cliente = {
nombre_cliente: '8dev',
ciudad_cliente: 'Cancún',
correo_cliente: 'hola@8devmx.com'
}Sería mucho más práctico de leer si:
const cliente = {
nombre: '8dev',
ciudad: 'Cancún',
correo: 'hola@8devmx.com'
}agrega variables parametrizadas, Siempre Que Puedas
Algo muy común cuando creamos funciones es escribir algo como esto:
function agregarCliente(nombre) {
const nombreCliente = nombre || "8dev";
}Es por ello que Otra de las buenas prácticas que puedes aplicar es enviar la variable parametrizada, por ejemplo:
function agregarCliente(nombre = "8dev") {
}Crea funciones con máximo 2 argumentos
Otra de las buenas prácticas que puedes aplicar es, crear funciones con 2 argumentos como máximo. Cuando creamos funciones estamos acostumbrados a enviar gran variedad de parámetros, por lo que se vuelve compleja, un ejemplo podría ser
function agregarCliente(nombre, edad, ciudad, correo, status) {
}Si necesitas que una función envie más de 2 parámetros, lo mejor sería que los agrupes mediante objetos para que puedas destructurarlos, ejemplo:
function agregarCliente({nombre, edad, ciudad, correo, status}) {
}
agregarCliente(datosDelCliente)Evita condiciones excesivas
Estamos acostumbrados a agregar if…else por todas partes, cuando podemos simplificarlo, ejemplo:
function esMayorDeEdad(edad){
if(edad >= 18){
return true
}else{
return false
}
}Esto se puede reemplazar por esto:
function esMayorDeEdad(edad){
return edad >= 18
}Elimina comentarios y código de depuración
Muchas veces revisando el código podemos observar que hacíamos llamados a funciones y/o códigos de depuración que dejamos en el olvido, algo como esto:
actualizarRegistros()
// funcionParaDespuesDeActualizarRegistros()
// console.log("Aquí crashea")
// funcionParaValidarQueLlegueLaVariable()Si bien, siempre es útil ayudarnos de métodos o funciones que nos ayuden a depurar, al finalizar la depuración no las comentes, simplemente elimínalas.
Si te ha gustado este artículo te pido me sigas en mis redes sociales:
🖥️ Youtube: https://www.youtube.com/@eightdev?sub_confirmation=1
🎵 Tik Tok: https://www.tiktok.com/@8devmx
✅ Facebook: https://www.facebook.com/8devmx/
📸 Instagram: https://www.instagram.com/8devmx/
Sin más, ¡nos vemos la próxima!
