Calculadora de Complejidad Ciclomática (JavaScript)

Guía de Uso de la Calculadora de Complejidad

1. Pega tu Código JavaScript: En el área de texto designada, introduce el código JavaScript que deseas analizar.
2. Configura las Opciones de Conteo (Opcional):
   • Debajo del área de código, encontrarás "Opciones de Conteo". Por defecto, la herramienta cuenta los puntos de decisión más comunes (if, for, while, etc.).
   • Puedes personalizar si deseas incluir o excluir:
     • Operadores Lógicos (&&, ||) como puntos de decisión adicionales.
     • El Operador Ternario (? :).
     • Bloques catch en estructuras try-catch.
     • Cada case dentro de una declaración switch (excluyendo el default si está vacío y solo cae).
   • Marcar o desmarcar estas casillas afectará el cálculo final de la complejidad.
3. Analiza el Código: Haz clic en el botón " Analizar Complejidad".
4. Interpreta los Resultados:
   • La sección "Resultados del Análisis" se mostrará (si no hay errores).
   • Verás una lista de las funciones detectadas en tu código, junto con su nombre (o "(anónima)" si aplica), la línea donde comienza y su puntuación de complejidad ciclomática.
   • Las puntuaciones se colorean para una rápida identificación:
     • Bajo (1-5): Generalmente bueno, fácil de entender y probar.
     • Medio (6-10): Aceptable, pero podría empezar a ser un poco más difícil.
     • Alto (11-20): Código complejo, considerar refactorización. Difícil de probar exhaustivamente.
     • Muy Alto (>20): Extremadamente complejo, alto riesgo de errores, muy difícil de mantener y probar. Refactorización urgente recomendada.
   • También se mostrará información sobre el número total de funciones analizadas, la complejidad promedio y el total de puntos de decisión contados en todas las funciones.
5. Manejo de Errores: Si hay un error al parsear tu código JavaScript (por ejemplo, un error de sintaxis), se mostrará un mensaje en el área "Error". Deberás corregir tu código para poder analizarlo.
6. Pantalla Completa: Para un análisis más cómodo de bloques de código grandes, usa el botón "Pantalla Completa" (o la tecla 'F'). Presiona 'Esc' o el botón de nuevo para salir.

Características Clave de la Calculadora

• Análisis de Código JavaScript: Parsea y analiza tu código JS para identificar funciones y puntos de decisión.
• Cálculo por Función: Muestra la complejidad ciclomática individual para cada función detectada.
• Opciones de Conteo Configurables: Permite personalizar qué estructuras se consideran puntos de decisión (operadores lógicos, ternarios, catch, switch cases).
• Resultados Visuales Codificados por Color: Las puntuaciones de complejidad se colorean para una fácil interpretación del nivel de riesgo/mantenibilidad.
• Estadísticas Agregadas: Proporciona un resumen con el número total de funciones, complejidad promedio y total de puntos de decisión.
• Detección de Errores de Parseo: Informa si el código JavaScript ingresado no puede ser analizado debido a errores de sintaxis.
• Uso de Acorn.js: Emplea un parser de JavaScript robusto y ampliamente utilizado (Acorn.js) para el análisis del código.
• Modo Pantalla Completa: Permite trabajar con el código en una vista expandida para mayor comodidad.
• Procesamiento Local: Todo el análisis se realiza en el navegador del cliente; tu código no se envía a ningún servidor.
• Herramienta Gratuita Optikit: Accesible sin costo ni necesidad de registro, como parte de nuestras herramientas online gratuitas.

Preguntas Frecuentes sobre Complejidad Ciclomática

¿Qué es exactamente la complejidad ciclomática y por qué es importante medirla?

La complejidad ciclomática (o número de McCabe) es una métrica de software que mide la cantidad de "caminos" lógicos independientes a través de un fragmento de código. Un valor más alto sugiere que el código tiene más ramificaciones (ifs, bucles, etc.), lo que generalmente lo hace más difícil de entender, probar exhaustivamente y mantener. Es una métrica de calidad de código clave.

