JS: Buenas prácticas
(Parte 1)
Las buenas prácticas no son reglas.
Son consejos o recomendaciones basadas en la experiencia.
Muchas de estas prácticas aplican a cualquier lenguaje de programación.
Objetivo
- Más claro y legible
- Más mantenible
- Con menos errores
Escribir código:
- Más simple
Queremos escribir código de mejor calidad
Tengo que entenderlo
Escribimos código para otras personas, no para las computadoras
Tengo que entenderlo
Pasamos más tiempo leyendo código que escribiéndolo
Tengo que entenderlo
Piensen en sus compañeros y su yo del futuro
function funcionCreadaPorPablo(a, b, c) {
const h = a + b + c;
const j = h * 0.2;
const t = h + j;
return t;
}function sumarImpuestoAlPrecio(precioProducto1, precioProducto2, precioProducto3) {
const sumatoriaDePrecios = precioProducto1 + precioProducto2 + precioProducto3;
const impuestoAplicado = sumatoriaDePrecios * 0.2;
const precioTotal = sumatoriaDePrecios + impuestoAplicado;
return precioTotal;
}❌
✓
Tengo que entenderlo
Usar nombres descriptivos, significativos y pronunciables para variables, constantes y funciones
Tengo que entenderlo
Para las funciones, usemos verbos que transmitan la intención y nombres significativos para los parámetros
Evitemos las variables (ó constantes) globales
Mala idea. Corremos el peligro de que cualquier otro código que usemos modifique la funcionalidad
Indentar el código
Lo hace más claro y legible
Comentarios
Escribir sólo la cantidad necesaria
Modularizar
La idea es separar los problemas en subproblemas más chicos
Modularizar
Cada problema individual es más fácil de resolver que el problema original
Modularizar
El código queda más legible
Modularizar
En lo posible, queremos escribir funciones más chicas que hagan una tarea particular
Modularizar
Más fácil de leer
Más fácil de entender
Más fácil de programar
Más fácil de testear
✓
✓
✓
✓
Más fácil de reutilizar
✓
Evitar
==
var
Usar
===
Usar
let
const
Por defecto, usemos
const
Usamos
let
únicamente si
pensamos reasignar la variable
Inicializar variables
De esta forma evitamos comportamientos inesperados en las funciones
Evitemos duplicar código
Ver si es posible reutilizar funcionalidades usando funciones
function comprarMateriaPrima() {
const precio = prompt("Ingrese costo de materia prima");
if (saldoCuenta >= precio) {
saldoCuenta -= precio;
} else {
saldoCuenta = 0;
alert("Te has quedado sin dinero.");
}
}function pagarSueldo() {
const sueldo = prompt("Ingrese el sueldo a pagar");
if (saldoCuenta >= sueldo) {
saldoCuenta -= sueldo;
} else {
saldoCuenta = 0;
alert("Te has quedado sin dinero");
}
}function pagarTraslado(){
const precio = prompt("Ingrese el costo del traslado");
if (saldoCuenta >= precio) {
saldoCuenta -= precio;
} else {
saldoCuenta = 0;
alert("Te has quedado sin dinero en la cuenta");
}
}Tenemos funcionalidad repetida
Todas las funciones verifican si el saldo es mayor al precio, decrementan el precio de la cuenta o la dejan en cero
Podríamos crear una nueva función que realice esta tarea particular y ejecutarla dentro de las otras funciones
function descontarDinero(cantidadDeDinero) {
if (saldoCuenta >= cantidadDeDinero) {
saldoCuenta -= cantidadDeDinero;
} else {
saldoCuenta = 0;
alert("Te has quedado sin dinero en la cuenta :(");
}
}Reescribimos las funciones originales para que utilicen la nueva función creada
function comprarMateriaPrima() {
const precio = prompt("Ingrese costo de materia prima");
descontarDinero(precio);
}function pagarSueldo() {
const sueldo = prompt("Ingrese el sueldo a pagar");
descontarDinero(sueldo);
}function pagarTraslado() {
const precio = prompt("Ingrese el costo del traslado");
descontarDinero(precio);
}
Somos más felices que antes
?
¿
Algo más avanzado...
- Usar una styleguide
- Usar linters (ej: ESLint, XO)
- Usar formateadores de código (ej: Prettier)
- Ser consistentes!
Recursos
Eso es todo.
Por ahora...
js-buenas-practicas
By Nicolás Quiroz
