Si estás dando tus primeros pasos en el emocionante mundo de la programación, es muy probable que JavaScript sea uno de los lenguajes que te acompañe en este viaje. JavaScript es el motor de la web moderna y su versatilidad lo convierte en una herramienta indispensable. Pero como cualquier lenguaje, escribir buen JavaScript no es solo cuestión de que el código funcione; también se trata de que sea claro, fácil de entender y eficiente. En Skillnest, creemos que las buenas prácticas son la base para convertirte en un programador excepcional. En esta entrada, exploraremos algunas de las mejores maneras de escribir código JavaScript que no solo cumpla su función, sino que también sea un placer leer (¡incluso para ti mismo en el futuro!).

Nomenclatura clara y consistente: Habla con tu código

Imagina que estás escribiendo un libro. ¿Usarías nombres como «cosa1», «variableX» o «funciónQueHaceAlgo»? Probablemente no, porque sería imposible seguir la trama. Lo mismo ocurre con el código. Una de las piedras angulares del código limpio es la nomenclatura significativa.

• Variables y constantes: Elige nombres que describan claramente el propósito de la variable. Si guardas el número de usuarios, $numUsuarios es mucho mejor que $n.

Mal ejemplo:

let x = 10; // ¿Qué es ‘x’?

const arr = [1, 2, 3]; // ¿Qué contiene ‘arr’?

Buen ejemplo:

let contadorDeClics = 10;

const listaDeProductos = [‘Teclado’, ‘Mouse’, ‘Monitor’];

• Funciones: Nombra tus funciones de acuerdo con la acción que realizan. Si una función suma dos números, llámala $sumarNumeros(), no $hacerOperacion().

Mal ejemplo:

function procData(data) { /* … */ } // Demasiado genérico

Buen ejemplo:

function procesarDatosDeUsuario(datos) { /* … */ }

function obtenerPrecioTotal(cantidad, precioUnitario) { /* … */ }

La consistencia es clave. Si decides usar $camelCase para tus variables, úsalo siempre. Si optas por $PascalCase para las clases, mantente fiel a ello. Tu código será mucho más legible y profesional.

Modulariza tu código: Pequeñas piezas, grandes soluciones

Piensa en construir un rompecabezas. Si tuvieras que poner todas las piezas a la vez, sería abrumador. Pero si las organizas por color o forma, es mucho más fácil. En programación, esto se llama modularización. Significa dividir tu código en bloques pequeños e independientes, cada uno con una tarea específica.

• Funciones pequeñas: Cada función debe hacer una sola cosa y hacerla bien. Si tu función tiene más de 20-30 líneas, o si su nombre es muy largo porque describe varias acciones, es una señal de que probablemente necesita ser dividida.

Mal ejemplo:

function cargarDatosYActualizarUI(url) {

    // Cargar datos de la API

    // Procesar los datos

    // Actualizar el DOM con los datos

}

Buen ejemplo:

async function obtenerDatos(url) { /* … */ }

function procesarDatos(datos) { /* … */ }

function actualizarInterfazDeUsuario(datosProcesados) { /* … */ }

async function iniciarAplicacion() {

    const datos = await obtenerDatos(‘/api/productos’);

    const datosListos = procesarDatos(datos);

    actualizarInterfazDeUsuario(datosListos);

}

• Separación de Conceptos: Intenta que el código relacionado con una parte de tu aplicación esté en un solo lugar. Por ejemplo, todo lo que maneja la interfaz de usuario (UI) puede ir en un archivo, mientras que la lógica de negocio (cómo funcionan las cosas) puede ir en otro. Esto facilita encontrar y modificar partes específicas de tu aplicación sin afectar otras.

Al modularizar, no solo haces tu código más manejable, sino que también promueves la reutilización. Una función bien escrita y aislada puede ser utilizada en diferentes partes de tu proyecto, ahorrándote tiempo y esfuerzo.

Comentarios y documentación: Guía para el futuro (incluido tú)

Es tentador escribir código y olvidarse de los comentarios, especialmente cuando estás empezando y todo parece obvio. Sin embargo, los comentarios son como un GPS para tu código. Sirven para explicar el «por qué» detrás de ciertas decisiones, o para aclarar lógica compleja que no es inmediatamente evidente.

Cuándo comentar:

• • Lógica compleja: Si hay un algoritmo o una sección de código que no es fácil de entender a primera vista, un comentario puede salvar el día.
  • Decisiones importantes: Explica por qué tomaste una decisión particular (por ejemplo, por qué elegiste un bucle for en lugar de un forEach en un caso específico).
  • Pendientes (ToDo): Usa comentarios para marcar tareas que necesitas hacer más adelante.

// ToDo: Implementar la validación de email antes de enviar el formulario

• Evita comentarios obvios: No comentes lo que el código ya dice por sí mismo.

Mal ejemplo:

let edad = 25; // Declara una variable llamada edad y le asigna el valor 25

Buen ejemplo:

// Calculamos la edad promedio excluyendo usuarios inactivos para evitar sesgos.

let edadPromedio = calcularEdadPromedio(usuariosActivos);

Una buena práctica adicional es utilizar herramientas como JSDoc para documentar tus funciones. Esto permite que otros desarrolladores (¡y tú mismo en el futuro!) entiendan rápidamente qué hace una función, qué parámetros espera y qué tipo de valor retorna, incluso sin leer su implementación completa.

Escribir código limpio y eficiente en JavaScript es una habilidad que se desarrolla con la práctica. No se trata de ser perfecto desde el principio, sino de adoptar hábitos que te permitirán construir aplicaciones más robustas y fáciles de mantener. Estas prácticas te ayudarán a pensar de forma más estructurada y a comunicarte mejor a través de tu código.

Si te sientes listo para profundizar en JavaScript y convertirte en un desarrollador full-stack, ¡tenemos el lugar perfecto para ti! En Skillnest, nuestro próximo Bootcamp Full-stack JavaScript está diseñado para llevarte desde cero hasta convertirte en un profesional capaz de construir aplicaciones web completas. Aprenderás esto y mucho más con proyectos reales y el apoyo de expertos.

¡No esperes más para transformar tu futuro! Inscríbete hoy en nuestro Bootcamp Full-stack JavaScript y comienza tu camino hacia una carrera exitosa en el desarrollo web.