{
    "componentChunkName": "component---node-modules-gatsby-theme-try-ghost-src-templates-tag-js",
    "path": "/tag/algoritmos/",
    "result": {"data":{"ghostTag":{"slug":"algoritmos","url":"https://jlgarcia.fulldev.ninja/tag/algoritmos/","name":"algoritmos","visibility":"public","feature_image":null,"description":null,"meta_title":null,"meta_description":null,"featureImageSharp":null},"allGhostPost":{"edges":[{"node":{"id":"Ghost__Post__5fd65ddfa6c0f5058bff49a1","title":"JS Algoritmos y  Estructuras de datos VII: La recursividad  III - Resolviendo problemas II","slug":"js-algoritmos-y-estructuras-de-datos-vii-la-recursividad-iii","featured":false,"feature_image":"https://jlgarcia.fulldev.ninja/assets/images/2020/12/unordered-3192273_640-1.png","excerpt":"Bien en el post anterior vimos la primera de las opciones para compensar el\nproblema del maximum call stack que nos podía dar la recursividad. En este post\nveremos algunas otras opciones para tener en nuestro arsenal, que cumplen (más o\nmenos) con la resolución de nuestro problema aunque alguna sea bastante lenta y\ntengan el handicap de que debemos controlar la asincronía.\n\nUsando setTimeout\nEn este caso vamos a jugar con el conocido setTimeout, en este punto es mejor\nque estemos familiarizados ","custom_excerpt":null,"visibility":"public","created_at_pretty":"13 Dec 2020","published_at_pretty":"28 Dec 2020","updated_at_pretty":"19 Jan 2021","created_at":"2020-12-13T19:30:55.000+01:00","published_at":"2020-12-28T10:30:00.000+01:00","updated_at":"2021-01-19T21:13:02.000+01:00","meta_title":null,"meta_description":null,"og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"slug":"jlgarcia","url":"https://jlgarcia.fulldev.ninja/author/jlgarcia/","name":"Juan Luis Garcia Aparicio","bio":null,"cover_image":null,"profile_image":"https://jlgarcia.fulldev.ninja/assets/images/2017/12/Perfil.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":null}],"primary_author":{"slug":"jlgarcia","url":"https://jlgarcia.fulldev.ninja/author/jlgarcia/","name":"Juan Luis Garcia Aparicio","bio":null,"cover_image":null,"profile_image":"https://jlgarcia.fulldev.ninja/assets/images/2017/12/Perfil.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":{"base":"Perfil.jpg","publicURL":"/static/b0de6281fb28a266510b3b09b9243e5a/Perfil.jpg","imageMeta":{"width":307,"height":307},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAUDBAb/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIQAxAAAAGzw6zC6zHn+cLYP//EAB0QAAICAQUAAAAAAAAAAAAAAAEDAAIEEyEiIzL/2gAIAQEAAQUCifca8KgcKWVfUpkHsG5pxX//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAEDAQE/AR//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAECAQE/AR//xAAdEAACAgEFAAAAAAAAAAAAAAAAARARcQISIUFR/9oACAEBAAY/AhU88xkb7N06a8P/xAAcEAEAAwEAAwEAAAAAAAAAAAABABEhMUFRYXH/2gAIAQEAAT8hR2pq40aqb+xIAeXibhW9JXr8joF4TBcSNe0//9oADAMBAAIAAwAAABDzDwD/xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAEDAQE/EB//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAECAQE/EB//xAAcEAEAAgIDAQAAAAAAAAAAAAABABEhUTFhcfD/2gAIAQEAAT8QyItrELaTlatLwU63MvEW6vUNdy4LZQDn7iVApV9VLtANdWwKkuYq4Er1VZ//2Q==","aspectRatio":1,"src":"/static/b0de6281fb28a266510b3b09b9243e5a/31709/Perfil.jpg","srcSet":"/static/b0de6281fb28a266510b3b09b9243e5a/f340b/Perfil.jpg 28w,\n/static/b0de6281fb28a266510b3b09b9243e5a/22d64/Perfil.jpg 55w,\n/static/b0de6281fb28a266510b3b09b9243e5a/31709/Perfil.jpg 110w,\n/static/b0de6281fb28a266510b3b09b9243e5a/aa249/Perfil.jpg 165w,\n/static/b0de6281fb28a266510b3b09b9243e5a/0dc33/Perfil.jpg 220w,\n/static/b0de6281fb28a266510b3b09b9243e5a/60667/Perfil.jpg 307w","srcWebp":"/static/b0de6281fb28a266510b3b09b9243e5a/8678c/Perfil.webp","srcSetWebp":"/static/b0de6281fb28a266510b3b09b9243e5a/59cda/Perfil.webp 28w,\n/static/b0de6281fb28a266510b3b09b9243e5a/7da75/Perfil.webp 55w,\n/static/b0de6281fb28a266510b3b09b9243e5a/8678c/Perfil.webp 110w,\n/static/b0de6281fb28a266510b3b09b9243e5a/f282e/Perfil.webp 165w,\n/static/b0de6281fb28a266510b3b09b9243e5a/a7b21/Perfil.webp 220w,\n/static/b0de6281fb28a266510b3b09b9243e5a/f59af/Perfil.webp 307w","sizes":"(max-width: 110px) 100vw, 110px"}}}},"primary_tag":{"slug":"algoritmos","url":"https://jlgarcia.fulldev.ninja/tag/algoritmos/","name":"algoritmos","visibility":"public","feature_image":null,"description":null,"meta_title":null,"meta_description":null,"featureImageSharp":null},"tags":[{"slug":"algoritmos","url":"https://jlgarcia.fulldev.ninja/tag/algoritmos/","name":"algoritmos","visibility":"public","feature_image":null,"description":null,"meta_title":null,"meta_description":null,"featureImageSharp":null},{"slug":"javascript","url":"https://jlgarcia.fulldev.ninja/tag/javascript/","name":"javascript","visibility":"public","feature_image":null,"description":null,"meta_title":null,"meta_description":null,"featureImageSharp":null}],"plaintext":"Bien en el post anterior vimos la primera de las opciones para compensar el\nproblema del maximum call stack que nos podía dar la recursividad. En este post\nveremos algunas otras opciones para tener en nuestro arsenal, que cumplen (más o\nmenos) con la resolución de nuestro problema aunque alguna sea bastante lenta y\ntengan el handicap de que debemos controlar la asincronía.\n\nUsando setTimeout\nEn este caso vamos a jugar con el conocido setTimeout, en este punto es mejor\nque estemos familiarizados con el event-loop (recomiendo leer estos posts\n[https://blog.insiderattack.net/event-loop-and-the-big-picture-nodejs-event-loop-part-1-1cb67a182810]\n)\n\nUsaremos este ejemplo, cambia un poco lo que teniamos antes, pero es por\nintentar seguir con el mismo concepto del sumatorio\n\nlet accum = 0\nlet number = 5\n\nfunction addTo () {\n\tif (number === 0) { \n\t\tconsole.log(accum)\n\t\treturn\n\t}\n\t\n\tsetTimeout(() => {\n\t\taccum = number + accum\n\t\tnumber--\n\t\taddTo()\n\t}, 0)\n}\n\n\nfunction finish () {\n  console.log('Finished')\n}\n\naddTo()\nfinish()\n\n\nComo vemos tenemos nuestra función addTo que si el número no es 0 pasa por un \nsetTimeout con 0. Esto aunque no podamos verlo en la aplicación que lo incluye\ndentro de la task queue lo que hace es incluir el método en la timers queue y se\nejecutaría según el ciclo de vida habitual de node cuando pase por los timers \nresueltos.\n\nVeamos un poco lo que pasa cuando ejecutamos esto dentro de jv9000 (OJO que esto\nno funciona en la web tengo un fork modificado para permitir esto y otras cosas)\n\n 1. Incluye en el call stack la primera ejecución de addTo\n    \n    \n    \n 2. Como number no es 0 se ejecuta el setTimeout, es decir, incluye la función\n    anónima dentro de la timers queue, que para nosotros en nuestro visualizador\n    esta dentro de la task queue\n    \n    \n    \n 3. Importante, el paso anterior ha pasado como a un segundo plano dentro del\n    event loop, por lo que para nosotros ha terminado la ejecución de addTo por\n    lo que ya la podemos sacar del call stack\n    \n    \n    \n 4. El loop continua y le toca a la función finish.\n    \n    Importante en este punto darse cuenta de que ha entrado la función finish al \n    call stack se ha ejecutado y ha salido, sin que todavía hayamos tocado lo\n    que tenemos dentro de task queue\n    \n    \n 5. Una vez ejecutada la función finish ya le toca el turno a comprobar task, al\n    ver que tenemos algo lo pasa al call stack y lo ejecuta\n    \n    \n    \n 6. Al ejecutarlo dentro del call stack, lo que tenemos de nuevo es otra\n    ejecución de addTo, que repite la operación incluye en la task queue la\n    función anónima del timeout\n    \n    \n    \n\nY el proceso se repite n veces hasta que se cumple el number === 0\n\n\nDonde terminaría nuestra ejecución. Como vemos aquí tenemos otro caso donde\nevitamos que la cola de llamadas se llene.\n\nUsando setImmediate\nUsando setImmediate es similar al setTimeout pero tiene menos pasos, en el caso\nanterior nuestra ejecución pasa por incluirse en la cola de task, comprobar el\ntiempo, ver que ha terminado incluirlo en el call stack y ejecutarlo. Al final\nson bastantes pasos. Sin embargo el setImmediate tiene su propia cola y se\nejecutan al momento tras los eventos de I/O por lo que puede ser más rápido en\nun entorno recursivo. Veamos rápidamente la diferencia:\n\nlet accum = 0\nlet number = 5\n\nfunction addTo () {\n\tif (number === 0) { \n\t\tconsole.log(accum)\n\t\treturn\n\t}\n\t\n\tsetImmediate(() => {\n\t\taccum = number + accum\n\t\tnumber--\n\t\taddTo()\n\t})\n}\n\n\nfunction finish () {\n  console.log('Finished')\n}\n\naddTo()\nfinish()\n\n\n 1. Al igual que antes se ejecuta la primera vez addTo\n    \n 2. Al igual que antes pasa al finish, pero fijemonos que no tenemos en la cola\n    de task, es decir, no estamos pendientes de que realmente termine nada.\n    \n 3. De repente, si continuaramos ejecutando vemos como ha desaparecido todo y de\n    repente aparece un método anónimo en nuestro call stack, que no es otro que\n    la ejecución de lo que tenemos dentro del setImmediate\n    \n 4. Y al igual que antes, este ejecutaría de nuevo nuestra función addTo\n    \n\nEste proceso se repetiría, veriamos como entra anonymous, luego addTo, termina \naddTo y desaparece, termina anonymous y desaparece, y en el siguiente ciclo todo\nse repite, hasta que coincide con number===0 que hace que se termine\n\n\nComo vemos es bastante similar al proceso con setTimeout pero con menos pasos,\nesto no quiere decir que tenga que ser siempre más rápido, a fin de cuentas,\nambos pasan por el event loop casi de la misma forma.\n\nUsando process.nextTick\nPor último veremos como será nuestra solución usando process.nextTick(). En este\ncaso todo es igual que con setImmediate:\n\nlet accum = 0\nlet number = 5\n\nfunction addTo () {\n\tif (number === 0) { \n\t\tconsole.log(accum)\n\t\treturn\n\t}\n\t\n\tprocess.nextTick(() => {\n\t\taccum = number + accum\n\t\tnumber--\n\t\taddTo()\n\t})\n}\n\n\nfunction finish () {\n  console.log('Finished')\n}\n\naddTo()\nfinish()\n\n\nEn este ejemplo me ahorraré las imágenes ya que visualmente sigue el mismo\nproceso que setImmediate:\n\n 1. Se ejecuta la primera vez addTo\n 2. A continuación finish\n 3. Anonymous (lo que está dentro de nextTick)\n 4. addTo....\n 5. y el proceso se repite\n\nUsando process.nextTick, tenemos otra solución pero en este caso, el beneficio\nes la velocidad, si echamos un vistazo a como se procesan las colas:\n\n\nPodremos ver como nextTick se ejecuta tras cada hito dentro del loop, lo que\nsignifica que no tenemos que repetir el ciclo de vida del loop para volver a\nencontrarnos con el nextTick, como ocurre con los timers o el setImmediate.\n\nCon esto de la recursión realmente lo que quería era mostrar un poco como\nsolucionar problemas de maximum call stack y que se viera un poco que ocurre por\ndentro del event loop que no está de más tenerlo a veces en cuenta cuando\ntenemos ciertos problemas.\n\nEn siguientes posts de esta serie empezaremos con los algoritmos de búsqueda.\nOtro tema bastante interesante creo yo. Sin más, nos vemos en el siguiente un\nabrazoooooo","html":"<!--kg-card-begin: markdown--><p>Bien en el post anterior vimos la primera de las opciones para compensar el problema del <em>maximum call stack</em> que nos podía dar la recursividad. En este post veremos algunas otras opciones para tener en nuestro arsenal, que cumplen (más o menos) con la resolución de nuestro problema aunque alguna sea bastante lenta y tengan el handicap de que debemos controlar la asincronía.</p>\n<h3 id=\"usandosettimeout\">Usando setTimeout</h3>\n<p>En este caso vamos a jugar con el conocido <strong>setTimeout</strong>, en este punto es mejor que estemos familiarizados con el <strong>event-loop</strong> (<a href=\"https://blog.insiderattack.net/event-loop-and-the-big-picture-nodejs-event-loop-part-1-1cb67a182810\">recomiendo leer estos posts</a>)</p>\n<p>Usaremos este ejemplo, cambia un poco lo que teniamos antes, pero es por intentar seguir con el mismo concepto del sumatorio</p>\n<pre><code class=\"language-javascript\">let accum = 0\nlet number = 5\n\nfunction addTo () {\n\tif (number === 0) { \n\t\tconsole.log(accum)\n\t\treturn\n\t}\n\t\n\tsetTimeout(() =&gt; {\n\t\taccum = number + accum\n\t\tnumber--\n\t\taddTo()\n\t}, 0)\n}\n\n\nfunction finish () {\n  console.log('Finished')\n}\n\naddTo()\nfinish()\n</code></pre>\n<p>Como vemos tenemos nuestra función <strong>addTo</strong> que si el número no es 0 pasa por un <strong>setTimeout</strong> con 0. Esto aunque no podamos verlo en la aplicación que lo incluye dentro de la <strong>task queue</strong> lo que hace es incluir el método en la <strong>timers queue</strong> y se ejecutaría según el ciclo de vida habitual de node cuando pase por los <strong>timers</strong> resueltos.</p>\n<p>Veamos un poco lo que pasa cuando ejecutamos esto dentro de <strong>jv9000</strong> <strong>(OJO que esto no funciona en la web tengo un fork modificado para permitir esto y otras cosas)</strong></p>\n<ol>\n<li>\n<p>Incluye en el call stack la primera ejecución de <strong>addTo</strong><br>\n<img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-21-a-las-20.24.06.png\" alt=\"Captura-de-pantalla-2020-12-21-a-las-20.24.06\"></p>\n</li>\n<li>\n<p>Como <em>number</em> no es 0 se ejecuta el <em>setTimeout</em>, es decir, incluye la función anónima dentro de la <em>timers queue</em>, que para nosotros en nuestro visualizador esta dentro de la <em>task queue</em><br>\n<img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-21-a-las-20.24.21.png\" alt=\"Captura-de-pantalla-2020-12-21-a-las-20.24.21\"></p>\n</li>\n<li>\n<p>Importante, el paso anterior ha pasado como a un segundo plano dentro del event loop, por lo que para nosotros ha terminado la ejecución de <strong>addTo</strong> por lo que ya la podemos sacar del <strong>call stack</strong><br>\n<img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-21-a-las-20.24.36.png\" alt=\"Captura-de-pantalla-2020-12-21-a-las-20.24.36\"></p>\n</li>\n<li>\n<p>El loop continua y le toca a la función finish.<br>\n<img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-21-a-las-20.25.02.png\" alt=\"Captura-de-pantalla-2020-12-21-a-las-20.25.02\"><br>\nImportante en este punto darse cuenta de que ha entrado la función finish al <em>call stack</em> se ha ejecutado y ha salido, sin que todavía hayamos tocado lo que tenemos dentro de <em>task queue</em></p>\n</li>\n<li>\n<p>Una vez ejecutada la función <em>finish</em> ya le toca el turno a comprobar <em>task</em>, al ver que tenemos algo lo pasa al <em>call stack</em> y lo ejecuta<br>\n<img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-21-a-las-20.25.43.png\" alt=\"Captura-de-pantalla-2020-12-21-a-las-20.25.43\"></p>\n</li>\n<li>\n<p>Al ejecutarlo dentro del call stack, lo que tenemos de nuevo es otra ejecución de <em>addTo</em>, que repite la operación incluye en la <em>task queue</em> la función anónima del timeout<br>\n<img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-21-a-las-20.37.26.png\" alt=\"Captura-de-pantalla-2020-12-21-a-las-20.37.26\"></p>\n</li>\n</ol>\n<p>Y el proceso se repite <strong>n</strong> veces hasta que se cumple el <strong>number === 0</strong><br>\n<img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-21-a-las-20.55.37.png\" alt=\"Captura-de-pantalla-2020-12-21-a-las-20.55.37\"></p>\n<p>Donde terminaría nuestra ejecución. Como vemos aquí tenemos otro caso donde evitamos que la cola de llamadas se llene.</p>\n<h3 id=\"usandosetimmediate\">Usando setImmediate</h3>\n<p>Usando <strong>setImmediate</strong> es similar al setTimeout pero tiene menos pasos, en el caso anterior nuestra ejecución pasa por incluirse en la cola de task, comprobar el tiempo, ver que ha terminado incluirlo en el call stack y ejecutarlo. Al final son bastantes pasos. Sin embargo el <strong>setImmediate</strong> tiene su propia cola y se ejecutan al momento tras los eventos de I/O por lo que puede ser más rápido en un entorno recursivo. Veamos rápidamente la diferencia:</p>\n<pre><code class=\"language-javascript\">let accum = 0\nlet number = 5\n\nfunction addTo () {\n\tif (number === 0) { \n\t\tconsole.log(accum)\n\t\treturn\n\t}\n\t\n\tsetImmediate(() =&gt; {\n\t\taccum = number + accum\n\t\tnumber--\n\t\taddTo()\n\t})\n}\n\n\nfunction finish () {\n  console.log('Finished')\n}\n\naddTo()\nfinish()\n</code></pre>\n<ol>\n<li>Al igual que antes se ejecuta la primera vez <strong>addTo</strong><br>\n<img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-21-a-las-21.09.51.png\" alt=\"Captura-de-pantalla-2020-12-21-a-las-21.09.51\"></li>\n<li>Al igual que antes pasa al finish, pero fijemonos que no tenemos en la cola de <em>task</em>, es decir, no estamos pendientes de que realmente termine nada.<br>\n<img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-21-a-las-21.10.03.png\" alt=\"Captura-de-pantalla-2020-12-21-a-las-21.10.03\"></li>\n<li>De repente, si continuaramos ejecutando vemos como ha desaparecido todo y de repente aparece un método anónimo en nuestro call stack, que no es otro que la ejecución de lo que tenemos dentro del <em>setImmediate</em><br>\n<img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-21-a-las-21.10.23.png\" alt=\"Captura-de-pantalla-2020-12-21-a-las-21.10.23\"></li>\n<li>Y al igual que antes, este ejecutaría de nuevo nuestra función <em>addTo</em><br>\n<img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-21-a-las-21.10.32.png\" alt=\"Captura-de-pantalla-2020-12-21-a-las-21.10.32\"></li>\n</ol>\n<p>Este proceso se repetiría, veriamos como entra <em>anonymous</em>, luego <em>addTo</em>, termina <em>addTo</em> y desaparece, termina <em>anonymous</em> y desaparece, y en el siguiente ciclo todo se repite, hasta que coincide con <strong>number===0</strong> que hace que se termine<br>\n<img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-21-a-las-21.13.54.png\" alt=\"Captura-de-pantalla-2020-12-21-a-las-21.13.54\"></p>\n<p>Como vemos es bastante similar al proceso con <em>setTimeout</em> pero con menos pasos, esto no quiere decir que tenga que ser siempre más rápido, a fin de cuentas, ambos pasan por el event loop casi de la misma forma.</p>\n<h3 id=\"usandoprocessnexttick\">Usando process.nextTick</h3>\n<p>Por último veremos como será nuestra solución usando <strong>process.nextTick()</strong>. En este caso todo es igual que con setImmediate:</p>\n<pre><code class=\"language-javascript\">let accum = 0\nlet number = 5\n\nfunction addTo () {\n\tif (number === 0) { \n\t\tconsole.log(accum)\n\t\treturn\n\t}\n\t\n\tprocess.nextTick(() =&gt; {\n\t\taccum = number + accum\n\t\tnumber--\n\t\taddTo()\n\t})\n}\n\n\nfunction finish () {\n  console.log('Finished')\n}\n\naddTo()\nfinish()\n</code></pre>\n<p>En este ejemplo me ahorraré las imágenes ya que visualmente sigue el mismo proceso que setImmediate:</p>\n<ol>\n<li>Se ejecuta la primera vez <strong>addTo</strong></li>\n<li>A continuación finish</li>\n<li>Anonymous (lo que está dentro de nextTick)</li>\n<li><strong>addTo</strong>....</li>\n<li>y el proceso se repite</li>\n</ol>\n<p>Usando <strong>process.nextTick</strong>, tenemos otra solución pero en este caso, el beneficio es la velocidad, si echamos un vistazo a como se procesan las colas:<br>\n<img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-21-a-las-21.26.21.png\" alt=\"Captura-de-pantalla-2020-12-21-a-las-21.26.21\"></p>\n<p>Podremos ver como nextTick se ejecuta tras cada <em>hito</em> dentro del loop, lo que significa que no tenemos que repetir el ciclo de vida del loop para volver a encontrarnos con el <em>nextTick</em>, como ocurre con los timers o el <em>setImmediate</em>.</p>\n<p>Con esto de la recursión realmente lo que quería era mostrar un poco como solucionar problemas de <em>maximum call stack</em> y que se viera un poco que ocurre por dentro del event loop que no está de más tenerlo a veces en cuenta cuando tenemos ciertos problemas.</p>\n<p>En siguientes posts de esta serie empezaremos con los algoritmos de búsqueda. Otro tema bastante interesante creo yo. Sin más, nos vemos en el siguiente un abrazoooooo</p>\n<!--kg-card-end: markdown-->","url":"https://jlgarcia.fulldev.ninja/js-algoritmos-y-estructuras-de-datos-vii-la-recursividad-iii/","canonical_url":null,"uuid":"84196055-084f-4e7d-83aa-f721d0ea1a51","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"5fd65ddfa6c0f5058bff49a1","reading_time":5,"send_email_when_published":false,"email_subject":null,"childHtmlRehype":{"html":"<!--kg-card-begin: markdown--><p>Bien en el post anterior vimos la primera de las opciones para compensar el problema del <em>maximum call stack</em> que nos podía dar la recursividad. En este post veremos algunas otras opciones para tener en nuestro arsenal, que cumplen (más o menos) con la resolución de nuestro problema aunque alguna sea bastante lenta y tengan el handicap de que debemos controlar la asincronía.</p>\n<h3 id=\"usandosettimeout\">Usando setTimeout</h3>\n<p>En este caso vamos a jugar con el conocido <strong>setTimeout</strong>, en este punto es mejor que estemos familiarizados con el <strong>event-loop</strong> (<a href=\"https://blog.insiderattack.net/event-loop-and-the-big-picture-nodejs-event-loop-part-1-1cb67a182810\">recomiendo leer estos posts</a>)</p>\n<p>Usaremos este ejemplo, cambia un poco lo que teniamos antes, pero es por intentar seguir con el mismo concepto del sumatorio</p>\n<div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">let</span> accum <span class=\"token operator\">=</span> <span class=\"token number\">0</span>\n<span class=\"token keyword\">let</span> number <span class=\"token operator\">=</span> <span class=\"token number\">5</span>\n\n<span class=\"token keyword\">function</span> <span class=\"token function\">addTo</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n\t<span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>number <span class=\"token operator\">===</span> <span class=\"token number\">0</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span> \n\t\tconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>accum<span class=\"token punctuation\">)</span>\n\t\t<span class=\"token keyword\">return</span>\n\t<span class=\"token punctuation\">}</span>\n\t\n\t<span class=\"token function\">setTimeout</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n\t\taccum <span class=\"token operator\">=</span> number <span class=\"token operator\">+</span> accum\n\t\tnumber<span class=\"token operator\">--</span>\n\t\t<span class=\"token function\">addTo</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n\t<span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token number\">0</span><span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span>\n\n\n<span class=\"token keyword\">function</span> <span class=\"token function\">finish</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'Finished'</span><span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token function\">addTo</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n<span class=\"token function\">finish</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n</code></pre></div>\n<p>Como vemos tenemos nuestra función <strong>addTo</strong> que si el número no es 0 pasa por un <strong>setTimeout</strong> con 0. Esto aunque no podamos verlo en la aplicación que lo incluye dentro de la <strong>task queue</strong> lo que hace es incluir el método en la <strong>timers queue</strong> y se ejecutaría según el ciclo de vida habitual de node cuando pase por los <strong>timers</strong> resueltos.</p>\n<p>Veamos un poco lo que pasa cuando ejecutamos esto dentro de <strong>jv9000</strong> <strong>(OJO que esto no funciona en la web tengo un fork modificado para permitir esto y otras cosas)</strong></p>\n<ol>\n<li>\n<p>Incluye en el call stack la primera ejecución de <strong>addTo</strong><br>\n<img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-21-a-las-20.24.06.png\" alt=\"Captura-de-pantalla-2020-12-21-a-las-20.24.06\"></p>\n</li>\n<li>\n<p>Como <em>number</em> no es 0 se ejecuta el <em>setTimeout</em>, es decir, incluye la función anónima dentro de la <em>timers queue</em>, que para nosotros en nuestro visualizador esta dentro de la <em>task queue</em><br>\n<img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-21-a-las-20.24.21.png\" alt=\"Captura-de-pantalla-2020-12-21-a-las-20.24.21\"></p>\n</li>\n<li>\n<p>Importante, el paso anterior ha pasado como a un segundo plano dentro del event loop, por lo que para nosotros ha terminado la ejecución de <strong>addTo</strong> por lo que ya la podemos sacar del <strong>call stack</strong><br>\n<img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-21-a-las-20.24.36.png\" alt=\"Captura-de-pantalla-2020-12-21-a-las-20.24.36\"></p>\n</li>\n<li>\n<p>El loop continua y le toca a la función finish.<br>\n<img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-21-a-las-20.25.02.png\" alt=\"Captura-de-pantalla-2020-12-21-a-las-20.25.02\"><br>\nImportante en este punto darse cuenta de que ha entrado la función finish al <em>call stack</em> se ha ejecutado y ha salido, sin que todavía hayamos tocado lo que tenemos dentro de <em>task queue</em></p>\n</li>\n<li>\n<p>Una vez ejecutada la función <em>finish</em> ya le toca el turno a comprobar <em>task</em>, al ver que tenemos algo lo pasa al <em>call stack</em> y lo ejecuta<br>\n<img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-21-a-las-20.25.43.png\" alt=\"Captura-de-pantalla-2020-12-21-a-las-20.25.43\"></p>\n</li>\n<li>\n<p>Al ejecutarlo dentro del call stack, lo que tenemos de nuevo es otra ejecución de <em>addTo</em>, que repite la operación incluye en la <em>task queue</em> la función anónima del timeout<br>\n<img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-21-a-las-20.37.26.png\" alt=\"Captura-de-pantalla-2020-12-21-a-las-20.37.26\"></p>\n</li>\n</ol>\n<p>Y el proceso se repite <strong>n</strong> veces hasta que se cumple el <strong>number === 0</strong><br>\n<img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-21-a-las-20.55.37.png\" alt=\"Captura-de-pantalla-2020-12-21-a-las-20.55.37\"></p>\n<p>Donde terminaría nuestra ejecución. Como vemos aquí tenemos otro caso donde evitamos que la cola de llamadas se llene.</p>\n<h3 id=\"usandosetimmediate\">Usando setImmediate</h3>\n<p>Usando <strong>setImmediate</strong> es similar al setTimeout pero tiene menos pasos, en el caso anterior nuestra ejecución pasa por incluirse en la cola de task, comprobar el tiempo, ver que ha terminado incluirlo en el call stack y ejecutarlo. Al final son bastantes pasos. Sin embargo el <strong>setImmediate</strong> tiene su propia cola y se ejecutan al momento tras los eventos de I/O por lo que puede ser más rápido en un entorno recursivo. Veamos rápidamente la diferencia:</p>\n<div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">let</span> accum <span class=\"token operator\">=</span> <span class=\"token number\">0</span>\n<span class=\"token keyword\">let</span> number <span class=\"token operator\">=</span> <span class=\"token number\">5</span>\n\n<span class=\"token keyword\">function</span> <span class=\"token function\">addTo</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n\t<span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>number <span class=\"token operator\">===</span> <span class=\"token number\">0</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span> \n\t\tconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>accum<span class=\"token punctuation\">)</span>\n\t\t<span class=\"token keyword\">return</span>\n\t<span class=\"token punctuation\">}</span>\n\t\n\t<span class=\"token function\">setImmediate</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n\t\taccum <span class=\"token operator\">=</span> number <span class=\"token operator\">+</span> accum\n\t\tnumber<span class=\"token operator\">--</span>\n\t\t<span class=\"token function\">addTo</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n\t<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span>\n\n\n<span class=\"token keyword\">function</span> <span class=\"token function\">finish</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'Finished'</span><span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token function\">addTo</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n<span class=\"token function\">finish</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n</code></pre></div>\n<ol>\n<li>Al igual que antes se ejecuta la primera vez <strong>addTo</strong><br>\n<img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-21-a-las-21.09.51.png\" alt=\"Captura-de-pantalla-2020-12-21-a-las-21.09.51\"></li>\n<li>Al igual que antes pasa al finish, pero fijemonos que no tenemos en la cola de <em>task</em>, es decir, no estamos pendientes de que realmente termine nada.<br>\n<img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-21-a-las-21.10.03.png\" alt=\"Captura-de-pantalla-2020-12-21-a-las-21.10.03\"></li>\n<li>De repente, si continuaramos ejecutando vemos como ha desaparecido todo y de repente aparece un método anónimo en nuestro call stack, que no es otro que la ejecución de lo que tenemos dentro del <em>setImmediate</em><br>\n<img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-21-a-las-21.10.23.png\" alt=\"Captura-de-pantalla-2020-12-21-a-las-21.10.23\"></li>\n<li>Y al igual que antes, este ejecutaría de nuevo nuestra función <em>addTo</em><br>\n<img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-21-a-las-21.10.32.png\" alt=\"Captura-de-pantalla-2020-12-21-a-las-21.10.32\"></li>\n</ol>\n<p>Este proceso se repetiría, veriamos como entra <em>anonymous</em>, luego <em>addTo</em>, termina <em>addTo</em> y desaparece, termina <em>anonymous</em> y desaparece, y en el siguiente ciclo todo se repite, hasta que coincide con <strong>number===0</strong> que hace que se termine<br>\n<img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-21-a-las-21.13.54.png\" alt=\"Captura-de-pantalla-2020-12-21-a-las-21.13.54\"></p>\n<p>Como vemos es bastante similar al proceso con <em>setTimeout</em> pero con menos pasos, esto no quiere decir que tenga que ser siempre más rápido, a fin de cuentas, ambos pasan por el event loop casi de la misma forma.</p>\n<h3 id=\"usandoprocessnexttick\">Usando process.nextTick</h3>\n<p>Por último veremos como será nuestra solución usando <strong>process.nextTick()</strong>. En este caso todo es igual que con setImmediate:</p>\n<div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">let</span> accum <span class=\"token operator\">=</span> <span class=\"token number\">0</span>\n<span class=\"token keyword\">let</span> number <span class=\"token operator\">=</span> <span class=\"token number\">5</span>\n\n<span class=\"token keyword\">function</span> <span class=\"token function\">addTo</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n\t<span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>number <span class=\"token operator\">===</span> <span class=\"token number\">0</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span> \n\t\tconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>accum<span class=\"token punctuation\">)</span>\n\t\t<span class=\"token keyword\">return</span>\n\t<span class=\"token punctuation\">}</span>\n\t\n\tprocess<span class=\"token punctuation\">.</span><span class=\"token function\">nextTick</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n\t\taccum <span class=\"token operator\">=</span> number <span class=\"token operator\">+</span> accum\n\t\tnumber<span class=\"token operator\">--</span>\n\t\t<span class=\"token function\">addTo</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n\t<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span>\n\n\n<span class=\"token keyword\">function</span> <span class=\"token function\">finish</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'Finished'</span><span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token function\">addTo</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n<span class=\"token function\">finish</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n</code></pre></div>\n<p>En este ejemplo me ahorraré las imágenes ya que visualmente sigue el mismo proceso que setImmediate:</p>\n<ol>\n<li>Se ejecuta la primera vez <strong>addTo</strong></li>\n<li>A continuación finish</li>\n<li>Anonymous (lo que está dentro de nextTick)</li>\n<li><strong>addTo</strong>....</li>\n<li>y el proceso se repite</li>\n</ol>\n<p>Usando <strong>process.nextTick</strong>, tenemos otra solución pero en este caso, el beneficio es la velocidad, si echamos un vistazo a como se procesan las colas:<br>\n<img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-21-a-las-21.26.21.png\" alt=\"Captura-de-pantalla-2020-12-21-a-las-21.26.21\"></p>\n<p>Podremos ver como nextTick se ejecuta tras cada <em>hito</em> dentro del loop, lo que significa que no tenemos que repetir el ciclo de vida del loop para volver a encontrarnos con el <em>nextTick</em>, como ocurre con los timers o el <em>setImmediate</em>.</p>\n<p>Con esto de la recursión realmente lo que quería era mostrar un poco como solucionar problemas de <em>maximum call stack</em> y que se viera un poco que ocurre por dentro del event loop que no está de más tenerlo a veces en cuenta cuando tenemos ciertos problemas.</p>\n<p>En siguientes posts de esta serie empezaremos con los algoritmos de búsqueda. Otro tema bastante interesante creo yo. Sin más, nos vemos en el siguiente un abrazoooooo</p>\n<!--kg-card-end: markdown-->","htmlAst":{"type":"root","children":[{"type":"comment","value":"kg-card-begin: markdown"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Bien en el post anterior vimos la primera de las opciones para compensar el problema del "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"maximum call stack"}]},{"type":"text","value":" que nos podía dar la recursividad. En este post veremos algunas otras opciones para tener en nuestro arsenal, que cumplen (más o menos) con la resolución de nuestro problema aunque alguna sea bastante lenta y tengan el handicap de que debemos controlar la asincronía."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"usandosettimeout"},"children":[{"type":"text","value":"Usando setTimeout"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"En este caso vamos a jugar con el conocido "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"setTimeout"}]},{"type":"text","value":", en este punto es mejor que estemos familiarizados con el "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"event-loop"}]},{"type":"text","value":" ("},{"type":"element","tagName":"a","properties":{"href":"https://blog.insiderattack.net/event-loop-and-the-big-picture-nodejs-event-loop-part-1-1cb67a182810"},"children":[{"type":"text","value":"recomiendo leer estos posts"}]},{"type":"text","value":")"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Usaremos este ejemplo, cambia un poco lo que teniamos antes, pero es por intentar seguir con el mismo concepto del sumatorio"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"javascript"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-javascript"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-javascript"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"let"}]},{"type":"text","value":" accum "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"0"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"let"}]},{"type":"text","value":" number "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"5"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"addTo"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n\t"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"if"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"number "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"==="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"0"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" \n\t\tconsole"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"log"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"accum"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n\t\t"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":"\n\t"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\t\n\t"},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"setTimeout"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n\t\taccum "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" number "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" accum\n\t\tnumber"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"--"}]},{"type":"text","value":"\n\t\t"},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"addTo"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n\t"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"0"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"finish"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n  console"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"log"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'Finished'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"addTo"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"finish"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Como vemos tenemos nuestra función "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"addTo"}]},{"type":"text","value":" que si el número no es 0 pasa por un "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"setTimeout"}]},{"type":"text","value":" con 0. Esto aunque no podamos verlo en la aplicación que lo incluye dentro de la "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"task queue"}]},{"type":"text","value":" lo que hace es incluir el método en la "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"timers queue"}]},{"type":"text","value":" y se ejecutaría según el ciclo de vida habitual de node cuando pase por los "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"timers"}]},{"type":"text","value":" resueltos."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Veamos un poco lo que pasa cuando ejecutamos esto dentro de "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"jv9000"}]},{"type":"text","value":" "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"(OJO que esto no funciona en la web tengo un fork modificado para permitir esto y otras cosas)"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Incluye en el call stack la primera ejecución de "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"addTo"}]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-21-a-las-20.24.06.png","alt":"Captura-de-pantalla-2020-12-21-a-las-20.24.06"},"children":[]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Como "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"number"}]},{"type":"text","value":" no es 0 se ejecuta el "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"setTimeout"}]},{"type":"text","value":", es decir, incluye la función anónima dentro de la "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"timers queue"}]},{"type":"text","value":", que para nosotros en nuestro visualizador esta dentro de la "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"task queue"}]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-21-a-las-20.24.21.png","alt":"Captura-de-pantalla-2020-12-21-a-las-20.24.21"},"children":[]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Importante, el paso anterior ha pasado como a un segundo plano dentro del event loop, por lo que para nosotros ha terminado la ejecución de "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"addTo"}]},{"type":"text","value":" por lo que ya la podemos sacar del "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"call stack"}]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-21-a-las-20.24.36.png","alt":"Captura-de-pantalla-2020-12-21-a-las-20.24.36"},"children":[]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"El loop continua y le toca a la función finish."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-21-a-las-20.25.02.png","alt":"Captura-de-pantalla-2020-12-21-a-las-20.25.02"},"children":[]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nImportante en este punto darse cuenta de que ha entrado la función finish al "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"call stack"}]},{"type":"text","value":" se ha ejecutado y ha salido, sin que todavía hayamos tocado lo que tenemos dentro de "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"task queue"}]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Una vez ejecutada la función "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"finish"}]},{"type":"text","value":" ya le toca el turno a comprobar "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"task"}]},{"type":"text","value":", al ver que tenemos algo lo pasa al "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"call stack"}]},{"type":"text","value":" y lo ejecuta"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-21-a-las-20.25.43.png","alt":"Captura-de-pantalla-2020-12-21-a-las-20.25.43"},"children":[]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Al ejecutarlo dentro del call stack, lo que tenemos de nuevo es otra ejecución de "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"addTo"}]},{"type":"text","value":", que repite la operación incluye en la "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"task queue"}]},{"type":"text","value":" la función anónima del timeout"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-21-a-las-20.37.26.png","alt":"Captura-de-pantalla-2020-12-21-a-las-20.37.26"},"children":[]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Y el proceso se repite "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"n"}]},{"type":"text","value":" veces hasta que se cumple el "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"number === 0"}]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-21-a-las-20.55.37.png","alt":"Captura-de-pantalla-2020-12-21-a-las-20.55.37"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Donde terminaría nuestra ejecución. Como vemos aquí tenemos otro caso donde evitamos que la cola de llamadas se llene."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"usandosetimmediate"},"children":[{"type":"text","value":"Usando setImmediate"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Usando "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"setImmediate"}]},{"type":"text","value":" es similar al setTimeout pero tiene menos pasos, en el caso anterior nuestra ejecución pasa por incluirse en la cola de task, comprobar el tiempo, ver que ha terminado incluirlo en el call stack y ejecutarlo. Al final son bastantes pasos. Sin embargo el "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"setImmediate"}]},{"type":"text","value":" tiene su propia cola y se ejecutan al momento tras los eventos de I/O por lo que puede ser más rápido en un entorno recursivo. Veamos rápidamente la diferencia:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"javascript"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-javascript"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-javascript"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"let"}]},{"type":"text","value":" accum "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"0"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"let"}]},{"type":"text","value":" number "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"5"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"addTo"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n\t"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"if"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"number "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"==="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"0"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" \n\t\tconsole"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"log"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"accum"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n\t\t"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":"\n\t"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\t\n\t"},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"setImmediate"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n\t\taccum "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" number "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" accum\n\t\tnumber"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"--"}]},{"type":"text","value":"\n\t\t"},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"addTo"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n\t"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"finish"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n  console"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"log"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'Finished'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"addTo"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"finish"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Al igual que antes se ejecuta la primera vez "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"addTo"}]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-21-a-las-21.09.51.png","alt":"Captura-de-pantalla-2020-12-21-a-las-21.09.51"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Al igual que antes pasa al finish, pero fijemonos que no tenemos en la cola de "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"task"}]},{"type":"text","value":", es decir, no estamos pendientes de que realmente termine nada."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-21-a-las-21.10.03.png","alt":"Captura-de-pantalla-2020-12-21-a-las-21.10.03"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"De repente, si continuaramos ejecutando vemos como ha desaparecido todo y de repente aparece un método anónimo en nuestro call stack, que no es otro que la ejecución de lo que tenemos dentro del "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"setImmediate"}]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-21-a-las-21.10.23.png","alt":"Captura-de-pantalla-2020-12-21-a-las-21.10.23"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Y al igual que antes, este ejecutaría de nuevo nuestra función "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"addTo"}]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-21-a-las-21.10.32.png","alt":"Captura-de-pantalla-2020-12-21-a-las-21.10.32"},"children":[]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Este proceso se repetiría, veriamos como entra "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"anonymous"}]},{"type":"text","value":", luego "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"addTo"}]},{"type":"text","value":", termina "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"addTo"}]},{"type":"text","value":" y desaparece, termina "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"anonymous"}]},{"type":"text","value":" y desaparece, y en el siguiente ciclo todo se repite, hasta que coincide con "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"number===0"}]},{"type":"text","value":" que hace que se termine"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-21-a-las-21.13.54.png","alt":"Captura-de-pantalla-2020-12-21-a-las-21.13.54"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Como vemos es bastante similar al proceso con "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"setTimeout"}]},{"type":"text","value":" pero con menos pasos, esto no quiere decir que tenga que ser siempre más rápido, a fin de cuentas, ambos pasan por el event loop casi de la misma forma."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"usandoprocessnexttick"},"children":[{"type":"text","value":"Usando process.nextTick"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Por último veremos como será nuestra solución usando "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"process.nextTick()"}]},{"type":"text","value":". En este caso todo es igual que con setImmediate:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"javascript"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-javascript"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-javascript"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"let"}]},{"type":"text","value":" accum "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"0"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"let"}]},{"type":"text","value":" number "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"5"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"addTo"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n\t"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"if"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"number "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"==="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"0"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":" \n\t\tconsole"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"log"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"accum"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n\t\t"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":"\n\t"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\t\n\tprocess"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"nextTick"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n\t\taccum "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" number "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" accum\n\t\tnumber"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"--"}]},{"type":"text","value":"\n\t\t"},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"addTo"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n\t"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"finish"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n  console"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"log"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'Finished'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"addTo"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"finish"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"En este ejemplo me ahorraré las imágenes ya que visualmente sigue el mismo proceso que setImmediate:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Se ejecuta la primera vez "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"addTo"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"A continuación finish"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Anonymous (lo que está dentro de nextTick)"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"addTo"}]},{"type":"text","value":"...."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"y el proceso se repite"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Usando "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"process.nextTick"}]},{"type":"text","value":", tenemos otra solución pero en este caso, el beneficio es la velocidad, si echamos un vistazo a como se procesan las colas:"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-21-a-las-21.26.21.png","alt":"Captura-de-pantalla-2020-12-21-a-las-21.26.21"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Podremos ver como nextTick se ejecuta tras cada "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"hito"}]},{"type":"text","value":" dentro del loop, lo que significa que no tenemos que repetir el ciclo de vida del loop para volver a encontrarnos con el "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"nextTick"}]},{"type":"text","value":", como ocurre con los timers o el "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"setImmediate"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Con esto de la recursión realmente lo que quería era mostrar un poco como solucionar problemas de "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"maximum call stack"}]},{"type":"text","value":" y que se viera un poco que ocurre por dentro del event loop que no está de más tenerlo a veces en cuenta cuando tenemos ciertos problemas."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"En siguientes posts de esta serie empezaremos con los algoritmos de búsqueda. Otro tema bastante interesante creo yo. Sin más, nos vemos en el siguiente un abrazoooooo"}]},{"type":"text","value":"\n"},{"type":"comment","value":"kg-card-end: markdown"}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"usandosettimeout","heading":"Usando setTimeout"},{"id":"usandosetimmediate","heading":"Usando setImmediate"},{"id":"usandoprocessnexttick","heading":"Usando process.nextTick"}]},"featureImageSharp":{"base":"unordered-3192273_640-1.png","publicURL":"/static/e92df4805fb46ec1f6bec181d2305365/unordered-3192273_640-1.png","imageMeta":{"width":640,"height":512},"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFG0lEQVQ4ywEQBe/6APG/tx3SpZ5Y2+PkQNzf3UjCw89E2M6jZubUibvJxK5Yk5/RHmd0qxNMWpUXsLO/LLe5xT+corsvv7++MmxsaxaZmYUXj4+WHsrKyjrNzc1HANSJfnXTZVT/1X5wp7K+vUSttMg40cSUb+zYh97by4ie0smidOHVpIbbzpWb7Nybsuvbmrbd0ZKAnp/khImK5tyWltuK4uHGPOXl6E3NyMdIAJFqZDnPkIiCwW5inMx1abl/j3YbtLb/AOjCOwXl1IRn2MmFntzNk5Tw46uQ493CYMS+olvt2X+avrSnpo6R6KCEhNulmZrkhs3SsikAABILAMfLzkae0MIY/6TMANl3X5vGi5ajeYjzhYiH66WJi+eaq7TzQuTZqG3v3I+008OFfpKk8ie0pm0n792VubCzwjPOzcE9hofluLOt43/Ue2F8ANfWxzZsXLEeh5X/UKZvjFq/eo3ml6HgedPLukaUk+KxjIvdlPnhcoXu2pwW6tWCl8/Iq1Lp15Cv5NacgElUgxje2r4yvcLqYZeH0tfZdGPhALu70USCg+mpgobwgoyG49zFeobjqqbhhYCO6YmDh+SynZ3VX+bUg4Dq1oeN7NiHxOjXj8jk0XNXfoaCFL29wE7Lx8dK0eznLZB8yaHSgH3MAJuc5qKGhuCF3tmJGo2S6rLIdnrJpYq+sLCIr8LKrbdquMG3RJuZo0vHu4eC6NeQy9HPwUuJjNporKzXYbuzoTe1uLtHuLe0P9BrY8C/fYF/AI+Q58Kur9NhvLfDQ3+K8pXFeW9m3nJZ2d1mRoLUb1ydv8HBKcPc+Cu1qoeG8+med5KY8HOYl+bKjo3nvwBn/w6J0MgV1nhjuayBsuFPctxCAIqK7qybm8txAAAAAXyG8Im3kraj2nBY0M9vZazlcWFlAAAADkseE59cLiD4TiMHc3570auip+BMkJnslKZ3q5PXYkie0GhZ4bR9ntm4na5oAIeJ4GGOj+7S1dDJTqe951G3e5nrx2pZTs2/pT+ZjH9IUSohtkYkGP9XJBf/WCIR/1gwNfV2ds+lv3SH1M97csHfiWiGynJ1za10ncfifGW3AOvajLKkn8qdgYLtx7LA8WbegnGkmn2+vJKn/39iRVHMXjcn/z87N/l/ZFP7OSol/0MsHrvEbG2usHef4ouY+aGJnvF1rn+ozdF3ccLMeGqWAOzZjN7444OryLyvuH2K+8C8iZ/U1IJ2oG+u/zB5ZHl8iHBd/6eWifvKqI3/npGF/ZR5bf/EbW3an7DGK6Sl5YuLiuf/jZb2obahhjO1vMJGAPLflS795oUW9+N/ld/QjMXYyJr43I1t9MdNJzUAOAADpodx58Gfh/+2pJbpw6GH+qSGc9rPblisqpfDcKWj1N7m2KHVo57Myri4vFCtpqwTAP///wA4Qu8NgYTuetbLs6rk1pb/ybOjt9VvZ6nCe3R8vZ6Dvph6YsCjhXPzi3FcsbWUgL/SalawjoTgrpufzW7YypGa3c+i5uvbk3jw34+GANDPuTesrNtxi4zo4oqN87bDubTD5NiUt9zOonzEh23DnoF+8JF8gsfRpHz/jndr07mIdvXMfGaGn6TvrJiW2L23sMDh18qbg8urAAXq2pGqANDQ0EM2NjUTeHidH5qZlSEABVkJ/+eDL9fJh43Hpn/zn4ym/6Ca0f+tnbD+nYaO/7eXhvmxroxy7N6gf8u/p57XzJ513+DcQ7e3uzE9PDMO7sYRFrnPY/gAAAAASUVORK5CYII=","aspectRatio":1.25,"src":"/static/e92df4805fb46ec1f6bec181d2305365/8bef3/unordered-3192273_640-1.png","srcSet":"/static/e92df4805fb46ec1f6bec181d2305365/847ef/unordered-3192273_640-1.png 175w,\n/static/e92df4805fb46ec1f6bec181d2305365/91cba/unordered-3192273_640-1.png 350w,\n/static/e92df4805fb46ec1f6bec181d2305365/8bef3/unordered-3192273_640-1.png 640w","srcWebp":"/static/e92df4805fb46ec1f6bec181d2305365/1ea2e/unordered-3192273_640-1.webp","srcSetWebp":"/static/e92df4805fb46ec1f6bec181d2305365/9fca7/unordered-3192273_640-1.webp 175w,\n/static/e92df4805fb46ec1f6bec181d2305365/37a4e/unordered-3192273_640-1.webp 350w,\n/static/e92df4805fb46ec1f6bec181d2305365/1ea2e/unordered-3192273_640-1.webp 640w","sizes":"(max-width: 640px) 100vw, 640px"}}}}},{"node":{"id":"Ghost__Post__5fbc0b8ba6c0f5058bff47fa","title":"JS Algoritmos y  Estructuras de datos VI: La recursividad  II - Resolviendo problemas  I","slug":"js-algoritmos-y-estructuras-de-datos-vi-la-recursividad-y-como-resolver-el-problema","featured":false,"feature_image":"https://jlgarcia.fulldev.ninja/assets/images/2020/12/unordered-3192273_640.png","excerpt":"Ya vimos en el post anterior cual es el problema principal que podemos tener en\nJavaScript a la hora de usar la recursividad. En un primer momento lo más\nprobable es que nunca nos encontremos con este problema a no ser que trabajemos\ncon una gran cantidad de datos, pero aún así, creo que ver como se soluciona\neste problema puede hacernos entender algunas cosas del funcionamiento de\nJavascript y como podemos usarlas para cualquier otro problema que nos\nencontremos.\n\nPara resolver el problema de \"","custom_excerpt":null,"visibility":"public","created_at_pretty":"23 Nov 2020","published_at_pretty":"21 Dec 2020","updated_at_pretty":"19 Jan 2021","created_at":"2020-11-23T20:20:43.000+01:00","published_at":"2020-12-21T11:00:00.000+01:00","updated_at":"2021-01-19T21:12:09.000+01:00","meta_title":null,"meta_description":null,"og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"slug":"jlgarcia","url":"https://jlgarcia.fulldev.ninja/author/jlgarcia/","name":"Juan Luis Garcia Aparicio","bio":null,"cover_image":null,"profile_image":"https://jlgarcia.fulldev.ninja/assets/images/2017/12/Perfil.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":null}],"primary_author":{"slug":"jlgarcia","url":"https://jlgarcia.fulldev.ninja/author/jlgarcia/","name":"Juan Luis Garcia Aparicio","bio":null,"cover_image":null,"profile_image":"https://jlgarcia.fulldev.ninja/assets/images/2017/12/Perfil.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":{"base":"Perfil.jpg","publicURL":"/static/b0de6281fb28a266510b3b09b9243e5a/Perfil.jpg","imageMeta":{"width":307,"height":307},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAUDBAb/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIQAxAAAAGzw6zC6zHn+cLYP//EAB0QAAICAQUAAAAAAAAAAAAAAAEDAAIEEyEiIzL/2gAIAQEAAQUCifca8KgcKWVfUpkHsG5pxX//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAEDAQE/AR//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAECAQE/AR//xAAdEAACAgEFAAAAAAAAAAAAAAAAARARcQISIUFR/9oACAEBAAY/AhU88xkb7N06a8P/xAAcEAEAAwEAAwEAAAAAAAAAAAABABEhMUFRYXH/2gAIAQEAAT8hR2pq40aqb+xIAeXibhW9JXr8joF4TBcSNe0//9oADAMBAAIAAwAAABDzDwD/xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAEDAQE/EB//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAECAQE/EB//xAAcEAEAAgIDAQAAAAAAAAAAAAABABEhUTFhcfD/2gAIAQEAAT8QyItrELaTlatLwU63MvEW6vUNdy4LZQDn7iVApV9VLtANdWwKkuYq4Er1VZ//2Q==","aspectRatio":1,"src":"/static/b0de6281fb28a266510b3b09b9243e5a/31709/Perfil.jpg","srcSet":"/static/b0de6281fb28a266510b3b09b9243e5a/f340b/Perfil.jpg 28w,\n/static/b0de6281fb28a266510b3b09b9243e5a/22d64/Perfil.jpg 55w,\n/static/b0de6281fb28a266510b3b09b9243e5a/31709/Perfil.jpg 110w,\n/static/b0de6281fb28a266510b3b09b9243e5a/aa249/Perfil.jpg 165w,\n/static/b0de6281fb28a266510b3b09b9243e5a/0dc33/Perfil.jpg 220w,\n/static/b0de6281fb28a266510b3b09b9243e5a/60667/Perfil.jpg 307w","srcWebp":"/static/b0de6281fb28a266510b3b09b9243e5a/8678c/Perfil.webp","srcSetWebp":"/static/b0de6281fb28a266510b3b09b9243e5a/59cda/Perfil.webp 28w,\n/static/b0de6281fb28a266510b3b09b9243e5a/7da75/Perfil.webp 55w,\n/static/b0de6281fb28a266510b3b09b9243e5a/8678c/Perfil.webp 110w,\n/static/b0de6281fb28a266510b3b09b9243e5a/f282e/Perfil.webp 165w,\n/static/b0de6281fb28a266510b3b09b9243e5a/a7b21/Perfil.webp 220w,\n/static/b0de6281fb28a266510b3b09b9243e5a/f59af/Perfil.webp 307w","sizes":"(max-width: 110px) 100vw, 110px"}}}},"primary_tag":{"slug":"javascript","url":"https://jlgarcia.fulldev.ninja/tag/javascript/","name":"javascript","visibility":"public","feature_image":null,"description":null,"meta_title":null,"meta_description":null,"featureImageSharp":null},"tags":[{"slug":"javascript","url":"https://jlgarcia.fulldev.ninja/tag/javascript/","name":"javascript","visibility":"public","feature_image":null,"description":null,"meta_title":null,"meta_description":null,"featureImageSharp":null},{"slug":"algoritmos","url":"https://jlgarcia.fulldev.ninja/tag/algoritmos/","name":"algoritmos","visibility":"public","feature_image":null,"description":null,"meta_title":null,"meta_description":null,"featureImageSharp":null}],"plaintext":"Ya vimos en el post anterior cual es el problema principal que podemos tener en\nJavaScript a la hora de usar la recursividad. En un primer momento lo más\nprobable es que nunca nos encontremos con este problema a no ser que trabajemos\ncon una gran cantidad de datos, pero aún así, creo que ver como se soluciona\neste problema puede hacernos entender algunas cosas del funcionamiento de\nJavascript y como podemos usarlas para cualquier otro problema que nos\nencontremos.\n\nPara resolver el problema de \"Maximum call stack...\" existen varias formas,\nveremos la mayoría aunque alguna puede que no me guste mucho.\n\nVamos con la primera Trampoline\n\nTrampoline\nEsta se fue extendiendo como una buena posibilidad para resolver el problema,\npero personalmente a mí no me convence demasiado, creo que nos salimos un poco\nde la pureza del concepto de la recursividad pensando en su planteamiento más\nfuncional. Veamos el código en cuestión:\n\nconst trampoline = (fn) => (...args) => {\n  let result = fn(...args)\n  while (typeof result === 'function') {\n    result = result()\n  }\n  return result\n}\n\nfunction addTo(number, accum = 0) {\n\tif (number === 0) {\n\t\treturn accum\n\t}\n\treturn () => addTo(number - 1, number + accum)\n}\n\nfunction finish () {\n  console.log('Finished')\n}\n\nconsole.log(trampoline(addTo)(5))\nfinish()\n\n\nMás de uno se hará una idea de lo que realmente estamos haciendo en este caso y\ncomo cambia con respecto al ejemplo del post anterior sobre recursividad.\nEn este ejemplo tenemos una función addTo que no se llama a si misma, si no que,\nsegún el caso llama a una función anónima que la vuelve a llamar. Pero claro no\npodemos llamar solo a la función addTo ya que en la primera ejecución\nsimplemente devolvería una función que no se ejecuta y terminaría nuestro\nprograma. Lo que hacemos es crear una función trampoline que encapsularía\ncualquier otra donde queramos usar la recursividad. Esta función lo que hace es\ncontrolar si la respuesta es una función que debemos que espera ejecutarse o no,\nen resumen, trampoline es una función que se encarga o de devolver un resultado\nsi se ha cumplido nuestro caso base o de ejecutar de nuevo la función, veamos\nahora lo que pasa en nuestro call stack.\n\n 1. Se ejecuta trampoline\n    \n\nEn cuanto a ejecutar, me refiero a, entre en el call stack y se ejecuta\ndirectamente.\nEsto es una función con currificación, si nos fijamos lo que le pasamos como\nparámetro a trampoline es la función que queremos ejecutar, es decir, addTo.\n\n 2. Se ejecuta trampoline(addTo)(5)\n    \n\nEntra trampoline(addTo)(5) al call stack y comienza a ejecutarse, aquí como\ntenemos un bucle while donde se ejecutan otros métodos, veremos como el call\nstack crece\n\n 3. Se ejecuta por primera vez addTo con el valor 5\n    \n\nComo vemos estamos dentro de trampoline(addTo)(5) ejecutando addTo(5, 0)\nComo el valor no es cero retorna la función anónima que ejecutaria de nuevo \naddTo\n\n\n 4. Se ejecuta la función anónima que a su vez ejecuta addTo(4, 5)\n    \n\nEsto devuelve de nuevo una función anónima, pero como tal su ejecución termina\npor lo que addTo sale del call stack\n\n\nY lo mismo sucede con la función anónima que su ejecución ha terminado y sale\ndel call stack\n\n\n 5. Como el resultado de todo esto sigue siendo una función nuestro trampoline\n    vuelve a ejecutar la función anónima que ha recibido\n    \n\nDonde a su vez se ejecuta addTo(3, 9)\n\n\n 6. Este proceso se repite hasta que el parámetro number === 0 donde termina la\n    ejecución de la función anónima dentro de trampoline\n    \n    \n    \n 7. Se ejecuta el resultado de console.log(trampoline(addTo)(5)) que nos muestra\n    15\n    \n    \n    \n 8. Se ejecuta finish()\n    \n    \n    \n\nEntra dentro del call stack\n\n 9. Ejecuta el console.log dentro de la función finish\n    \n\nY la ejecución de nuestro programa o script termina\n\nComo vemos esto es un truquillo que hace que no saturemos el call stack de\nejecuciones pendientes, que cubre la necesidad que tenemos aunque como digo no\nes algo que me convenza mucho.\n\nEsta es una de las formas que tenemos para evitar el Maximum call stack, en los\nsiguientes post veremos otras posibles soluciones, algunas más sencillas otras\nmás complejas, pero nos serviran para entender del todo como funciona el call\nstack.\n\nNos vemos en el siguiente un abrazoooooo","html":"<!--kg-card-begin: markdown--><p>Ya vimos en el post anterior cual es el problema principal que podemos tener en JavaScript a la hora de usar la recursividad. En un primer momento lo más probable es que nunca nos encontremos con este problema a no ser que trabajemos con una gran cantidad de datos, pero aún así, creo que ver como se soluciona este problema puede hacernos entender algunas cosas del funcionamiento de Javascript y como podemos usarlas para cualquier otro problema que nos encontremos.</p>\n<p>Para resolver el problema de <em>&quot;Maximum call stack...&quot;</em> existen varias formas, veremos la mayoría aunque alguna puede que no me guste mucho.</p>\n<p>Vamos con la primera <strong>Trampoline</strong></p>\n<h3 id=\"trampoline\">Trampoline</h3>\n<p>Esta se fue extendiendo como una buena posibilidad para resolver el problema, pero personalmente a mí no me convence demasiado, creo que nos salimos un poco de la pureza del concepto de la recursividad pensando en su planteamiento más funcional. Veamos el código en cuestión:</p>\n<pre><code class=\"language-javascript\">const trampoline = (fn) =&gt; (...args) =&gt; {\n  let result = fn(...args)\n  while (typeof result === 'function') {\n    result = result()\n  }\n  return result\n}\n\nfunction addTo(number, accum = 0) {\n\tif (number === 0) {\n\t\treturn accum\n\t}\n\treturn () =&gt; addTo(number - 1, number + accum)\n}\n\nfunction finish () {\n  console.log('Finished')\n}\n\nconsole.log(trampoline(addTo)(5))\nfinish()\n</code></pre>\n<p>Más de uno se hará una idea de lo que realmente estamos haciendo en este caso y como cambia con respecto al ejemplo del post anterior sobre recursividad.<br>\nEn este ejemplo tenemos una función <strong>addTo</strong> que no se llama a si misma, si no que, según el caso llama a una función anónima que la vuelve a llamar. Pero claro no podemos llamar solo a la función <strong>addTo</strong> ya que en la primera ejecución simplemente devolvería una función que no se ejecuta y terminaría nuestro programa. Lo que hacemos es crear una función <strong>trampoline</strong> que encapsularía cualquier otra donde queramos usar la recursividad. Esta función lo que hace es controlar si la respuesta es una función que debemos que espera ejecutarse o no, en resumen, trampoline es una función que se encarga o de devolver un resultado si se ha cumplido nuestro <em>caso base</em> o de ejecutar de nuevo la función, veamos ahora lo que pasa en nuestro <em>call stack</em>.</p>\n<ol>\n<li><strong>Se ejecuta <em>trampoline</em></strong><br>\n<img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-12-a-las-14.21.36.png\" alt=\"Captura-de-pantalla-2020-12-12-a-las-14.21.36\"></li>\n</ol>\n<p>En cuanto a ejecutar, me refiero a, entre en el call stack y se ejecuta directamente.<br>\nEsto es una función con currificación, si nos fijamos lo que le pasamos como parámetro a <em>trampoline</em> es la función que queremos ejecutar, es decir, <em>addTo</em>.</p>\n<ol start=\"2\">\n<li><strong>Se ejecuta <em>trampoline(addTo)(5)</em></strong><br>\n<img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-12-a-las-14.27.10.png\" alt=\"Captura-de-pantalla-2020-12-12-a-las-14.27.10\"></li>\n</ol>\n<p>Entra <strong>trampoline(addTo)(5)</strong> al call stack y comienza a ejecutarse, aquí como tenemos un bucle while donde se ejecutan otros métodos, veremos como el call stack crece</p>\n<ol start=\"3\">\n<li><strong>Se ejecuta por primera vez <em>addTo</em> con el valor 5</strong><br>\n<img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-12-a-las-14.29.38.png\" alt=\"Captura-de-pantalla-2020-12-12-a-las-14.29.38\"></li>\n</ol>\n<p>Como vemos estamos dentro de <em>trampoline(addTo)(5)</em> ejecutando <em>addTo(5, 0)</em><br>\nComo el valor no es cero retorna la función anónima que ejecutaria de nuevo <em>addTo</em><br>\n<img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-12-a-las-14.33.21.png\" alt=\"Captura-de-pantalla-2020-12-12-a-las-14.33.21\"></p>\n<ol start=\"4\">\n<li><strong>Se ejecuta la función anónima que a su vez ejecuta <em>addTo(4, 5)</em></strong><br>\n<img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-12-a-las-14.34.00.png\" alt=\"Captura-de-pantalla-2020-12-12-a-las-14.34.00\"></li>\n</ol>\n<p>Esto devuelve de nuevo una función anónima, pero como tal su ejecución termina por lo que <em>addTo</em> sale del call stack<br>\n<img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-12-a-las-14.35.45.png\" alt=\"Captura-de-pantalla-2020-12-12-a-las-14.35.45\"></p>\n<p>Y lo mismo sucede con la función anónima que su ejecución ha terminado y sale del call stack<br>\n<img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-12-a-las-14.36.02.png\" alt=\"Captura-de-pantalla-2020-12-12-a-las-14.36.02\"></p>\n<ol start=\"5\">\n<li><strong>Como el resultado de todo esto sigue siendo una función nuestro trampoline vuelve a ejecutar la función anónima que ha recibido</strong><br>\n<img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-12-a-las-14.38.09.png\" alt=\"Captura-de-pantalla-2020-12-12-a-las-14.38.09\"></li>\n</ol>\n<p>Donde a su vez se ejecuta <strong>addTo(3, 9)</strong><br>\n<img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-12-a-las-14.38.19.png\" alt=\"Captura-de-pantalla-2020-12-12-a-las-14.38.19\"></p>\n<ol start=\"6\">\n<li>\n<p><strong>Este proceso se repite hasta que el parámetro number === 0 donde termina la ejecución de la función anónima dentro de trampoline</strong><br>\n<img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-12-a-las-14.40.34.png\" alt=\"Captura-de-pantalla-2020-12-12-a-las-14.40.34\"></p>\n</li>\n<li>\n<p><strong>Se ejecuta el resultado de <em>console.log(trampoline(addTo)(5))</em> que nos muestra 15</strong><br>\n<img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-12-a-las-14.40.51.png\" alt=\"Captura-de-pantalla-2020-12-12-a-las-14.40.51\"></p>\n</li>\n<li>\n<p><strong>Se ejecuta <em>finish()</em></strong><br>\n<img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-12-a-las-14.41.04.png\" alt=\"Captura-de-pantalla-2020-12-12-a-las-14.41.04\"></p>\n</li>\n</ol>\n<p>Entra dentro del call stack</p>\n<ol start=\"9\">\n<li><strong>Ejecuta el console.log dentro de la función finish</strong><br>\n<img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-12-a-las-14.41.15.png\" alt=\"Captura-de-pantalla-2020-12-12-a-las-14.41.15\"></li>\n</ol>\n<p>Y la ejecución de nuestro programa o script termina</p>\n<p>Como vemos esto es un <em>truquillo</em> que hace que no saturemos el call stack de ejecuciones pendientes, que cubre la necesidad que tenemos aunque como digo no es algo que me convenza mucho.</p>\n<p>Esta es una de las formas que tenemos para evitar el <em>Maximum call stack</em>, en los siguientes post veremos otras posibles soluciones, algunas más sencillas otras más complejas, pero nos serviran para entender del todo como funciona el call stack.</p>\n<p>Nos vemos en el siguiente un abrazoooooo</p>\n<!--kg-card-end: markdown-->","url":"https://jlgarcia.fulldev.ninja/js-algoritmos-y-estructuras-de-datos-vi-la-recursividad-y-como-resolver-el-problema/","canonical_url":null,"uuid":"37ff4a5a-7e66-48c9-9a31-25cdc885dc1b","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"5fbc0b8ba6c0f5058bff47fa","reading_time":4,"send_email_when_published":false,"email_subject":null,"childHtmlRehype":{"html":"<!--kg-card-begin: markdown--><p>Ya vimos en el post anterior cual es el problema principal que podemos tener en JavaScript a la hora de usar la recursividad. En un primer momento lo más probable es que nunca nos encontremos con este problema a no ser que trabajemos con una gran cantidad de datos, pero aún así, creo que ver como se soluciona este problema puede hacernos entender algunas cosas del funcionamiento de Javascript y como podemos usarlas para cualquier otro problema que nos encontremos.</p>\n<p>Para resolver el problema de <em>\"Maximum call stack...\"</em> existen varias formas, veremos la mayoría aunque alguna puede que no me guste mucho.</p>\n<p>Vamos con la primera <strong>Trampoline</strong></p>\n<h3 id=\"trampoline\">Trampoline</h3>\n<p>Esta se fue extendiendo como una buena posibilidad para resolver el problema, pero personalmente a mí no me convence demasiado, creo que nos salimos un poco de la pureza del concepto de la recursividad pensando en su planteamiento más funcional. Veamos el código en cuestión:</p>\n<div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">const</span> <span class=\"token function-variable function\">trampoline</span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">fn</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">(</span><span class=\"token parameter\"><span class=\"token operator\">...</span>args</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">let</span> result <span class=\"token operator\">=</span> <span class=\"token function\">fn</span><span class=\"token punctuation\">(</span><span class=\"token operator\">...</span>args<span class=\"token punctuation\">)</span>\n  <span class=\"token keyword\">while</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">typeof</span> result <span class=\"token operator\">===</span> <span class=\"token string\">'function'</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    result <span class=\"token operator\">=</span> <span class=\"token function\">result</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">}</span>\n  <span class=\"token keyword\">return</span> result\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">function</span> <span class=\"token function\">addTo</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">number<span class=\"token punctuation\">,</span> accum <span class=\"token operator\">=</span> <span class=\"token number\">0</span></span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n\t<span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>number <span class=\"token operator\">===</span> <span class=\"token number\">0</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n\t\t<span class=\"token keyword\">return</span> accum\n\t<span class=\"token punctuation\">}</span>\n\t<span class=\"token keyword\">return</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token function\">addTo</span><span class=\"token punctuation\">(</span>number <span class=\"token operator\">-</span> <span class=\"token number\">1</span><span class=\"token punctuation\">,</span> number <span class=\"token operator\">+</span> accum<span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">function</span> <span class=\"token function\">finish</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'Finished'</span><span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span>\n\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token function\">trampoline</span><span class=\"token punctuation\">(</span>addTo<span class=\"token punctuation\">)</span><span class=\"token punctuation\">(</span><span class=\"token number\">5</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span>\n<span class=\"token function\">finish</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n</code></pre></div>\n<p>Más de uno se hará una idea de lo que realmente estamos haciendo en este caso y como cambia con respecto al ejemplo del post anterior sobre recursividad.<br>\nEn este ejemplo tenemos una función <strong>addTo</strong> que no se llama a si misma, si no que, según el caso llama a una función anónima que la vuelve a llamar. Pero claro no podemos llamar solo a la función <strong>addTo</strong> ya que en la primera ejecución simplemente devolvería una función que no se ejecuta y terminaría nuestro programa. Lo que hacemos es crear una función <strong>trampoline</strong> que encapsularía cualquier otra donde queramos usar la recursividad. Esta función lo que hace es controlar si la respuesta es una función que debemos que espera ejecutarse o no, en resumen, trampoline es una función que se encarga o de devolver un resultado si se ha cumplido nuestro <em>caso base</em> o de ejecutar de nuevo la función, veamos ahora lo que pasa en nuestro <em>call stack</em>.</p>\n<ol>\n<li><strong>Se ejecuta <em>trampoline</em></strong><br>\n<img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-12-a-las-14.21.36.png\" alt=\"Captura-de-pantalla-2020-12-12-a-las-14.21.36\"></li>\n</ol>\n<p>En cuanto a ejecutar, me refiero a, entre en el call stack y se ejecuta directamente.<br>\nEsto es una función con currificación, si nos fijamos lo que le pasamos como parámetro a <em>trampoline</em> es la función que queremos ejecutar, es decir, <em>addTo</em>.</p>\n<ol start=\"2\">\n<li><strong>Se ejecuta <em>trampoline(addTo)(5)</em></strong><br>\n<img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-12-a-las-14.27.10.png\" alt=\"Captura-de-pantalla-2020-12-12-a-las-14.27.10\"></li>\n</ol>\n<p>Entra <strong>trampoline(addTo)(5)</strong> al call stack y comienza a ejecutarse, aquí como tenemos un bucle while donde se ejecutan otros métodos, veremos como el call stack crece</p>\n<ol start=\"3\">\n<li><strong>Se ejecuta por primera vez <em>addTo</em> con el valor 5</strong><br>\n<img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-12-a-las-14.29.38.png\" alt=\"Captura-de-pantalla-2020-12-12-a-las-14.29.38\"></li>\n</ol>\n<p>Como vemos estamos dentro de <em>trampoline(addTo)(5)</em> ejecutando <em>addTo(5, 0)</em><br>\nComo el valor no es cero retorna la función anónima que ejecutaria de nuevo <em>addTo</em><br>\n<img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-12-a-las-14.33.21.png\" alt=\"Captura-de-pantalla-2020-12-12-a-las-14.33.21\"></p>\n<ol start=\"4\">\n<li><strong>Se ejecuta la función anónima que a su vez ejecuta <em>addTo(4, 5)</em></strong><br>\n<img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-12-a-las-14.34.00.png\" alt=\"Captura-de-pantalla-2020-12-12-a-las-14.34.00\"></li>\n</ol>\n<p>Esto devuelve de nuevo una función anónima, pero como tal su ejecución termina por lo que <em>addTo</em> sale del call stack<br>\n<img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-12-a-las-14.35.45.png\" alt=\"Captura-de-pantalla-2020-12-12-a-las-14.35.45\"></p>\n<p>Y lo mismo sucede con la función anónima que su ejecución ha terminado y sale del call stack<br>\n<img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-12-a-las-14.36.02.png\" alt=\"Captura-de-pantalla-2020-12-12-a-las-14.36.02\"></p>\n<ol start=\"5\">\n<li><strong>Como el resultado de todo esto sigue siendo una función nuestro trampoline vuelve a ejecutar la función anónima que ha recibido</strong><br>\n<img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-12-a-las-14.38.09.png\" alt=\"Captura-de-pantalla-2020-12-12-a-las-14.38.09\"></li>\n</ol>\n<p>Donde a su vez se ejecuta <strong>addTo(3, 9)</strong><br>\n<img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-12-a-las-14.38.19.png\" alt=\"Captura-de-pantalla-2020-12-12-a-las-14.38.19\"></p>\n<ol start=\"6\">\n<li>\n<p><strong>Este proceso se repite hasta que el parámetro number === 0 donde termina la ejecución de la función anónima dentro de trampoline</strong><br>\n<img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-12-a-las-14.40.34.png\" alt=\"Captura-de-pantalla-2020-12-12-a-las-14.40.34\"></p>\n</li>\n<li>\n<p><strong>Se ejecuta el resultado de <em>console.log(trampoline(addTo)(5))</em> que nos muestra 15</strong><br>\n<img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-12-a-las-14.40.51.png\" alt=\"Captura-de-pantalla-2020-12-12-a-las-14.40.51\"></p>\n</li>\n<li>\n<p><strong>Se ejecuta <em>finish()</em></strong><br>\n<img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-12-a-las-14.41.04.png\" alt=\"Captura-de-pantalla-2020-12-12-a-las-14.41.04\"></p>\n</li>\n</ol>\n<p>Entra dentro del call stack</p>\n<ol start=\"9\">\n<li><strong>Ejecuta el console.log dentro de la función finish</strong><br>\n<img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-12-a-las-14.41.15.png\" alt=\"Captura-de-pantalla-2020-12-12-a-las-14.41.15\"></li>\n</ol>\n<p>Y la ejecución de nuestro programa o script termina</p>\n<p>Como vemos esto es un <em>truquillo</em> que hace que no saturemos el call stack de ejecuciones pendientes, que cubre la necesidad que tenemos aunque como digo no es algo que me convenza mucho.</p>\n<p>Esta es una de las formas que tenemos para evitar el <em>Maximum call stack</em>, en los siguientes post veremos otras posibles soluciones, algunas más sencillas otras más complejas, pero nos serviran para entender del todo como funciona el call stack.</p>\n<p>Nos vemos en el siguiente un abrazoooooo</p>\n<!--kg-card-end: markdown-->","htmlAst":{"type":"root","children":[{"type":"comment","value":"kg-card-begin: markdown"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Ya vimos en el post anterior cual es el problema principal que podemos tener en JavaScript a la hora de usar la recursividad. En un primer momento lo más probable es que nunca nos encontremos con este problema a no ser que trabajemos con una gran cantidad de datos, pero aún así, creo que ver como se soluciona este problema puede hacernos entender algunas cosas del funcionamiento de Javascript y como podemos usarlas para cualquier otro problema que nos encontremos."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Para resolver el problema de "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"\"Maximum call stack...\""}]},{"type":"text","value":" existen varias formas, veremos la mayoría aunque alguna puede que no me guste mucho."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Vamos con la primera "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Trampoline"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"trampoline"},"children":[{"type":"text","value":"Trampoline"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Esta se fue extendiendo como una buena posibilidad para resolver el problema, pero personalmente a mí no me convence demasiado, creo que nos salimos un poco de la pureza del concepto de la recursividad pensando en su planteamiento más funcional. Veamos el código en cuestión:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"javascript"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-javascript"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-javascript"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function-variable","function"]},"children":[{"type":"text","value":"trampoline"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","parameter"]},"children":[{"type":"text","value":"fn"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","parameter"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"..."}]},{"type":"text","value":"args"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"let"}]},{"type":"text","value":" result "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"fn"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"..."}]},{"type":"text","value":"args"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"while"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"typeof"}]},{"type":"text","value":" result "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"==="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'function'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    result "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"result"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" result\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"addTo"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","parameter"]},"children":[{"type":"text","value":"number"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" accum "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"0"}]}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n\t"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"if"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"number "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"==="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"0"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n\t\t"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" accum\n\t"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\t"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"=>"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"addTo"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"number "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"1"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" number "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" accum"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"finish"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n  console"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"log"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'Finished'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\nconsole"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"log"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"trampoline"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"addTo"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"5"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"finish"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Más de uno se hará una idea de lo que realmente estamos haciendo en este caso y como cambia con respecto al ejemplo del post anterior sobre recursividad."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nEn este ejemplo tenemos una función "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"addTo"}]},{"type":"text","value":" que no se llama a si misma, si no que, según el caso llama a una función anónima que la vuelve a llamar. Pero claro no podemos llamar solo a la función "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"addTo"}]},{"type":"text","value":" ya que en la primera ejecución simplemente devolvería una función que no se ejecuta y terminaría nuestro programa. Lo que hacemos es crear una función "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"trampoline"}]},{"type":"text","value":" que encapsularía cualquier otra donde queramos usar la recursividad. Esta función lo que hace es controlar si la respuesta es una función que debemos que espera ejecutarse o no, en resumen, trampoline es una función que se encarga o de devolver un resultado si se ha cumplido nuestro "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"caso base"}]},{"type":"text","value":" o de ejecutar de nuevo la función, veamos ahora lo que pasa en nuestro "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"call stack"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Se ejecuta "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"trampoline"}]}]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-12-a-las-14.21.36.png","alt":"Captura-de-pantalla-2020-12-12-a-las-14.21.36"},"children":[]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"En cuanto a ejecutar, me refiero a, entre en el call stack y se ejecuta directamente."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nEsto es una función con currificación, si nos fijamos lo que le pasamos como parámetro a "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"trampoline"}]},{"type":"text","value":" es la función que queremos ejecutar, es decir, "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"addTo"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ol","properties":{"start":2},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Se ejecuta "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"trampoline(addTo)(5)"}]}]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-12-a-las-14.27.10.png","alt":"Captura-de-pantalla-2020-12-12-a-las-14.27.10"},"children":[]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Entra "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"trampoline(addTo)(5)"}]},{"type":"text","value":" al call stack y comienza a ejecutarse, aquí como tenemos un bucle while donde se ejecutan otros métodos, veremos como el call stack crece"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ol","properties":{"start":3},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Se ejecuta por primera vez "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"addTo"}]},{"type":"text","value":" con el valor 5"}]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-12-a-las-14.29.38.png","alt":"Captura-de-pantalla-2020-12-12-a-las-14.29.38"},"children":[]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Como vemos estamos dentro de "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"trampoline(addTo)(5)"}]},{"type":"text","value":" ejecutando "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"addTo(5, 0)"}]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nComo el valor no es cero retorna la función anónima que ejecutaria de nuevo "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"addTo"}]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-12-a-las-14.33.21.png","alt":"Captura-de-pantalla-2020-12-12-a-las-14.33.21"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ol","properties":{"start":4},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Se ejecuta la función anónima que a su vez ejecuta "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"addTo(4, 5)"}]}]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-12-a-las-14.34.00.png","alt":"Captura-de-pantalla-2020-12-12-a-las-14.34.00"},"children":[]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Esto devuelve de nuevo una función anónima, pero como tal su ejecución termina por lo que "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"addTo"}]},{"type":"text","value":" sale del call stack"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-12-a-las-14.35.45.png","alt":"Captura-de-pantalla-2020-12-12-a-las-14.35.45"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Y lo mismo sucede con la función anónima que su ejecución ha terminado y sale del call stack"},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-12-a-las-14.36.02.png","alt":"Captura-de-pantalla-2020-12-12-a-las-14.36.02"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ol","properties":{"start":5},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Como el resultado de todo esto sigue siendo una función nuestro trampoline vuelve a ejecutar la función anónima que ha recibido"}]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-12-a-las-14.38.09.png","alt":"Captura-de-pantalla-2020-12-12-a-las-14.38.09"},"children":[]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Donde a su vez se ejecuta "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"addTo(3, 9)"}]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-12-a-las-14.38.19.png","alt":"Captura-de-pantalla-2020-12-12-a-las-14.38.19"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ol","properties":{"start":6},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Este proceso se repite hasta que el parámetro number === 0 donde termina la ejecución de la función anónima dentro de trampoline"}]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-12-a-las-14.40.34.png","alt":"Captura-de-pantalla-2020-12-12-a-las-14.40.34"},"children":[]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Se ejecuta el resultado de "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"console.log(trampoline(addTo)(5))"}]},{"type":"text","value":" que nos muestra 15"}]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-12-a-las-14.40.51.png","alt":"Captura-de-pantalla-2020-12-12-a-las-14.40.51"},"children":[]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Se ejecuta "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"finish()"}]}]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-12-a-las-14.41.04.png","alt":"Captura-de-pantalla-2020-12-12-a-las-14.41.04"},"children":[]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Entra dentro del call stack"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ol","properties":{"start":9},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Ejecuta el console.log dentro de la función finish"}]},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\n"},{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2020/12/Captura-de-pantalla-2020-12-12-a-las-14.41.15.png","alt":"Captura-de-pantalla-2020-12-12-a-las-14.41.15"},"children":[]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Y la ejecución de nuestro programa o script termina"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Como vemos esto es un "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"truquillo"}]},{"type":"text","value":" que hace que no saturemos el call stack de ejecuciones pendientes, que cubre la necesidad que tenemos aunque como digo no es algo que me convenza mucho."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Esta es una de las formas que tenemos para evitar el "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Maximum call stack"}]},{"type":"text","value":", en los siguientes post veremos otras posibles soluciones, algunas más sencillas otras más complejas, pero nos serviran para entender del todo como funciona el call stack."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Nos vemos en el siguiente un abrazoooooo"}]},{"type":"text","value":"\n"},{"type":"comment","value":"kg-card-end: markdown"}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"trampoline","heading":"Trampoline"}]},"featureImageSharp":{"base":"unordered-3192273_640.png","publicURL":"/static/e92df4805fb46ec1f6bec181d2305365/unordered-3192273_640.png","imageMeta":{"width":640,"height":512},"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFG0lEQVQ4ywEQBe/6APG/tx3SpZ5Y2+PkQNzf3UjCw89E2M6jZubUibvJxK5Yk5/RHmd0qxNMWpUXsLO/LLe5xT+corsvv7++MmxsaxaZmYUXj4+WHsrKyjrNzc1HANSJfnXTZVT/1X5wp7K+vUSttMg40cSUb+zYh97by4ie0smidOHVpIbbzpWb7Nybsuvbmrbd0ZKAnp/khImK5tyWltuK4uHGPOXl6E3NyMdIAJFqZDnPkIiCwW5inMx1abl/j3YbtLb/AOjCOwXl1IRn2MmFntzNk5Tw46uQ493CYMS+olvt2X+avrSnpo6R6KCEhNulmZrkhs3SsikAABILAMfLzkae0MIY/6TMANl3X5vGi5ajeYjzhYiH66WJi+eaq7TzQuTZqG3v3I+008OFfpKk8ie0pm0n792VubCzwjPOzcE9hofluLOt43/Ue2F8ANfWxzZsXLEeh5X/UKZvjFq/eo3ml6HgedPLukaUk+KxjIvdlPnhcoXu2pwW6tWCl8/Iq1Lp15Cv5NacgElUgxje2r4yvcLqYZeH0tfZdGPhALu70USCg+mpgobwgoyG49zFeobjqqbhhYCO6YmDh+SynZ3VX+bUg4Dq1oeN7NiHxOjXj8jk0XNXfoaCFL29wE7Lx8dK0eznLZB8yaHSgH3MAJuc5qKGhuCF3tmJGo2S6rLIdnrJpYq+sLCIr8LKrbdquMG3RJuZo0vHu4eC6NeQy9HPwUuJjNporKzXYbuzoTe1uLtHuLe0P9BrY8C/fYF/AI+Q58Kur9NhvLfDQ3+K8pXFeW9m3nJZ2d1mRoLUb1ydv8HBKcPc+Cu1qoeG8+med5KY8HOYl+bKjo3nvwBn/w6J0MgV1nhjuayBsuFPctxCAIqK7qybm8txAAAAAXyG8Im3kraj2nBY0M9vZazlcWFlAAAADkseE59cLiD4TiMHc3570auip+BMkJnslKZ3q5PXYkie0GhZ4bR9ntm4na5oAIeJ4GGOj+7S1dDJTqe951G3e5nrx2pZTs2/pT+ZjH9IUSohtkYkGP9XJBf/WCIR/1gwNfV2ds+lv3SH1M97csHfiWiGynJ1za10ncfifGW3AOvajLKkn8qdgYLtx7LA8WbegnGkmn2+vJKn/39iRVHMXjcn/z87N/l/ZFP7OSol/0MsHrvEbG2usHef4ouY+aGJnvF1rn+ozdF3ccLMeGqWAOzZjN7444OryLyvuH2K+8C8iZ/U1IJ2oG+u/zB5ZHl8iHBd/6eWifvKqI3/npGF/ZR5bf/EbW3an7DGK6Sl5YuLiuf/jZb2obahhjO1vMJGAPLflS795oUW9+N/ld/QjMXYyJr43I1t9MdNJzUAOAADpodx58Gfh/+2pJbpw6GH+qSGc9rPblisqpfDcKWj1N7m2KHVo57Myri4vFCtpqwTAP///wA4Qu8NgYTuetbLs6rk1pb/ybOjt9VvZ6nCe3R8vZ6Dvph6YsCjhXPzi3FcsbWUgL/SalawjoTgrpufzW7YypGa3c+i5uvbk3jw34+GANDPuTesrNtxi4zo4oqN87bDubTD5NiUt9zOonzEh23DnoF+8JF8gsfRpHz/jndr07mIdvXMfGaGn6TvrJiW2L23sMDh18qbg8urAAXq2pGqANDQ0EM2NjUTeHidH5qZlSEABVkJ/+eDL9fJh43Hpn/zn4ym/6Ca0f+tnbD+nYaO/7eXhvmxroxy7N6gf8u/p57XzJ513+DcQ7e3uzE9PDMO7sYRFrnPY/gAAAAASUVORK5CYII=","aspectRatio":1.25,"src":"/static/e92df4805fb46ec1f6bec181d2305365/8bef3/unordered-3192273_640.png","srcSet":"/static/e92df4805fb46ec1f6bec181d2305365/847ef/unordered-3192273_640.png 175w,\n/static/e92df4805fb46ec1f6bec181d2305365/91cba/unordered-3192273_640.png 350w,\n/static/e92df4805fb46ec1f6bec181d2305365/8bef3/unordered-3192273_640.png 640w","srcWebp":"/static/e92df4805fb46ec1f6bec181d2305365/1ea2e/unordered-3192273_640.webp","srcSetWebp":"/static/e92df4805fb46ec1f6bec181d2305365/9fca7/unordered-3192273_640.webp 175w,\n/static/e92df4805fb46ec1f6bec181d2305365/37a4e/unordered-3192273_640.webp 350w,\n/static/e92df4805fb46ec1f6bec181d2305365/1ea2e/unordered-3192273_640.webp 640w","sizes":"(max-width: 640px) 100vw, 640px"}}}}},{"node":{"id":"Ghost__Post__5c18a5012dd6610fd828cacd","title":"JS Algoritmos y  Estructuras de datos V: La recursividad y su pequeño problema en Javascript","slug":"js-algorithm-and-data-structures-recursion","featured":false,"feature_image":"https://jlgarcia.fulldev.ninja/assets/images/2020/11/unordered-3192273_640-2.png","excerpt":"Hablemos ahora de la Recursividad. A la gran mayoría por lo menos nos tiene que\nsonar ¿no?... por lo menos nos habrán dicho que es muy chula, que mola usarla,\nque porque no lo pruebas... pues bien he de coincidir con casi cualquier cosa\nbuena que se diga sobre este concepto, aunque claro lo suyo es usarlo cuando\ntoque y tenga sentido (pero eso es otra historia).\n\nPor ahora veremos que es esto de la recursividad, para que nos sirve y cual es\nel problema que nos generará a la larga (y como resolve","custom_excerpt":null,"visibility":"public","created_at_pretty":"18 Dec 2018","published_at_pretty":"7 Dec 2020","updated_at_pretty":"19 Jan 2021","created_at":"2018-12-18T08:42:57.000+01:00","published_at":"2020-12-07T10:33:00.000+01:00","updated_at":"2021-01-19T21:10:34.000+01:00","meta_title":null,"meta_description":null,"og_description":null,"og_image":null,"og_title":null,"twitter_description":null,"twitter_image":null,"twitter_title":null,"authors":[{"slug":"jlgarcia","url":"https://jlgarcia.fulldev.ninja/author/jlgarcia/","name":"Juan Luis Garcia Aparicio","bio":null,"cover_image":null,"profile_image":"https://jlgarcia.fulldev.ninja/assets/images/2017/12/Perfil.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":null}],"primary_author":{"slug":"jlgarcia","url":"https://jlgarcia.fulldev.ninja/author/jlgarcia/","name":"Juan Luis Garcia Aparicio","bio":null,"cover_image":null,"profile_image":"https://jlgarcia.fulldev.ninja/assets/images/2017/12/Perfil.jpg","location":null,"website":null,"twitter":null,"facebook":null,"meta_title":null,"meta_description":null,"coverImageSharp":null,"profileImageSharp":{"base":"Perfil.jpg","publicURL":"/static/b0de6281fb28a266510b3b09b9243e5a/Perfil.jpg","imageMeta":{"width":307,"height":307},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAUABQDASIAAhEBAxEB/8QAGAABAQEBAQAAAAAAAAAAAAAAAAUDBAb/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIQAxAAAAGzw6zC6zHn+cLYP//EAB0QAAICAQUAAAAAAAAAAAAAAAEDAAIEEyEiIzL/2gAIAQEAAQUCifca8KgcKWVfUpkHsG5pxX//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAEDAQE/AR//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAECAQE/AR//xAAdEAACAgEFAAAAAAAAAAAAAAAAARARcQISIUFR/9oACAEBAAY/AhU88xkb7N06a8P/xAAcEAEAAwEAAwEAAAAAAAAAAAABABEhMUFRYXH/2gAIAQEAAT8hR2pq40aqb+xIAeXibhW9JXr8joF4TBcSNe0//9oADAMBAAIAAwAAABDzDwD/xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAEDAQE/EB//xAAUEQEAAAAAAAAAAAAAAAAAAAAg/9oACAECAQE/EB//xAAcEAEAAgIDAQAAAAAAAAAAAAABABEhUTFhcfD/2gAIAQEAAT8QyItrELaTlatLwU63MvEW6vUNdy4LZQDn7iVApV9VLtANdWwKkuYq4Er1VZ//2Q==","aspectRatio":1,"src":"/static/b0de6281fb28a266510b3b09b9243e5a/31709/Perfil.jpg","srcSet":"/static/b0de6281fb28a266510b3b09b9243e5a/f340b/Perfil.jpg 28w,\n/static/b0de6281fb28a266510b3b09b9243e5a/22d64/Perfil.jpg 55w,\n/static/b0de6281fb28a266510b3b09b9243e5a/31709/Perfil.jpg 110w,\n/static/b0de6281fb28a266510b3b09b9243e5a/aa249/Perfil.jpg 165w,\n/static/b0de6281fb28a266510b3b09b9243e5a/0dc33/Perfil.jpg 220w,\n/static/b0de6281fb28a266510b3b09b9243e5a/60667/Perfil.jpg 307w","srcWebp":"/static/b0de6281fb28a266510b3b09b9243e5a/8678c/Perfil.webp","srcSetWebp":"/static/b0de6281fb28a266510b3b09b9243e5a/59cda/Perfil.webp 28w,\n/static/b0de6281fb28a266510b3b09b9243e5a/7da75/Perfil.webp 55w,\n/static/b0de6281fb28a266510b3b09b9243e5a/8678c/Perfil.webp 110w,\n/static/b0de6281fb28a266510b3b09b9243e5a/f282e/Perfil.webp 165w,\n/static/b0de6281fb28a266510b3b09b9243e5a/a7b21/Perfil.webp 220w,\n/static/b0de6281fb28a266510b3b09b9243e5a/f59af/Perfil.webp 307w","sizes":"(max-width: 110px) 100vw, 110px"}}}},"primary_tag":{"slug":"algoritmos","url":"https://jlgarcia.fulldev.ninja/tag/algoritmos/","name":"algoritmos","visibility":"public","feature_image":null,"description":null,"meta_title":null,"meta_description":null,"featureImageSharp":null},"tags":[{"slug":"algoritmos","url":"https://jlgarcia.fulldev.ninja/tag/algoritmos/","name":"algoritmos","visibility":"public","feature_image":null,"description":null,"meta_title":null,"meta_description":null,"featureImageSharp":null},{"slug":"javascript","url":"https://jlgarcia.fulldev.ninja/tag/javascript/","name":"javascript","visibility":"public","feature_image":null,"description":null,"meta_title":null,"meta_description":null,"featureImageSharp":null}],"plaintext":"Hablemos ahora de la Recursividad. A la gran mayoría por lo menos nos tiene que\nsonar ¿no?... por lo menos nos habrán dicho que es muy chula, que mola usarla,\nque porque no lo pruebas... pues bien he de coincidir con casi cualquier cosa\nbuena que se diga sobre este concepto, aunque claro lo suyo es usarlo cuando\ntoque y tenga sentido (pero eso es otra historia).\n\nPor ahora veremos que es esto de la recursividad, para que nos sirve y cual es\nel problema que nos generará a la larga (y como resolverlo) esto en nuestro\nquerido Javascript.\n\nRecursividad\nNo me voy a extender en explicaciones técnicas en este caso (profundizaré más en\nel post de la línea de javascript funcional), por lo que, en palabras simples,\nes la capacidad de una función de llamarse a si misma. Esto es más un concepto\nde programación funcional, pero debido a que las funciones en javascript se\npueden tratar como cualquier otro objeto (ciudadano de primera clase), es decir,\nque se puede pasar por parámetro, retornar dentro de otra función.... y todo lo\nque se nos ocurra, podemos hacer uso de la recursión también.\n\nAlgunos ejemplos de su uso podrian ser: Recorrer un sistema de ficheros (abrir\nprimera carpeta, recorrer lo que hay dentro y si encuentra una carpeta la abre y\nrecorre...y asi sucesivamente), se suele ver en la típica resolución de\nproblemas sobre los números de Fibonacci (que es y ejemplos aquí\n[https://medium.com/developers-writing/fibonacci-sequence-algorithm-in-javascript-b253dc7e320e]\n) o en general cualquier problema que requiera repetir lógica sobre un mismo\nelemento (y no necesitemos o no tenga sentido funcional que usemos un bucle de\nlos habituales)\n\nVeamos cuales son los detalles de una función recursiva. Ya hemos comentado que\nen la teoría se supone que es una función que se llama a si misma, como por\nejemplo\n\nfunction addTo (number) {\n\treturn number + addTo(number - 1)\n}\n\naddTo(10)\n\n\nLa teoría de la función sería que queremos sumar los números desde 0 hasta el\nnúmero dado. Visualmente tiene sentido, ¿no?, sumamos el número que recibimos\nprimero que sería el 10 y luego llamamos a la misma función para que use el 9 y\nasí sucesivamente. Pero claro si nos fijamos bien aquí tenemos un problema, si\nejecutaramos esto tendriamos un bucle infinito porque en ningún momento le\nindicamos cuando tiene que parar. Lo que le falta a esta función es lo que se\nconoce como caso base.\n\nEl caso base es la unidad mínima que debe devolver una función recursiva, si\npensamos en lo que queríamos hacer que era sumar del 0 al 10, en este caso nos\nfalta indicarle que cuando llegue a 0 nos devuelva el número, este sería nuestro\ncaso base, siempre debe tener un caso base.\n\nfunction addTo(number) {\n\tif (number === 0) {\n\t\treturn number\n\t}\n\treturn number + addTo(number - 1)\n}\n\naddTo(10)\n\n\nSi ahora ejecutamos esto todo iria bien y nos debería devolver 55. Esto es un\ncaso muy sencillo para explicar que es la recursión pero veamos rápidamente que\nes lo que lo pasa por debajo.\n\nPara ello lo primero es repasar que es el call stack. El call stack o pila de\nllamadas (lo defino a mi rollo por simplicicad) son las funciones que se tienen\nque ejecutar (con estructura LIFO) dentro de un Task del event loop. En el\npróximo post profundizaremos más en que es cada cosa y el flujo que sigue el\neventloop, con lo que nos tenemos que quedar ahora mismo es que el call stack es\nel trabajo que tiene pendiente javascript para poder pasar a la siguiente tarea\n(es decir que nuestro thread esta bloqueado hasta que termine).\n\nPara verlo bien vamos a usar una herramienta que me he encontrado (grandisima\nayuda para entender esto visualmente ya lo veremos, agradecer a los creadores)\nque es jsv9000 [https://www.jsv9000.app/]. Esta herramienta nos permite\ncomprobar visualmente lo que pasa dentro de nuestro eventloop en cada una de sus\nQueues.\n\nLo que haremos será añadir el código siguiente y darle a run:\n\nfunction addTo(number) {\n\tif (number === 0) {\n\t\treturn number\n\t}\n\treturn number + addTo(number - 1)\n}\n\nfunction finish () {\n  console.log('Finished')\n}\n\naddTo(5)\nfinish()\n\n\nLo que hace la herramienta es indicarnos en que puesto está nuestro código y que\nha ido pasando por dentro paso a paso, por lo que tenemos que ir dandole a step.\nSi le damos 6 veces (como le hemos indicado que hasta 5 y empezamos en el 0)\nvemos como el código lo único que ha hecho es incluir 6 llamadas en el call\nstack de la función de suma en la fase de evaluación\n\n\n\nSi le continuamos dando a step vemos como se va vaciando el call stack de la\nfunción y lo siguiente es el método finish que nos muestra el resultado del \nconsole.log. En este caso lo que vemos es que nuestra función recursiva va\nacumulando llamadas en el call stack hasta que llega al caso base y empieza a\ndevolver datos y a vaciar. Si lo queremos ver más claro añadimos unos logs\n\nfunction addTo(number) {\n\tif (number === 0) {\n\t  console.log(0)\n\t\treturn number\n\t}\n\tconst result = number + addTo(number - 1)\n\tconsole.log('result: ', result)\n\treturn result\n}\n\nfunction finish () {\n  console.log('Finished')\n}\n\naddTo(5)\nfinish()\n\n\nY podemos ver en acción realmente donde estamos\n\n\n\nUna vez entendido esto, ahora os planteo el gran problema que resolveremos en\npróximos posts. Cambiemos el código por lo siguiente pero no recomiendo\nejecutarlo en la herramienta que tardaría muchisimo, ejecutarlo en la consola\ndel navegador, en un fichero de node o donde más os guste\n\nfunction addTo(number) {\n\tif (number === 0) {\n\t\treturn number\n\t}\n\treturn number + addTo(number - 1)\n}\n\nconsole.log(addTo(100000))\n\n\nFijaos el número que he puesto 100000, esto nos debe dar un error como el\nsiguiente:\n\n\n\nEs decir hemos llegado al límite de acciones posibles dentro de la pila de\nllamadas, si nos planteamos lo que ocurria con 5, que teniamos 6 inclusiones el\ncall stack, ahora tendríamos 100001 (se que este número es muy grande pero\ndepende de lo que estemos haciendo o donde puede ser mucho menos, realmente\ninsisto en que es un error muy habitual). Este problema viene dado porque\njavascript no es un lenguaje orientado a este tipo de funciones, pero siempre\npodemos encontrarle solución, en los próximos post veremos como podemos\nsolucionar esto de muchas maneras, mientras tando plantear vosotros posibles\nsoluciones. Nos vemos en el siguiente un abrazoooooor","html":"<!--kg-card-begin: markdown--><p>Hablemos ahora de la <strong>Recursividad</strong>. A la gran mayoría por lo menos nos tiene que sonar ¿no?... por lo menos nos habrán dicho que es muy chula, que mola usarla, que porque no lo pruebas... pues bien he de coincidir con casi cualquier cosa buena que se diga sobre este concepto, aunque claro lo suyo es usarlo cuando toque y tenga sentido (pero eso es otra historia).</p>\n<p>Por ahora veremos que es esto de la recursividad, para que nos sirve y cual es el problema que nos generará a la larga (y como resolverlo) esto en nuestro querido <em>Javascript</em>.</p>\n<h3 id=\"recursividad\">Recursividad</h3>\n<p>No me voy a extender en explicaciones técnicas en este caso (profundizaré más en el post de la línea de javascript funcional), por lo que, en palabras simples, es la capacidad de una función de llamarse a si misma. Esto es más un concepto de programación funcional, pero debido a que las funciones en javascript se pueden tratar como cualquier otro objeto (ciudadano de primera clase), es decir, que se puede pasar por parámetro, retornar dentro de otra función.... y todo lo que se nos ocurra, podemos hacer uso de la recursión también.</p>\n<p>Algunos ejemplos de su uso podrian ser: Recorrer un sistema de ficheros (abrir primera carpeta, recorrer lo que hay dentro y si encuentra una carpeta la abre y recorre...y asi sucesivamente), se suele ver en la típica resolución de problemas sobre los números de <em>Fibonacci</em> (que es y ejemplos <a href=\"https://medium.com/developers-writing/fibonacci-sequence-algorithm-in-javascript-b253dc7e320e\">aquí</a>) o en general cualquier problema que requiera repetir lógica sobre un mismo elemento (y no necesitemos o no tenga sentido funcional que usemos un bucle de los habituales)</p>\n<p>Veamos cuales son los detalles de una función recursiva. Ya hemos comentado que en la teoría se supone que es una función que se llama a si misma, como por ejemplo</p>\n<pre><code class=\"language-javascript\">function addTo (number) {\n\treturn number + addTo(number - 1)\n}\n\naddTo(10)\n</code></pre>\n<p>La teoría de la función sería que queremos sumar los números desde 0 hasta el número dado. Visualmente tiene sentido, ¿no?, sumamos el número que recibimos primero que sería el 10 y luego llamamos a la misma función para que use el 9 y así sucesivamente. Pero claro si nos fijamos bien aquí tenemos un problema, si ejecutaramos esto tendriamos un <strong>bucle infinito</strong> porque en ningún momento le indicamos cuando tiene que parar. Lo que le falta a esta función es lo que se conoce como <strong>caso base</strong>.</p>\n<p>El <strong>caso base</strong> es la unidad mínima que debe devolver una función recursiva, si pensamos en lo que queríamos hacer que era sumar del 0 al 10, en este caso nos falta indicarle que cuando llegue a 0 nos devuelva el número, este sería nuestro caso base, <strong>siempre debe tener un caso base</strong>.</p>\n<pre><code class=\"language-javascript\">function addTo(number) {\n\tif (number === 0) {\n\t\treturn number\n\t}\n\treturn number + addTo(number - 1)\n}\n\naddTo(10)\n</code></pre>\n<p>Si ahora ejecutamos esto todo iria bien y nos debería devolver 55. Esto es un caso muy sencillo para explicar que es la recursión pero veamos rápidamente que es lo que lo pasa por debajo.</p>\n<p>Para ello lo primero es repasar que es el <strong>call stack</strong>. El <em>call stack</em> o <em>pila de llamadas</em> (lo defino a mi rollo por simplicicad) son las funciones que se tienen que ejecutar (con estructura <em>LIFO</em>) dentro de un <em>Task</em> del event loop. En el próximo post profundizaremos más en que es cada cosa y el flujo que sigue el eventloop, con lo que nos tenemos que quedar ahora mismo es que el <em>call stack</em> es el trabajo que tiene pendiente javascript para poder pasar a la siguiente tarea (es decir que nuestro thread esta bloqueado hasta que termine).</p>\n<p>Para verlo bien vamos a usar una herramienta que me he encontrado (grandisima ayuda para entender esto visualmente ya lo veremos, agradecer a los creadores) que es <a href=\"https://www.jsv9000.app/\">jsv9000</a>. Esta herramienta nos permite comprobar visualmente lo que pasa dentro de nuestro eventloop en cada una de sus Queues.</p>\n<p>Lo que haremos será añadir el código siguiente y darle a <strong>run</strong>:</p>\n<pre><code class=\"language-javascript\">function addTo(number) {\n\tif (number === 0) {\n\t\treturn number\n\t}\n\treturn number + addTo(number - 1)\n}\n\nfunction finish () {\n  console.log('Finished')\n}\n\naddTo(5)\nfinish()\n</code></pre>\n<p>Lo que hace la herramienta es indicarnos en que puesto está nuestro código y que ha ido pasando por dentro paso a paso, por lo que tenemos que ir dandole a <strong>step</strong>. Si le damos 6 veces (como le hemos indicado que hasta 5 y empezamos en el 0) vemos como el código lo único que ha hecho es incluir 6 llamadas en el call stack de la función de suma en la fase de <em>evaluación</em></p>\n<p><img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/11/Captura-de-pantalla-2020-11-21-a-las-14.05.32.png\" alt=\"Captura-de-pantalla-2020-11-21-a-las-14.05.32\"></p>\n<p>Si le continuamos dando a <strong>step</strong> vemos como se va vaciando el call stack de la función y lo siguiente es el método <em>finish</em> que nos muestra el resultado del <em>console.log</em>. En este caso lo que vemos es que nuestra función recursiva va acumulando llamadas en el call stack hasta que llega al caso base y empieza a devolver datos y a vaciar. Si lo queremos ver más claro añadimos unos logs</p>\n<pre><code class=\"language-javascript\">function addTo(number) {\n\tif (number === 0) {\n\t  console.log(0)\n\t\treturn number\n\t}\n\tconst result = number + addTo(number - 1)\n\tconsole.log('result: ', result)\n\treturn result\n}\n\nfunction finish () {\n  console.log('Finished')\n}\n\naddTo(5)\nfinish()\n</code></pre>\n<p>Y podemos ver en acción realmente donde estamos</p>\n<p><img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/11/Captura-de-pantalla-2020-11-21-a-las-14.19.09.png\" alt=\"Captura-de-pantalla-2020-11-21-a-las-14.19.09\"></p>\n<p>Una vez entendido esto, ahora os planteo el gran problema que resolveremos en próximos posts. Cambiemos el código por lo siguiente pero no recomiendo ejecutarlo en la herramienta que tardaría muchisimo, ejecutarlo en la consola del navegador, en un fichero de node o donde más os guste</p>\n<pre><code class=\"language-javascript\">function addTo(number) {\n\tif (number === 0) {\n\t\treturn number\n\t}\n\treturn number + addTo(number - 1)\n}\n\nconsole.log(addTo(100000))\n</code></pre>\n<p>Fijaos el número que he puesto <strong>100000</strong>, esto nos debe dar un error como el siguiente:</p>\n<p><img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/11/Captura-de-pantalla-2020-11-21-a-las-14.23.21.png\" alt=\"Captura-de-pantalla-2020-11-21-a-las-14.23.21\"></p>\n<p>Es decir hemos llegado al límite de acciones posibles dentro de la pila de llamadas, si nos planteamos lo que ocurria con 5, que teniamos 6 inclusiones el call stack, ahora tendríamos 100001 (se que este número es muy grande pero depende de lo que estemos haciendo o donde puede ser mucho menos, realmente insisto en que es un error muy habitual). Este problema viene dado porque javascript no es un lenguaje orientado a este tipo de funciones, pero siempre podemos encontrarle solución, en los próximos post veremos como podemos solucionar esto de muchas maneras, mientras tando plantear vosotros posibles soluciones. Nos vemos en el siguiente un abrazoooooor</p>\n<!--kg-card-end: markdown-->","url":"https://jlgarcia.fulldev.ninja/js-algorithm-and-data-structures-recursion/","canonical_url":null,"uuid":"335a1d74-2ed5-419b-a074-834acf15eee0","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"5c18a5012dd6610fd828cacd","reading_time":5,"send_email_when_published":false,"email_subject":null,"childHtmlRehype":{"html":"<!--kg-card-begin: markdown--><p>Hablemos ahora de la <strong>Recursividad</strong>. A la gran mayoría por lo menos nos tiene que sonar ¿no?... por lo menos nos habrán dicho que es muy chula, que mola usarla, que porque no lo pruebas... pues bien he de coincidir con casi cualquier cosa buena que se diga sobre este concepto, aunque claro lo suyo es usarlo cuando toque y tenga sentido (pero eso es otra historia).</p>\n<p>Por ahora veremos que es esto de la recursividad, para que nos sirve y cual es el problema que nos generará a la larga (y como resolverlo) esto en nuestro querido <em>Javascript</em>.</p>\n<h3 id=\"recursividad\">Recursividad</h3>\n<p>No me voy a extender en explicaciones técnicas en este caso (profundizaré más en el post de la línea de javascript funcional), por lo que, en palabras simples, es la capacidad de una función de llamarse a si misma. Esto es más un concepto de programación funcional, pero debido a que las funciones en javascript se pueden tratar como cualquier otro objeto (ciudadano de primera clase), es decir, que se puede pasar por parámetro, retornar dentro de otra función.... y todo lo que se nos ocurra, podemos hacer uso de la recursión también.</p>\n<p>Algunos ejemplos de su uso podrian ser: Recorrer un sistema de ficheros (abrir primera carpeta, recorrer lo que hay dentro y si encuentra una carpeta la abre y recorre...y asi sucesivamente), se suele ver en la típica resolución de problemas sobre los números de <em>Fibonacci</em> (que es y ejemplos <a href=\"https://medium.com/developers-writing/fibonacci-sequence-algorithm-in-javascript-b253dc7e320e\">aquí</a>) o en general cualquier problema que requiera repetir lógica sobre un mismo elemento (y no necesitemos o no tenga sentido funcional que usemos un bucle de los habituales)</p>\n<p>Veamos cuales son los detalles de una función recursiva. Ya hemos comentado que en la teoría se supone que es una función que se llama a si misma, como por ejemplo</p>\n<div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">function</span> <span class=\"token function\">addTo</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">number</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n\t<span class=\"token keyword\">return</span> number <span class=\"token operator\">+</span> <span class=\"token function\">addTo</span><span class=\"token punctuation\">(</span>number <span class=\"token operator\">-</span> <span class=\"token number\">1</span><span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token function\">addTo</span><span class=\"token punctuation\">(</span><span class=\"token number\">10</span><span class=\"token punctuation\">)</span>\n</code></pre></div>\n<p>La teoría de la función sería que queremos sumar los números desde 0 hasta el número dado. Visualmente tiene sentido, ¿no?, sumamos el número que recibimos primero que sería el 10 y luego llamamos a la misma función para que use el 9 y así sucesivamente. Pero claro si nos fijamos bien aquí tenemos un problema, si ejecutaramos esto tendriamos un <strong>bucle infinito</strong> porque en ningún momento le indicamos cuando tiene que parar. Lo que le falta a esta función es lo que se conoce como <strong>caso base</strong>.</p>\n<p>El <strong>caso base</strong> es la unidad mínima que debe devolver una función recursiva, si pensamos en lo que queríamos hacer que era sumar del 0 al 10, en este caso nos falta indicarle que cuando llegue a 0 nos devuelva el número, este sería nuestro caso base, <strong>siempre debe tener un caso base</strong>.</p>\n<div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">function</span> <span class=\"token function\">addTo</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">number</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n\t<span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>number <span class=\"token operator\">===</span> <span class=\"token number\">0</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n\t\t<span class=\"token keyword\">return</span> number\n\t<span class=\"token punctuation\">}</span>\n\t<span class=\"token keyword\">return</span> number <span class=\"token operator\">+</span> <span class=\"token function\">addTo</span><span class=\"token punctuation\">(</span>number <span class=\"token operator\">-</span> <span class=\"token number\">1</span><span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token function\">addTo</span><span class=\"token punctuation\">(</span><span class=\"token number\">10</span><span class=\"token punctuation\">)</span>\n</code></pre></div>\n<p>Si ahora ejecutamos esto todo iria bien y nos debería devolver 55. Esto es un caso muy sencillo para explicar que es la recursión pero veamos rápidamente que es lo que lo pasa por debajo.</p>\n<p>Para ello lo primero es repasar que es el <strong>call stack</strong>. El <em>call stack</em> o <em>pila de llamadas</em> (lo defino a mi rollo por simplicicad) son las funciones que se tienen que ejecutar (con estructura <em>LIFO</em>) dentro de un <em>Task</em> del event loop. En el próximo post profundizaremos más en que es cada cosa y el flujo que sigue el eventloop, con lo que nos tenemos que quedar ahora mismo es que el <em>call stack</em> es el trabajo que tiene pendiente javascript para poder pasar a la siguiente tarea (es decir que nuestro thread esta bloqueado hasta que termine).</p>\n<p>Para verlo bien vamos a usar una herramienta que me he encontrado (grandisima ayuda para entender esto visualmente ya lo veremos, agradecer a los creadores) que es <a href=\"https://www.jsv9000.app/\">jsv9000</a>. Esta herramienta nos permite comprobar visualmente lo que pasa dentro de nuestro eventloop en cada una de sus Queues.</p>\n<p>Lo que haremos será añadir el código siguiente y darle a <strong>run</strong>:</p>\n<div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">function</span> <span class=\"token function\">addTo</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">number</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n\t<span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>number <span class=\"token operator\">===</span> <span class=\"token number\">0</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n\t\t<span class=\"token keyword\">return</span> number\n\t<span class=\"token punctuation\">}</span>\n\t<span class=\"token keyword\">return</span> number <span class=\"token operator\">+</span> <span class=\"token function\">addTo</span><span class=\"token punctuation\">(</span>number <span class=\"token operator\">-</span> <span class=\"token number\">1</span><span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">function</span> <span class=\"token function\">finish</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'Finished'</span><span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token function\">addTo</span><span class=\"token punctuation\">(</span><span class=\"token number\">5</span><span class=\"token punctuation\">)</span>\n<span class=\"token function\">finish</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n</code></pre></div>\n<p>Lo que hace la herramienta es indicarnos en que puesto está nuestro código y que ha ido pasando por dentro paso a paso, por lo que tenemos que ir dandole a <strong>step</strong>. Si le damos 6 veces (como le hemos indicado que hasta 5 y empezamos en el 0) vemos como el código lo único que ha hecho es incluir 6 llamadas en el call stack de la función de suma en la fase de <em>evaluación</em></p>\n<p><img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/11/Captura-de-pantalla-2020-11-21-a-las-14.05.32.png\" alt=\"Captura-de-pantalla-2020-11-21-a-las-14.05.32\"></p>\n<p>Si le continuamos dando a <strong>step</strong> vemos como se va vaciando el call stack de la función y lo siguiente es el método <em>finish</em> que nos muestra el resultado del <em>console.log</em>. En este caso lo que vemos es que nuestra función recursiva va acumulando llamadas en el call stack hasta que llega al caso base y empieza a devolver datos y a vaciar. Si lo queremos ver más claro añadimos unos logs</p>\n<div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">function</span> <span class=\"token function\">addTo</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">number</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n\t<span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>number <span class=\"token operator\">===</span> <span class=\"token number\">0</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n\t  console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token number\">0</span><span class=\"token punctuation\">)</span>\n\t\t<span class=\"token keyword\">return</span> number\n\t<span class=\"token punctuation\">}</span>\n\t<span class=\"token keyword\">const</span> result <span class=\"token operator\">=</span> number <span class=\"token operator\">+</span> <span class=\"token function\">addTo</span><span class=\"token punctuation\">(</span>number <span class=\"token operator\">-</span> <span class=\"token number\">1</span><span class=\"token punctuation\">)</span>\n\tconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'result: '</span><span class=\"token punctuation\">,</span> result<span class=\"token punctuation\">)</span>\n\t<span class=\"token keyword\">return</span> result\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">function</span> <span class=\"token function\">finish</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token string\">'Finished'</span><span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token function\">addTo</span><span class=\"token punctuation\">(</span><span class=\"token number\">5</span><span class=\"token punctuation\">)</span>\n<span class=\"token function\">finish</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span>\n</code></pre></div>\n<p>Y podemos ver en acción realmente donde estamos</p>\n<p><img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/11/Captura-de-pantalla-2020-11-21-a-las-14.19.09.png\" alt=\"Captura-de-pantalla-2020-11-21-a-las-14.19.09\"></p>\n<p>Una vez entendido esto, ahora os planteo el gran problema que resolveremos en próximos posts. Cambiemos el código por lo siguiente pero no recomiendo ejecutarlo en la herramienta que tardaría muchisimo, ejecutarlo en la consola del navegador, en un fichero de node o donde más os guste</p>\n<div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\"><span class=\"token keyword\">function</span> <span class=\"token function\">addTo</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">number</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n\t<span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>number <span class=\"token operator\">===</span> <span class=\"token number\">0</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n\t\t<span class=\"token keyword\">return</span> number\n\t<span class=\"token punctuation\">}</span>\n\t<span class=\"token keyword\">return</span> number <span class=\"token operator\">+</span> <span class=\"token function\">addTo</span><span class=\"token punctuation\">(</span>number <span class=\"token operator\">-</span> <span class=\"token number\">1</span><span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span>\n\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token function\">addTo</span><span class=\"token punctuation\">(</span><span class=\"token number\">100000</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span>\n</code></pre></div>\n<p>Fijaos el número que he puesto <strong>100000</strong>, esto nos debe dar un error como el siguiente:</p>\n<p><img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/11/Captura-de-pantalla-2020-11-21-a-las-14.23.21.png\" alt=\"Captura-de-pantalla-2020-11-21-a-las-14.23.21\"></p>\n<p>Es decir hemos llegado al límite de acciones posibles dentro de la pila de llamadas, si nos planteamos lo que ocurria con 5, que teniamos 6 inclusiones el call stack, ahora tendríamos 100001 (se que este número es muy grande pero depende de lo que estemos haciendo o donde puede ser mucho menos, realmente insisto en que es un error muy habitual). Este problema viene dado porque javascript no es un lenguaje orientado a este tipo de funciones, pero siempre podemos encontrarle solución, en los próximos post veremos como podemos solucionar esto de muchas maneras, mientras tando plantear vosotros posibles soluciones. Nos vemos en el siguiente un abrazoooooor</p>\n<!--kg-card-end: markdown-->","htmlAst":{"type":"root","children":[{"type":"comment","value":"kg-card-begin: markdown"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Hablemos ahora de la "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Recursividad"}]},{"type":"text","value":". A la gran mayoría por lo menos nos tiene que sonar ¿no?... por lo menos nos habrán dicho que es muy chula, que mola usarla, que porque no lo pruebas... pues bien he de coincidir con casi cualquier cosa buena que se diga sobre este concepto, aunque claro lo suyo es usarlo cuando toque y tenga sentido (pero eso es otra historia)."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Por ahora veremos que es esto de la recursividad, para que nos sirve y cual es el problema que nos generará a la larga (y como resolverlo) esto en nuestro querido "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Javascript"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"recursividad"},"children":[{"type":"text","value":"Recursividad"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"No me voy a extender en explicaciones técnicas en este caso (profundizaré más en el post de la línea de javascript funcional), por lo que, en palabras simples, es la capacidad de una función de llamarse a si misma. Esto es más un concepto de programación funcional, pero debido a que las funciones en javascript se pueden tratar como cualquier otro objeto (ciudadano de primera clase), es decir, que se puede pasar por parámetro, retornar dentro de otra función.... y todo lo que se nos ocurra, podemos hacer uso de la recursión también."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Algunos ejemplos de su uso podrian ser: Recorrer un sistema de ficheros (abrir primera carpeta, recorrer lo que hay dentro y si encuentra una carpeta la abre y recorre...y asi sucesivamente), se suele ver en la típica resolución de problemas sobre los números de "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Fibonacci"}]},{"type":"text","value":" (que es y ejemplos "},{"type":"element","tagName":"a","properties":{"href":"https://medium.com/developers-writing/fibonacci-sequence-algorithm-in-javascript-b253dc7e320e"},"children":[{"type":"text","value":"aquí"}]},{"type":"text","value":") o en general cualquier problema que requiera repetir lógica sobre un mismo elemento (y no necesitemos o no tenga sentido funcional que usemos un bucle de los habituales)"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Veamos cuales son los detalles de una función recursiva. Ya hemos comentado que en la teoría se supone que es una función que se llama a si misma, como por ejemplo"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"javascript"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-javascript"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-javascript"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"addTo"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","parameter"]},"children":[{"type":"text","value":"number"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n\t"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" number "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"addTo"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"number "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"1"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"addTo"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"10"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"La teoría de la función sería que queremos sumar los números desde 0 hasta el número dado. Visualmente tiene sentido, ¿no?, sumamos el número que recibimos primero que sería el 10 y luego llamamos a la misma función para que use el 9 y así sucesivamente. Pero claro si nos fijamos bien aquí tenemos un problema, si ejecutaramos esto tendriamos un "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"bucle infinito"}]},{"type":"text","value":" porque en ningún momento le indicamos cuando tiene que parar. Lo que le falta a esta función es lo que se conoce como "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"caso base"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"El "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"caso base"}]},{"type":"text","value":" es la unidad mínima que debe devolver una función recursiva, si pensamos en lo que queríamos hacer que era sumar del 0 al 10, en este caso nos falta indicarle que cuando llegue a 0 nos devuelva el número, este sería nuestro caso base, "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"siempre debe tener un caso base"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"javascript"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-javascript"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-javascript"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"addTo"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","parameter"]},"children":[{"type":"text","value":"number"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n\t"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"if"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"number "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"==="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"0"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n\t\t"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" number\n\t"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\t"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" number "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"addTo"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"number "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"1"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"addTo"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"10"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Si ahora ejecutamos esto todo iria bien y nos debería devolver 55. Esto es un caso muy sencillo para explicar que es la recursión pero veamos rápidamente que es lo que lo pasa por debajo."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Para ello lo primero es repasar que es el "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"call stack"}]},{"type":"text","value":". El "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"call stack"}]},{"type":"text","value":" o "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"pila de llamadas"}]},{"type":"text","value":" (lo defino a mi rollo por simplicicad) son las funciones que se tienen que ejecutar (con estructura "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"LIFO"}]},{"type":"text","value":") dentro de un "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Task"}]},{"type":"text","value":" del event loop. En el próximo post profundizaremos más en que es cada cosa y el flujo que sigue el eventloop, con lo que nos tenemos que quedar ahora mismo es que el "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"call stack"}]},{"type":"text","value":" es el trabajo que tiene pendiente javascript para poder pasar a la siguiente tarea (es decir que nuestro thread esta bloqueado hasta que termine)."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Para verlo bien vamos a usar una herramienta que me he encontrado (grandisima ayuda para entender esto visualmente ya lo veremos, agradecer a los creadores) que es "},{"type":"element","tagName":"a","properties":{"href":"https://www.jsv9000.app/"},"children":[{"type":"text","value":"jsv9000"}]},{"type":"text","value":". Esta herramienta nos permite comprobar visualmente lo que pasa dentro de nuestro eventloop en cada una de sus Queues."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Lo que haremos será añadir el código siguiente y darle a "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"run"}]},{"type":"text","value":":"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"javascript"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-javascript"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-javascript"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"addTo"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","parameter"]},"children":[{"type":"text","value":"number"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n\t"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"if"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"number "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"==="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"0"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n\t\t"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" number\n\t"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\t"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" number "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"addTo"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"number "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"1"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"finish"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n  console"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"log"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'Finished'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"addTo"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"5"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"finish"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Lo que hace la herramienta es indicarnos en que puesto está nuestro código y que ha ido pasando por dentro paso a paso, por lo que tenemos que ir dandole a "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"step"}]},{"type":"text","value":". Si le damos 6 veces (como le hemos indicado que hasta 5 y empezamos en el 0) vemos como el código lo único que ha hecho es incluir 6 llamadas en el call stack de la función de suma en la fase de "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"evaluación"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2020/11/Captura-de-pantalla-2020-11-21-a-las-14.05.32.png","alt":"Captura-de-pantalla-2020-11-21-a-las-14.05.32"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Si le continuamos dando a "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"step"}]},{"type":"text","value":" vemos como se va vaciando el call stack de la función y lo siguiente es el método "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"finish"}]},{"type":"text","value":" que nos muestra el resultado del "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"console.log"}]},{"type":"text","value":". En este caso lo que vemos es que nuestra función recursiva va acumulando llamadas en el call stack hasta que llega al caso base y empieza a devolver datos y a vaciar. Si lo queremos ver más claro añadimos unos logs"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"javascript"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-javascript"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-javascript"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"addTo"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","parameter"]},"children":[{"type":"text","value":"number"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n\t"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"if"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"number "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"==="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"0"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n\t  console"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"log"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"0"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n\t\t"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" number\n\t"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\t"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" result "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" number "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"addTo"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"number "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"1"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n\tconsole"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"log"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'result: '"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" result"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n\t"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" result\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"finish"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n  console"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"log"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'Finished'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"addTo"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"5"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"finish"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Y podemos ver en acción realmente donde estamos"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2020/11/Captura-de-pantalla-2020-11-21-a-las-14.19.09.png","alt":"Captura-de-pantalla-2020-11-21-a-las-14.19.09"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Una vez entendido esto, ahora os planteo el gran problema que resolveremos en próximos posts. Cambiemos el código por lo siguiente pero no recomiendo ejecutarlo en la herramienta que tardaría muchisimo, ejecutarlo en la consola del navegador, en un fichero de node o donde más os guste"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"javascript"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-javascript"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-javascript"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"addTo"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","parameter"]},"children":[{"type":"text","value":"number"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n\t"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"if"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"number "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"==="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"0"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n\t\t"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" number\n\t"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\t"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" number "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"addTo"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"number "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"1"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\nconsole"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"log"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"addTo"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"100000"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Fijaos el número que he puesto "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"100000"}]},{"type":"text","value":", esto nos debe dar un error como el siguiente:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2020/11/Captura-de-pantalla-2020-11-21-a-las-14.23.21.png","alt":"Captura-de-pantalla-2020-11-21-a-las-14.23.21"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Es decir hemos llegado al límite de acciones posibles dentro de la pila de llamadas, si nos planteamos lo que ocurria con 5, que teniamos 6 inclusiones el call stack, ahora tendríamos 100001 (se que este número es muy grande pero depende de lo que estemos haciendo o donde puede ser mucho menos, realmente insisto en que es un error muy habitual). Este problema viene dado porque javascript no es un lenguaje orientado a este tipo de funciones, pero siempre podemos encontrarle solución, en los próximos post veremos como podemos solucionar esto de muchas maneras, mientras tando plantear vosotros posibles soluciones. Nos vemos en el siguiente un abrazoooooor"}]},{"type":"text","value":"\n"},{"type":"comment","value":"kg-card-end: markdown"}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"recursividad","heading":"Recursividad"}]},"featureImageSharp":{"base":"unordered-3192273_640-2.png","publicURL":"/static/e92df4805fb46ec1f6bec181d2305365/unordered-3192273_640-2.png","imageMeta":{"width":640,"height":512},"childImageSharp":{"fluid":{"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAQCAYAAAAWGF8bAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFG0lEQVQ4ywEQBe/6APG/tx3SpZ5Y2+PkQNzf3UjCw89E2M6jZubUibvJxK5Yk5/RHmd0qxNMWpUXsLO/LLe5xT+corsvv7++MmxsaxaZmYUXj4+WHsrKyjrNzc1HANSJfnXTZVT/1X5wp7K+vUSttMg40cSUb+zYh97by4ie0smidOHVpIbbzpWb7Nybsuvbmrbd0ZKAnp/khImK5tyWltuK4uHGPOXl6E3NyMdIAJFqZDnPkIiCwW5inMx1abl/j3YbtLb/AOjCOwXl1IRn2MmFntzNk5Tw46uQ493CYMS+olvt2X+avrSnpo6R6KCEhNulmZrkhs3SsikAABILAMfLzkae0MIY/6TMANl3X5vGi5ajeYjzhYiH66WJi+eaq7TzQuTZqG3v3I+008OFfpKk8ie0pm0n792VubCzwjPOzcE9hofluLOt43/Ue2F8ANfWxzZsXLEeh5X/UKZvjFq/eo3ml6HgedPLukaUk+KxjIvdlPnhcoXu2pwW6tWCl8/Iq1Lp15Cv5NacgElUgxje2r4yvcLqYZeH0tfZdGPhALu70USCg+mpgobwgoyG49zFeobjqqbhhYCO6YmDh+SynZ3VX+bUg4Dq1oeN7NiHxOjXj8jk0XNXfoaCFL29wE7Lx8dK0eznLZB8yaHSgH3MAJuc5qKGhuCF3tmJGo2S6rLIdnrJpYq+sLCIr8LKrbdquMG3RJuZo0vHu4eC6NeQy9HPwUuJjNporKzXYbuzoTe1uLtHuLe0P9BrY8C/fYF/AI+Q58Kur9NhvLfDQ3+K8pXFeW9m3nJZ2d1mRoLUb1ydv8HBKcPc+Cu1qoeG8+med5KY8HOYl+bKjo3nvwBn/w6J0MgV1nhjuayBsuFPctxCAIqK7qybm8txAAAAAXyG8Im3kraj2nBY0M9vZazlcWFlAAAADkseE59cLiD4TiMHc3570auip+BMkJnslKZ3q5PXYkie0GhZ4bR9ntm4na5oAIeJ4GGOj+7S1dDJTqe951G3e5nrx2pZTs2/pT+ZjH9IUSohtkYkGP9XJBf/WCIR/1gwNfV2ds+lv3SH1M97csHfiWiGynJ1za10ncfifGW3AOvajLKkn8qdgYLtx7LA8WbegnGkmn2+vJKn/39iRVHMXjcn/z87N/l/ZFP7OSol/0MsHrvEbG2usHef4ouY+aGJnvF1rn+ozdF3ccLMeGqWAOzZjN7444OryLyvuH2K+8C8iZ/U1IJ2oG+u/zB5ZHl8iHBd/6eWifvKqI3/npGF/ZR5bf/EbW3an7DGK6Sl5YuLiuf/jZb2obahhjO1vMJGAPLflS795oUW9+N/ld/QjMXYyJr43I1t9MdNJzUAOAADpodx58Gfh/+2pJbpw6GH+qSGc9rPblisqpfDcKWj1N7m2KHVo57Myri4vFCtpqwTAP///wA4Qu8NgYTuetbLs6rk1pb/ybOjt9VvZ6nCe3R8vZ6Dvph6YsCjhXPzi3FcsbWUgL/SalawjoTgrpufzW7YypGa3c+i5uvbk3jw34+GANDPuTesrNtxi4zo4oqN87bDubTD5NiUt9zOonzEh23DnoF+8JF8gsfRpHz/jndr07mIdvXMfGaGn6TvrJiW2L23sMDh18qbg8urAAXq2pGqANDQ0EM2NjUTeHidH5qZlSEABVkJ/+eDL9fJh43Hpn/zn4ym/6Ca0f+tnbD+nYaO/7eXhvmxroxy7N6gf8u/p57XzJ513+DcQ7e3uzE9PDMO7sYRFrnPY/gAAAAASUVORK5CYII=","aspectRatio":1.25,"src":"/static/e92df4805fb46ec1f6bec181d2305365/8bef3/unordered-3192273_640-2.png","srcSet":"/static/e92df4805fb46ec1f6bec181d2305365/847ef/unordered-3192273_640-2.png 175w,\n/static/e92df4805fb46ec1f6bec181d2305365/91cba/unordered-3192273_640-2.png 350w,\n/static/e92df4805fb46ec1f6bec181d2305365/8bef3/unordered-3192273_640-2.png 640w","srcWebp":"/static/e92df4805fb46ec1f6bec181d2305365/1ea2e/unordered-3192273_640-2.webp","srcSetWebp":"/static/e92df4805fb46ec1f6bec181d2305365/9fca7/unordered-3192273_640-2.webp 175w,\n/static/e92df4805fb46ec1f6bec181d2305365/37a4e/unordered-3192273_640-2.webp 350w,\n/static/e92df4805fb46ec1f6bec181d2305365/1ea2e/unordered-3192273_640-2.webp 640w","sizes":"(max-width: 640px) 100vw, 640px"}}}}}]}},"pageContext":{"pageNumber":0,"limit":3,"skip":0,"totalPosts":7,"numberOfPages":3,"humanPageNumber":1,"prevPageNumber":null,"nextPageNumber":2,"previousPagePath":null,"nextPagePath":"/tag/algoritmos/page/2/","slug":"algoritmos","collectionPaths":{},"iScrollEnabled":true,"postIds":["Ghost__Post__5fd65ddfa6c0f5058bff49a1","Ghost__Post__5fbc0b8ba6c0f5058bff47fa","Ghost__Post__5c18a5012dd6610fd828cacd","Ghost__Post__5fa84de4a6c0f5058bff43db","Ghost__Post__5c3e0fda2dd6610fd828cb5b","Ghost__Post__5c1154572dd6610fd828cab0","Ghost__Post__5c1a01ea2dd6610fd828cad3"],"cursor":0}},
    "staticQueryHashes": ["1272700106","1676991999","2138873178","2546165603","2681841279","2938721187","293880488","3052966952","4156497161"]}