Mejores Prácticas en Programación JavaScript

Este artículo explica las mejores prácticas en la programación con JavaScript.

Presentaremos las principales prácticas recomendadas en JavaScript junto con ejemplos de código concretos.

YouTube Video

Mejores Prácticas en Programación JavaScript

En programación, no es importante solo escribir "código que funciona", sino escribir código que sea mantenible, eficiente y confiable. Al seguir las "mejores prácticas", tu código se vuelve más fácil de entender para otros desarrolladores, más sencillo de mantener y ampliar, y en última instancia conduce a menos errores y un mejor rendimiento.

Con ejemplos de código, veamos las prácticas recomendadas clave en JavaScript.

Usa Nombres de Variables y Funciones Claros y Descriptivos

Haz posible entender qué significa una variable o función solo con leer el código. Prefiere nombres descriptivos en lugar de nombres abreviados o siglas.

Mal ejemplo

1/* Bad Example */
2let x = 10;
3function fn() {
4    // ...
5}

• Nombres como x o fn ocultan la intención del código.

Buen ejemplo

1/* Good Example */
2let totalItems = 10;
3function calculateDiscount(price) {
4    // ...
5}

• Usar nombres significativos como totalItems o calculateDiscount ayuda a los lectores a entender el código.

Usa const / let y evita var

Debido a que var es propenso a problemas de alcance y redeclaración, se recomienda usar siempre const o let.

Mal ejemplo

1/* Bad Example */
2var count = 5;

• var tiene alcance de función y puede causar redeclaraciones no deseadas y hoisting.

Buen ejemplo

1/* Good Example */
2let count = 5; // Reassignable
3const MAX_COUNT = 10; // Not reassignable

• let y const son de alcance de bloque y son más seguros de usar, lo que resulta en un código más predecible y estable.

Usa Comentarios Apropiados

{^ i18n_speak 単にコードの動作をそのまま繰り返すコメントではなく、コードの「目的」や「理由」を説明するためにコメントを使います。^}

Mal ejemplo

1/* Bad Example */
2let a = 100; // assign 100 to a

Buen ejemplo

1/* Good Example */
2// Initialize the maximum value to 100
3let maxItems = 100;

• Prefiere comentarios que expliquen por qué se hace algo, en lugar de qué se está haciendo. Esto es especialmente útil cuando la lógica es compleja.

Sigue el Principio DRY (No te Repitas)

En lugar de repetir la misma lógica, factorízala en funciones o clases. Reducir la duplicación mejora la mantenibilidad y ayuda a prevenir errores.

Mal ejemplo

1/* Bad Example */
2let totalPrice = price * quantity;
3let discountedPrice = (price * 0.9) * quantity;

Buen ejemplo

1/* Good Example */
2function calculatePrice(price, quantity, discount = 0) {
3    return (price * (1 - discount)) * quantity;
4}
5
6let totalPrice = calculatePrice(price, quantity);
7let discountedPrice = calculatePrice(price, quantity, 0.1);

• Al consolidar la lógica duplicada en una función, los cambios y correcciones pueden hacerse en un solo lugar. Esto es especialmente importante en el desarrollo a gran escala.

Mantén las funciones con una única responsabilidad y minimiza los efectos secundarios

Cada función debe tener un propósito claro. Evita mutar variables globales o el estado externo para mantener los efectos secundarios al mínimo.

Mal ejemplo

1/* Bad Example */
2let total = 0;
3function addItem(price) {
4    total += price; // modifies external state
5    console.log('Item added');
6}

Buen ejemplo

1/* Good Example */
2function calculateTotal(items) {
3    return items.reduce((sum, item) => sum + item.price, 0);
4}

• Diseñar funciones puras —que devuelvan el mismo resultado para la misma entrada— las hace más fáciles de probar y más confiables. También mejora la reutilización y facilita la depuración.

Realiza Manejo de Errores

Asegúrate de que la aplicación no se bloquee ante entradas inesperadas o excepciones. Usa la sintaxis try...catch para manejar los errores adecuadamente.

Mal ejemplo

1/* Bad Example */
2let data = JSON.parse(inputData);

Buen ejemplo

1/* Good Example */
2try {
3    let data = JSON.parse(inputData);
4} catch (error) {
5    console.error('Failed to parse JSON:', error);
6}

• Como JSON.parse() puede lanzar excepciones, manéjalo de forma segura con try-catch. Un manejo exhaustivo de errores te ayuda a crear aplicaciones robustas.

Genera registros estructurados

Emite registros en un formato consistente para facilitar el seguimiento del comportamiento del sistema. Usar registros en formato JSON facilita su uso en herramientas de análisis y monitoreo.

Mal ejemplo

1/* Bad Example */
2console.log('Error occurred!');

Buen ejemplo

1/* Good Example */
2console.log(JSON.stringify({
3    level: 'error',
4    message: 'Database connection failed',
5    timestamp: new Date().toISOString()
6}));

• Los registros como cadenas simples pueden perder información; los registros estructurados facilitan el análisis de logs, la visualización y el monitoreo. Esto es especialmente efectivo en JavaScript del lado del servidor (Node.js).

Mejora la Legibilidad del Código

El código lo leerán otros (o tu yo del futuro). Usa una indentación, saltos de línea y espaciado adecuados para que el código sea fácil de leer.

Mal ejemplo

1/* Bad Example */
2if(a===b){doSomething();}

Buen ejemplo

1/* Good Example */
2if (a === b) {
3    doSomething();
4}

• El código bien formateado y legible se entiende más rápido y facilita detectar errores. No lo amontones todo en una sola línea; deja clara la estructura visualmente.

Considera siempre la seguridad

Como JavaScript a menudo se ejecuta en entornos web, la atención a la seguridad es esencial. Valida siempre la entrada del usuario, protégete contra XSS y CSRF, y mantén las dependencias actualizadas.

Mal ejemplo

1/* Bad Example */
2// Directly inserting user input into HTML (vulnerable to XSS)
3element.innerHTML = userInput;

Buen ejemplo

1/* Good Example */
2// Use textContent to prevent XSS attacks
3element.textContent = userInput;

• Manejar la entrada del usuario tal cual puede introducir vulnerabilidades como la inyección de scripts. Usa APIs seguras y convierte en hábito validar y sanitizar siempre los datos.

Realización de Pruebas de Código

Incorporar pruebas automatizadas facilita detectar y prevenir errores. En JavaScript, se usan comúnmente frameworks de pruebas como Jest y Mocha.

Ejemplo

1// Simple test using Jest
2function sum(a, b) {
3    return a + b;
4}
5
6test('adds 1 + 2 to equal 3', () => {
7    expect(sum(1, 2)).toBe(3);
8});

• Contar con pruebas garantiza que los errores no reaparezcan al añadir funcionalidades o realizar cambios. Las pruebas son indispensables para el aseguramiento continuo de la calidad.

Conclusión

Seguir las mejores prácticas puede mejorar enormemente la calidad, la mantenibilidad y la confiabilidad del código. Al aprender JavaScript, es importante desarrollar hábitos no solo sobre la sintaxis, sino también sobre "cómo escribir buen código". Aprendiendo de forma continua, puedes hacer que tu código sea más legible, seguro y eficiente.

Puedes seguir el artículo anterior utilizando Visual Studio Code en nuestro canal de YouTube. Por favor, también revisa nuestro canal de YouTube.

YouTube Video