Visualizar Árbol de Recursión y Pila de Llamadas

Pega una función recursiva, ejecútala y visualiza el árbol de llamadas con superposición de memoización.

Pega cualquier función recursiva de JavaScript y visualiza su árbol de llamadas completo paso a paso. Observa cada llamada a función como un nodo interactivo con argumentos y valores de retorno. Activa la memoización para comparar cómo el caché elimina ramas duplicadas. Controla la velocidad de animación, avanza una llamada a la vez o ve el árbol completo al instante. Presets integrados para Fibonacci, Factorial, Potencia, MCD y Torres de Hanói. Todo se ejecuta de forma aislada en tu navegador sin ninguna llamada al servidor.

Tus datos no salen de tu navegador
¿Te ha sido útil esta herramienta?
Tutorial

Cómo usar el Visualizador de Árbol de Recursión

1
1

Selecciona un preset o pega tu código

Haz clic en un preset como Fibonacci o pega tu propia función recursiva de JavaScript.

2
2

Establece los argumentos y ejecuta

Introduce los argumentos de la función y haz clic en Ejecutar para construir el árbol de llamadas.

3
3

Explora el árbol

Desplázate, haz zoom e inspecciona los nodos para ver los argumentos y valores de retorno de cada llamada.

4
4

Activa la memoización

Habilita la memoización para ver cómo el caché elimina ramas duplicadas y reduce el total de llamadas.

5
5

Anima paso a paso

Haz clic en Animar para ver las llamadas desplegarse en orden, o usa Paso para avanzar una llamada a la vez.

Guide

Comprender los árboles de recursión y las pilas de llamadas

¿Qué es un árbol de recursión?

Un árbol de recursión es una representación visual de cada llamada que realiza una función recursiva. Cada nodo muestra los argumentos recibidos y el valor devuelto. Las aristas padre-hijo representan qué llamada originó qué sub-llamada. Al leer el árbol de arriba hacia abajo puedes trazar el orden de ejecución exacto y entender cómo el problema se descompone en subproblemas más pequeños.

Por qué importa la memoización

Muchos algoritmos recursivos revisitan los mismos subproblemas varias veces; Fibonacci es el ejemplo clásico donde fib(3) se calcula más de una vez. La memoización almacena los resultados de los subproblemas ya resueltos para que se devuelvan al instante en llamadas repetidas. Esta técnica transforma la complejidad temporal exponencial en polinómica o lineal, que es la idea central de la programación dinámica.

Leer la pila de llamadas

La pila de llamadas es la cadena de llamadas de función activas en cualquier momento durante la ejecución. En este visualizador, la profundidad de un nodo corresponde a su posición en la pila. Los árboles profundos significan más marcos de pila, lo que puede provocar errores de desbordamiento en programas reales. Observar la profundidad de la pila te ayuda a entender el uso de memoria e identificar cuándo un enfoque iterativo podría ser más seguro.

Patrones comunes de recursión

La recursión lineal se llama a sí misma una vez por invocación; los ejemplos incluyen el factorial y el recorrido de listas enlazadas. La recursión binaria hace dos llamadas por invocación; Fibonacci y el ordenamiento por fusión siguen este patrón. La recursión de árbol se generaliza a tres o más ramas, como se ve en las Torres de Hanói. Comprender estos patrones te ayuda a predecir la complejidad temporal antes de escribir cualquier código.

Sources

Examples

Ejemplos resueltos

Fibonacci fib(4)

function fib(n) { if (n <= 1) return n; return fib(n-1) + fib(n-2); }

1

fib(4) llama a fib(3) y fib(2)

2

fib(3) llama a fib(2) y fib(1)

3

fib(2) llama a fib(1) y fib(0)

4

Los casos base devuelven 0 o 1

5

Los resultados se propagan hacia arriba: fib(4) = 3

9 llamadas totales sin memo; 7 con memo (fib(2) y fib(1) en caché)

Factorial fact(5)

function fact(n) { if (n <= 1) return 1; return n * fact(n-1); }

1

fact(5) llama a fact(4)

2

La cadena continúa: fact(3) -> fact(2) -> fact(1)

3

El caso base fact(1) devuelve 1

4

Se multiplica hacia arriba: 1*2*3*4*5

5 llamadas totales; la recursión lineal no tiene subproblemas duplicados

Casos de uso

Casos de uso

Comprender la recursión de Fibonacci

Visualiza cómo fib(5) genera 15 llamadas sin memoización pero solo 9 con ella, revelando la optimización de exponencial a lineal en la programación dinámica.

Depurar un algoritmo recursivo personalizado

Pega tu función de ordenamiento por fusión o recorrido de árbol para inspeccionar el orden exacto de llamadas, argumentos y valores de retorno en cada nivel de recursión.

Enseñar conceptos de programación dinámica

Muestra a los estudiantes cómo la memoización elimina subproblemas redundantes al atenuar las ramas en caché del árbol de recursión.

Preguntas frecuentes

?¿Qué lenguajes de programación son compatibles?

Actualmente se admiten funciones de JavaScript. La función debe usar sintaxis JS estándar con una declaración de función con nombre.

?¿Hay un límite en la profundidad de recursión?

Sí, la ejecución está limitada a 200 llamadas totales y 50 niveles de profundidad para evitar que el navegador se congele.

?¿Cómo funciona el modo de memoización?

Cuando está activo, las llamadas duplicadas con los mismos argumentos devuelven resultados almacenados en caché. Los nodos en caché aparecen atenuados con una insignia de memo.

?¿Se envía mi código a un servidor?

No. Toda la ejecución del código ocurre localmente en tu navegador usando un constructor de Function aislado. Nada sale de tu dispositivo.

?¿Es gratuita esta herramienta?

Sí, completamente gratuita y sin límites. No se requiere registro ni pago.

?¿Puedo usar mi propia función recursiva?

Por supuesto. Reemplaza el código del preset con cualquier función de JavaScript con nombre que se llame a sí misma de forma recursiva.

?¿Qué significan los nodos grises?

Los nodos grises con una insignia de memo indican llamadas en caché; la función devolvió un resultado memoizado sin recalcular.

?¿Por qué mi función muestra un error?

Asegúrate de que tu código sea una declaración de función con nombre válida. Las funciones de flecha y las funciones anónimas no son compatibles.

Ayúdanos a mejorar

¿Qué te parece esta herramienta?

Cada herramienta de Kitmul se construye a partir de peticiones reales de usuarios. Tu valoración y tus sugerencias nos ayudan a arreglar bugs, añadir funciones que faltan y construir las herramientas que realmente necesitas.

Valora esta herramienta

Pulsa una estrella para contarnos lo útil que te ha resultado.

Sugiere una mejora o reporta un bug

¿Te falta alguna función? ¿Has encontrado un fallo? ¿Tienes una idea? Cuéntanoslo y lo revisaremos.

Herramientas relacionadas

Boletín

Recibe Consejos de Productividad y Nuevas Herramientas Primero

Únete a creadores y desarrolladores que valoran la privacidad. En cada edición: nuevas herramientas, trucos de productividad y novedades — sin spam.

Acceso prioritario a nuevas herramientas
Cancela en cualquier momento, sin preguntas