¿Cómo calcula esta herramienta la complejidad de mi código JavaScript?

La herramienta parsea tu código JavaScript usando Acorn.js para construir un Árbol de Sintaxis Abstracta (AST). Luego, recorre este árbol contando los nodos que representan puntos de decisión (como if, for, while, case, y opcionalmente operadores lógicos, ternarios y bloques catch). La complejidad base es 1, y se suma 1 por cada punto de decisión encontrado dentro de una función. Puedes usar esta calculadora de complejidad online para obtener estas métricas.

¿Cuáles son los valores "buenos" o "malos" para la complejidad ciclomática?

Generalmente se considera:

• 1-5: Baja complejidad, fácil de manejar.
• 6-10: Complejidad moderada, aún manejable.
• 11-20: Alta complejidad, puede ser difícil de entender y probar. Se recomienda refactorizar.
• >20: Muy alta complejidad, indica un código probablemente problemático y con alto riesgo de errores.

Esta herramienta para medir complejidad de código te ayuda a identificar estas áreas.

¿Cómo puedo reducir la complejidad ciclomática de mis funciones?

Algunas estrategias incluyen: dividir funciones grandes en más pequeñas y enfocadas, usar polimorfismo en lugar de grandes sentencias switch o cadenas de if-else-if, extraer lógica condicional compleja a funciones booleanas separadas, y aplicar patrones de diseño que promuevan la simplicidad. Analizar la calidad del código JS con esta herramienta es el primer paso.

¿Por qué debería contar los operadores lógicos (&&, ||) como puntos de decisión?

Cada operador lógico introduce una nueva condición que puede alterar el flujo de ejecución, creando efectivamente un nuevo camino lógico. Por ejemplo, if (a && b) tiene dos condiciones. Contarlos puede dar una medida más precisa de la complejidad real y del número de casos de prueba necesarios. Nuestra calculadora de McCabe te da la opción.

¿Esta herramienta funciona con todas las características modernas de JavaScript (ES6+)?

Sí, la herramienta utiliza Acorn.js configurado para una versión reciente de ECMAScript (ES2022), por lo que debería ser capaz de parsear y analizar correctamente la mayoría de las sintaxis modernas de JavaScript, incluyendo funciones flecha, async/await, clases, etc. Es una herramienta para desarrolladores JS actualizada.

¿Mi código JavaScript se envía a algún servidor para ser analizado?

No. Todo el análisis del código, incluyendo el parseo y el cálculo de la complejidad, se realiza enteramente en tu navegador web. Optikit no recibe ni almacena tu código. Esta es una herramienta inteligente y una herramienta online gratuita que respeta tu privacidad.

¿Puedo usar esta herramienta para código que no está dentro de funciones explícitas (código global)?

Sí. Si pegas código JavaScript que no está encapsulado en funciones (por ejemplo, un script simple), la herramienta lo analizará como un "Script Global" y calculará su complejidad ciclomática. Esto es útil para evaluar la complejidad de scripts de configuración o código de inicialización. Medir la complejidad de código es útil en todos los niveles.

¿Qué significa si obtengo un "Error de Parseo"?

Un "Error de Parseo" significa que tu código JavaScript contiene errores de sintaxis que impiden que Acorn.js lo entienda y construya el AST. Deberás revisar tu código para corregir estos errores (por ejemplo, llaves faltantes, comas mal puestas, etc.) antes de que la herramienta pueda analizar su complejidad. Es un indicador de que tu código no se ejecutaría correctamente.

¿Cómo me ayuda la opción de "Pantalla Completa" en esta calculadora?

El modo "Pantalla Completa" (tecla 'F' o el botón ) expande la interfaz de la herramienta para usar todo el espacio de tu pantalla. Esto es muy útil cuando estás pegando o revisando bloques grandes de código JavaScript, permitiéndote ver más líneas a la vez y facilitando el análisis de complejidad del código sin distracciones.