{
    "componentChunkName": "component---node-modules-gatsby-theme-try-ghost-src-templates-post-js",
    "path": "/js-algoritmos-y-estructuras-de-datos-vii-la-recursividad-iii/",
    "result": {"data":{"ghostPost":{"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/bcfcb/unordered-3192273_640-1.png 260w,\n/static/e92df4805fb46ec1f6bec181d2305365/19d75/unordered-3192273_640-1.png 520w,\n/static/e92df4805fb46ec1f6bec181d2305365/8bef3/unordered-3192273_640-1.png 640w","srcWebp":"/static/e92df4805fb46ec1f6bec181d2305365/1ea2e/unordered-3192273_640-1.webp","srcSetWebp":"/static/e92df4805fb46ec1f6bec181d2305365/dc8f3/unordered-3192273_640-1.webp 260w,\n/static/e92df4805fb46ec1f6bec181d2305365/2db4b/unordered-3192273_640-1.webp 520w,\n/static/e92df4805fb46ec1f6bec181d2305365/1ea2e/unordered-3192273_640-1.webp 640w","sizes":"(max-width: 640px) 100vw, 640px"}}}},"prev":{"id":"Ghost__Post__5ff96d70a6c0f5058bff4c9d","title":"Docker IX - Kubernetes IV: Definiendo recursos de hardware","slug":"docker-ix-kubernetes-iv-definiendo-recursos","featured":false,"feature_image":"https://jlgarcia.fulldev.ninja/assets/images/2021/01/learning-docker-and-k8s-by-practice.jpg","excerpt":"En el post anterior vimos una configuración muy básica de los pods, pero como os\nimaginaréis tenemos más posibilidades interesantes que estaria bien que\ntuvieramos en cuenta. Una de ellas es la configuración/limitación de recursos.\n\nCuando usamos pods pero no indicamos ningún límite de recursos de hardware, nos\nencontrariamos con estos 2 escenarios:\n\n * Tener unos límites definidos por defecto dentro del cluster de kubernetes\n * Usar los recursos sin límite (no recomendado para nada, si sabemos ","custom_excerpt":null,"visibility":"public","created_at_pretty":"9 Jan 2021","published_at_pretty":"11 Jan 2021","updated_at_pretty":"19 Jan 2021","created_at":"2021-01-09T09:46:40.000+01:00","published_at":"2021-01-11T10:32:00.000+01:00","updated_at":"2021-01-19T21:13:37.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":"docker","url":"https://jlgarcia.fulldev.ninja/tag/docker/","name":"Docker","visibility":"public","feature_image":null,"description":null,"meta_title":"Docker Issues","meta_description":"Veremos algunos de los problemas que me he ido encontrando trabajando con contenedores y que no es tan fácil encontrar la solución en internet.","featureImageSharp":null},"tags":[{"slug":"docker","url":"https://jlgarcia.fulldev.ninja/tag/docker/","name":"Docker","visibility":"public","feature_image":null,"description":null,"meta_title":"Docker Issues","meta_description":"Veremos algunos de los problemas que me he ido encontrando trabajando con contenedores y que no es tan fácil encontrar la solución en internet.","featureImageSharp":null},{"slug":"kubernetes","url":"https://jlgarcia.fulldev.ninja/tag/kubernetes/","name":"kubernetes","visibility":"public","feature_image":null,"description":null,"meta_title":null,"meta_description":null,"featureImageSharp":null}],"plaintext":"En el post anterior vimos una configuración muy básica de los pods, pero como os\nimaginaréis tenemos más posibilidades interesantes que estaria bien que\ntuvieramos en cuenta. Una de ellas es la configuración/limitación de recursos.\n\nCuando usamos pods pero no indicamos ningún límite de recursos de hardware, nos\nencontrariamos con estos 2 escenarios:\n\n * Tener unos límites definidos por defecto dentro del cluster de kubernetes\n * Usar los recursos sin límite (no recomendado para nada, si sabemos de sobra\n   que no usaremos en ningun caso todo el hardware disponible nos podemos\n   arriesgar, pero si tenemos intención de aumentar contenedores en el futuro\n   esto puede convertirse en un problema importante)\n\nLo ideal es siempre definir unos recursos específicos para cada elemento, así\nkubernetes puede distribuir los contenedores y los recursos de manera mucho más\neficiente.\nPara ello podemos/tenemos que añadir dos nuevas propiedades en nuestros pods,\nveamos un ejemplo.\n\nComo usaremos el mismo pod que hemos estado usando actualmente lo primero que\nharemos será borrar los pods que tenemos actualmente, para ello es suficiente\ncon ejecutar el siguiente comando por cada pod que queramos eliminar:\n\n// para obtener los pods actuales\nkubectl get pods \n\n// para eliminar un post específico\nkubectl delete pods nombreDelContainer\n\n\n\n\nComo vemos en la imagen la consola nos confirma su eliminación.\nAhora añadamos las opciones para limitar o específicar los recursos:\n\napiVersion: v1\nkind: Pod\nmetadata:\n  creationTimestamp: null\n  labels:\n    run: mario-test\n  name: mario-test\nspec:\n  containers:\n  - image: pengbai/docker-supermario:latest\n    name: mario-test\n    ports:\n    - containerPort: 8080\n    resources: \n      requests:\n        cpu: 50m \n        memory: 64M\n      limits:\n        cpu: 50m\n        memory: 64M\n  dnsPolicy: ClusterFirst\n  restartPolicy: Always\nstatus: {}\n\n\nSi nos fijamos en nuestro fichero pod hemos añadido nuevas propiedades dentro de \nresources, hemos añadido:\n\n * requests: Con esta opción le indicamos a kubernetes el mínimo de recursos que\n   debe tener nuestro contenedor. Esto es muy útil para que kubernetes lo situe\n   donde más le convenga.\n * limits: Como su nombre indica este es el límite que le estamos indicando a\n   kubernetes que puede usar nuestro contenedor. IMPORTANTE: si el contenedor se\n   pasa de recursos es posible que kubernetes decida parar el contenedor\n\nPara ver en detalle las opciones de CPU y MEMORIA recomienda leerse la\ndocumentación al respecto Assign cpu resource\n[https://kubernetes.io/docs/tasks/configure-pod-container/assign-cpu-resource/] \ny Manage resources containers\n[https://kubernetes.io/docs/concepts/configuration/manage-resources-containers]\n\nEn nuestro ejemplo le estamos limitando al uso de *50 milliCPU * y 64Mb, si por\nejemplo le indicaramos algo que no tuviera disponible nuestro cluster,\nkubernetes lo que haría sería esperar a tener esos recursos disponibles para\narrancar el contenedor en cuestión.\n\nAhora arranquemos nuestro pod:\n\nkubectl create -f mario.yml\n\n\nY si hacemos un describe de nuestro pod\n\nkubectl describe pods mario-test\n\n\n\n\nPodemos ver como todo ha funcionado correctamente y nuestro pod tiene\nconfigurado sus recursos.\n\nAhora cambiemos la configuración para que veamos que pasa cuando le ponemos una\ncantidad de recursos que no puede asumir. Por ejemplo en mi caso le ponemos que\nuse 64Gb (que mi maquina actual no los tiene)\n\napiVersion: v1\nkind: Pod\nmetadata:\n  creationTimestamp: null\n  labels:\n    run: mario-test\n  name: mario-test\nspec:\n  containers:\n  - image: pengbai/docker-supermario:latest\n    name: mario-test\n    ports:\n    - containerPort: 8080\n    resources: \n      requests:\n        cpu: 50m \n        memory: 64G\n      limits:\n        cpu: 50m\n        memory: 64G\n  dnsPolicy: ClusterFirst\n  restartPolicy: Always\nstatus: {}\n\n\nSi ahora borramos el pod que tenemos y creamos este nuevo veamos lo que pasa:\n\n\n\nNuestro pod se queda con un estado pending permanente, y si vemos la descripción\ndel pod nos indicara el estado y la información de porque no se esta ejecutando,\nen este caso por falta de memoria\n\n\n\nComo vemos con estas simples propiedades dentro de los pods podemos limitar o\nindicar los recursos que nuestro contenedor o pod usará (con requests) y la\ncantidad de hardware que queremos que use como máximo (con limits).\n\nY hasta aquí lo referente a lo básico de sobre los recursos de nuestros pods,\nrecomiendo leer la documentación para poder hacer un selección más específica de\nlos recursos que queremos que usen nuestros contenedores, sin mucho más nos\nvemos en el siguiente, un abrazooooooooo","html":"<!--kg-card-begin: markdown--><p>En el post anterior vimos una configuración muy básica de los pods, pero como os imaginaréis tenemos más posibilidades interesantes que estaria bien que tuvieramos en cuenta. Una de ellas es <strong>la configuración/limitación de recursos</strong>.</p>\n<p>Cuando usamos pods pero no indicamos ningún límite de recursos de hardware, nos encontrariamos con estos 2 escenarios:</p>\n<ul>\n<li>Tener unos límites definidos por defecto dentro del cluster de kubernetes</li>\n<li>Usar los recursos sin límite (no recomendado para nada, si sabemos de sobra que no usaremos en ningun caso todo el hardware disponible nos podemos arriesgar, pero si tenemos intención de aumentar contenedores en el futuro esto puede convertirse en un problema importante)</li>\n</ul>\n<p>Lo ideal es siempre definir unos recursos específicos para cada elemento, así kubernetes puede distribuir los contenedores y los recursos de manera mucho más eficiente.<br>\nPara ello podemos/tenemos que añadir dos nuevas propiedades en nuestros pods, veamos un ejemplo.</p>\n<p>Como usaremos el mismo pod que hemos estado usando actualmente lo primero que haremos será borrar los pods que tenemos actualmente, para ello es suficiente con ejecutar el siguiente comando por cada pod que queramos eliminar:</p>\n<pre><code class=\"language-shell\">// para obtener los pods actuales\nkubectl get pods \n\n// para eliminar un post específico\nkubectl delete pods nombreDelContainer\n</code></pre>\n<p><img src=\"https://jlgarcia.fulldev.ninja/assets/images/2021/01/Captura-de-pantalla-2021-01-09-a-las-13.57.29.png\" alt=\"Captura-de-pantalla-2021-01-09-a-las-13.57.29\"></p>\n<p>Como vemos en la imagen la consola nos confirma su eliminación.<br>\nAhora añadamos las opciones para limitar o específicar los recursos:</p>\n<pre><code class=\"language-yaml\">apiVersion: v1\nkind: Pod\nmetadata:\n  creationTimestamp: null\n  labels:\n    run: mario-test\n  name: mario-test\nspec:\n  containers:\n  - image: pengbai/docker-supermario:latest\n    name: mario-test\n    ports:\n    - containerPort: 8080\n    resources: \n      requests:\n        cpu: 50m \n        memory: 64M\n      limits:\n        cpu: 50m\n        memory: 64M\n  dnsPolicy: ClusterFirst\n  restartPolicy: Always\nstatus: {}\n</code></pre>\n<p>Si nos fijamos en nuestro fichero pod hemos añadido nuevas propiedades dentro de <em>resources</em>, hemos añadido:</p>\n<ul>\n<li><strong>requests</strong>: Con esta opción le indicamos a kubernetes el mínimo de recursos que debe tener nuestro contenedor. Esto es muy útil para que kubernetes lo situe donde más le convenga.</li>\n<li><strong>limits</strong>: Como su nombre indica este es el límite que le estamos indicando a kubernetes que puede usar nuestro contenedor. <strong>IMPORTANTE: si el contenedor se pasa de recursos es posible que kubernetes decida parar el contenedor</strong></li>\n</ul>\n<p>Para ver en detalle las opciones de CPU y MEMORIA recomienda leerse la documentación al respecto <a href=\"https://kubernetes.io/docs/tasks/configure-pod-container/assign-cpu-resource/\">Assign cpu resource</a> y <a href=\"https://kubernetes.io/docs/concepts/configuration/manage-resources-containers\">Manage resources containers</a></p>\n<p>En nuestro ejemplo le estamos limitando al uso de *50 milliCPU * y <em>64Mb</em>, si por ejemplo le indicaramos algo que no tuviera disponible nuestro cluster, kubernetes lo que haría sería esperar a tener esos recursos disponibles para arrancar el contenedor en cuestión.</p>\n<p>Ahora arranquemos nuestro pod:</p>\n<pre><code class=\"language-shell\">kubectl create -f mario.yml\n</code></pre>\n<p>Y si hacemos un describe de nuestro pod</p>\n<pre><code>kubectl describe pods mario-test\n</code></pre>\n<p><img src=\"https://jlgarcia.fulldev.ninja/assets/images/2021/01/Captura-de-pantalla-2021-01-09-a-las-14.18.28.png\" alt=\"Captura-de-pantalla-2021-01-09-a-las-14.18.28\"></p>\n<p>Podemos ver como todo ha funcionado correctamente y nuestro pod tiene configurado sus recursos.</p>\n<p>Ahora cambiemos la configuración para que veamos que pasa cuando le ponemos una cantidad de recursos que no puede asumir. Por ejemplo en mi caso le ponemos que use 64Gb (que mi maquina actual no los tiene)</p>\n<pre><code class=\"language-yaml\">apiVersion: v1\nkind: Pod\nmetadata:\n  creationTimestamp: null\n  labels:\n    run: mario-test\n  name: mario-test\nspec:\n  containers:\n  - image: pengbai/docker-supermario:latest\n    name: mario-test\n    ports:\n    - containerPort: 8080\n    resources: \n      requests:\n        cpu: 50m \n        memory: 64G\n      limits:\n        cpu: 50m\n        memory: 64G\n  dnsPolicy: ClusterFirst\n  restartPolicy: Always\nstatus: {}\n</code></pre>\n<p>Si ahora borramos el pod que tenemos y creamos este nuevo veamos lo que pasa:</p>\n<p><img src=\"https://jlgarcia.fulldev.ninja/assets/images/2021/01/Captura-de-pantalla-2021-01-09-a-las-14.22.34.png\" alt=\"Captura-de-pantalla-2021-01-09-a-las-14.22.34\"></p>\n<p>Nuestro pod se queda con un estado pending permanente, y si vemos la descripción del pod nos indicara el estado y la información de porque no se esta ejecutando, en este caso por falta de memoria</p>\n<p><img src=\"https://jlgarcia.fulldev.ninja/assets/images/2021/01/Captura-de-pantalla-2021-01-09-a-las-14.23.42.png\" alt=\"Captura-de-pantalla-2021-01-09-a-las-14.23.42\"></p>\n<p>Como vemos con estas simples propiedades dentro de los pods podemos limitar o indicar los recursos que nuestro contenedor o pod usará (con requests) y la cantidad de hardware que queremos que use como máximo (con limits).</p>\n<p>Y hasta aquí lo referente a lo básico de sobre los recursos de nuestros pods, recomiendo leer la documentación para poder hacer un selección más específica de los recursos que queremos que usen nuestros contenedores, sin mucho más nos vemos en el siguiente, un abrazooooooooo</p>\n<!--kg-card-end: markdown-->","url":"https://jlgarcia.fulldev.ninja/docker-ix-kubernetes-iv-definiendo-recursos/","canonical_url":null,"uuid":"74334477-f981-4250-9303-00f218ea7a9e","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"5ff96d70a6c0f5058bff4c9d","reading_time":3,"send_email_when_published":false,"email_subject":null,"childHtmlRehype":{"html":"<!--kg-card-begin: markdown--><p>En el post anterior vimos una configuración muy básica de los pods, pero como os imaginaréis tenemos más posibilidades interesantes que estaria bien que tuvieramos en cuenta. Una de ellas es <strong>la configuración/limitación de recursos</strong>.</p>\n<p>Cuando usamos pods pero no indicamos ningún límite de recursos de hardware, nos encontrariamos con estos 2 escenarios:</p>\n<ul>\n<li>Tener unos límites definidos por defecto dentro del cluster de kubernetes</li>\n<li>Usar los recursos sin límite (no recomendado para nada, si sabemos de sobra que no usaremos en ningun caso todo el hardware disponible nos podemos arriesgar, pero si tenemos intención de aumentar contenedores en el futuro esto puede convertirse en un problema importante)</li>\n</ul>\n<p>Lo ideal es siempre definir unos recursos específicos para cada elemento, así kubernetes puede distribuir los contenedores y los recursos de manera mucho más eficiente.<br>\nPara ello podemos/tenemos que añadir dos nuevas propiedades en nuestros pods, veamos un ejemplo.</p>\n<p>Como usaremos el mismo pod que hemos estado usando actualmente lo primero que haremos será borrar los pods que tenemos actualmente, para ello es suficiente con ejecutar el siguiente comando por cada pod que queramos eliminar:</p>\n<div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\">// para obtener los pods actuales\nkubectl get pods \n\n// para eliminar un post específico\nkubectl delete pods nombreDelContainer\n</code></pre></div>\n<p><img src=\"https://jlgarcia.fulldev.ninja/assets/images/2021/01/Captura-de-pantalla-2021-01-09-a-las-13.57.29.png\" alt=\"Captura-de-pantalla-2021-01-09-a-las-13.57.29\"></p>\n<p>Como vemos en la imagen la consola nos confirma su eliminación.<br>\nAhora añadamos las opciones para limitar o específicar los recursos:</p>\n<div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"yaml\"><pre class=\"language-yaml\"><code class=\"language-yaml\"><span class=\"token key atrule\">apiVersion</span><span class=\"token punctuation\">:</span> v1\n<span class=\"token key atrule\">kind</span><span class=\"token punctuation\">:</span> Pod\n<span class=\"token key atrule\">metadata</span><span class=\"token punctuation\">:</span>\n  <span class=\"token key atrule\">creationTimestamp</span><span class=\"token punctuation\">:</span> <span class=\"token null important\">null</span>\n  <span class=\"token key atrule\">labels</span><span class=\"token punctuation\">:</span>\n    <span class=\"token key atrule\">run</span><span class=\"token punctuation\">:</span> mario<span class=\"token punctuation\">-</span>test\n  <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> mario<span class=\"token punctuation\">-</span>test\n<span class=\"token key atrule\">spec</span><span class=\"token punctuation\">:</span>\n  <span class=\"token key atrule\">containers</span><span class=\"token punctuation\">:</span>\n  <span class=\"token punctuation\">-</span> <span class=\"token key atrule\">image</span><span class=\"token punctuation\">:</span> pengbai/docker<span class=\"token punctuation\">-</span>supermario<span class=\"token punctuation\">:</span>latest\n    <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> mario<span class=\"token punctuation\">-</span>test\n    <span class=\"token key atrule\">ports</span><span class=\"token punctuation\">:</span>\n    <span class=\"token punctuation\">-</span> <span class=\"token key atrule\">containerPort</span><span class=\"token punctuation\">:</span> <span class=\"token number\">8080</span>\n    <span class=\"token key atrule\">resources</span><span class=\"token punctuation\">:</span> \n      <span class=\"token key atrule\">requests</span><span class=\"token punctuation\">:</span>\n        <span class=\"token key atrule\">cpu</span><span class=\"token punctuation\">:</span> 50m \n        <span class=\"token key atrule\">memory</span><span class=\"token punctuation\">:</span> 64M\n      <span class=\"token key atrule\">limits</span><span class=\"token punctuation\">:</span>\n        <span class=\"token key atrule\">cpu</span><span class=\"token punctuation\">:</span> 50m\n        <span class=\"token key atrule\">memory</span><span class=\"token punctuation\">:</span> 64M\n  <span class=\"token key atrule\">dnsPolicy</span><span class=\"token punctuation\">:</span> ClusterFirst\n  <span class=\"token key atrule\">restartPolicy</span><span class=\"token punctuation\">:</span> Always\n<span class=\"token key atrule\">status</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span>\n</code></pre></div>\n<p>Si nos fijamos en nuestro fichero pod hemos añadido nuevas propiedades dentro de <em>resources</em>, hemos añadido:</p>\n<ul>\n<li><strong>requests</strong>: Con esta opción le indicamos a kubernetes el mínimo de recursos que debe tener nuestro contenedor. Esto es muy útil para que kubernetes lo situe donde más le convenga.</li>\n<li><strong>limits</strong>: Como su nombre indica este es el límite que le estamos indicando a kubernetes que puede usar nuestro contenedor. <strong>IMPORTANTE: si el contenedor se pasa de recursos es posible que kubernetes decida parar el contenedor</strong></li>\n</ul>\n<p>Para ver en detalle las opciones de CPU y MEMORIA recomienda leerse la documentación al respecto <a href=\"https://kubernetes.io/docs/tasks/configure-pod-container/assign-cpu-resource/\">Assign cpu resource</a> y <a href=\"https://kubernetes.io/docs/concepts/configuration/manage-resources-containers\">Manage resources containers</a></p>\n<p>En nuestro ejemplo le estamos limitando al uso de *50 milliCPU * y <em>64Mb</em>, si por ejemplo le indicaramos algo que no tuviera disponible nuestro cluster, kubernetes lo que haría sería esperar a tener esos recursos disponibles para arrancar el contenedor en cuestión.</p>\n<p>Ahora arranquemos nuestro pod:</p>\n<div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\">kubectl create -f mario.yml\n</code></pre></div>\n<p>Y si hacemos un describe de nuestro pod</p>\n<div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">kubectl describe pods mario-test\n</code></pre></div>\n<p><img src=\"https://jlgarcia.fulldev.ninja/assets/images/2021/01/Captura-de-pantalla-2021-01-09-a-las-14.18.28.png\" alt=\"Captura-de-pantalla-2021-01-09-a-las-14.18.28\"></p>\n<p>Podemos ver como todo ha funcionado correctamente y nuestro pod tiene configurado sus recursos.</p>\n<p>Ahora cambiemos la configuración para que veamos que pasa cuando le ponemos una cantidad de recursos que no puede asumir. Por ejemplo en mi caso le ponemos que use 64Gb (que mi maquina actual no los tiene)</p>\n<div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"yaml\"><pre class=\"language-yaml\"><code class=\"language-yaml\"><span class=\"token key atrule\">apiVersion</span><span class=\"token punctuation\">:</span> v1\n<span class=\"token key atrule\">kind</span><span class=\"token punctuation\">:</span> Pod\n<span class=\"token key atrule\">metadata</span><span class=\"token punctuation\">:</span>\n  <span class=\"token key atrule\">creationTimestamp</span><span class=\"token punctuation\">:</span> <span class=\"token null important\">null</span>\n  <span class=\"token key atrule\">labels</span><span class=\"token punctuation\">:</span>\n    <span class=\"token key atrule\">run</span><span class=\"token punctuation\">:</span> mario<span class=\"token punctuation\">-</span>test\n  <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> mario<span class=\"token punctuation\">-</span>test\n<span class=\"token key atrule\">spec</span><span class=\"token punctuation\">:</span>\n  <span class=\"token key atrule\">containers</span><span class=\"token punctuation\">:</span>\n  <span class=\"token punctuation\">-</span> <span class=\"token key atrule\">image</span><span class=\"token punctuation\">:</span> pengbai/docker<span class=\"token punctuation\">-</span>supermario<span class=\"token punctuation\">:</span>latest\n    <span class=\"token key atrule\">name</span><span class=\"token punctuation\">:</span> mario<span class=\"token punctuation\">-</span>test\n    <span class=\"token key atrule\">ports</span><span class=\"token punctuation\">:</span>\n    <span class=\"token punctuation\">-</span> <span class=\"token key atrule\">containerPort</span><span class=\"token punctuation\">:</span> <span class=\"token number\">8080</span>\n    <span class=\"token key atrule\">resources</span><span class=\"token punctuation\">:</span> \n      <span class=\"token key atrule\">requests</span><span class=\"token punctuation\">:</span>\n        <span class=\"token key atrule\">cpu</span><span class=\"token punctuation\">:</span> 50m \n        <span class=\"token key atrule\">memory</span><span class=\"token punctuation\">:</span> 64G\n      <span class=\"token key atrule\">limits</span><span class=\"token punctuation\">:</span>\n        <span class=\"token key atrule\">cpu</span><span class=\"token punctuation\">:</span> 50m\n        <span class=\"token key atrule\">memory</span><span class=\"token punctuation\">:</span> 64G\n  <span class=\"token key atrule\">dnsPolicy</span><span class=\"token punctuation\">:</span> ClusterFirst\n  <span class=\"token key atrule\">restartPolicy</span><span class=\"token punctuation\">:</span> Always\n<span class=\"token key atrule\">status</span><span class=\"token punctuation\">:</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span>\n</code></pre></div>\n<p>Si ahora borramos el pod que tenemos y creamos este nuevo veamos lo que pasa:</p>\n<p><img src=\"https://jlgarcia.fulldev.ninja/assets/images/2021/01/Captura-de-pantalla-2021-01-09-a-las-14.22.34.png\" alt=\"Captura-de-pantalla-2021-01-09-a-las-14.22.34\"></p>\n<p>Nuestro pod se queda con un estado pending permanente, y si vemos la descripción del pod nos indicara el estado y la información de porque no se esta ejecutando, en este caso por falta de memoria</p>\n<p><img src=\"https://jlgarcia.fulldev.ninja/assets/images/2021/01/Captura-de-pantalla-2021-01-09-a-las-14.23.42.png\" alt=\"Captura-de-pantalla-2021-01-09-a-las-14.23.42\"></p>\n<p>Como vemos con estas simples propiedades dentro de los pods podemos limitar o indicar los recursos que nuestro contenedor o pod usará (con requests) y la cantidad de hardware que queremos que use como máximo (con limits).</p>\n<p>Y hasta aquí lo referente a lo básico de sobre los recursos de nuestros pods, recomiendo leer la documentación para poder hacer un selección más específica de los recursos que queremos que usen nuestros contenedores, sin mucho más nos vemos en el siguiente, un abrazooooooooo</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":"En el post anterior vimos una configuración muy básica de los pods, pero como os imaginaréis tenemos más posibilidades interesantes que estaria bien que tuvieramos en cuenta. Una de ellas es "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"la configuración/limitación de recursos"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Cuando usamos pods pero no indicamos ningún límite de recursos de hardware, nos encontrariamos con estos 2 escenarios:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Tener unos límites definidos por defecto dentro del cluster de kubernetes"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Usar los recursos sin límite (no recomendado para nada, si sabemos de sobra que no usaremos en ningun caso todo el hardware disponible nos podemos arriesgar, pero si tenemos intención de aumentar contenedores en el futuro esto puede convertirse en un problema importante)"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Lo ideal es siempre definir unos recursos específicos para cada elemento, así kubernetes puede distribuir los contenedores y los recursos de manera mucho más eficiente."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nPara ello podemos/tenemos que añadir dos nuevas propiedades en nuestros pods, veamos un ejemplo."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Como usaremos el mismo pod que hemos estado usando actualmente lo primero que haremos será borrar los pods que tenemos actualmente, para ello es suficiente con ejecutar el siguiente comando por cada pod que queramos eliminar:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"shell"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-shell"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-shell"]},"children":[{"type":"text","value":"// para obtener los pods actuales\nkubectl get pods \n\n// para eliminar un post específico\nkubectl delete pods nombreDelContainer\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2021/01/Captura-de-pantalla-2021-01-09-a-las-13.57.29.png","alt":"Captura-de-pantalla-2021-01-09-a-las-13.57.29"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Como vemos en la imagen la consola nos confirma su eliminación."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nAhora añadamos las opciones para limitar o específicar los recursos:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"yaml"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-yaml"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-yaml"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","key","atrule"]},"children":[{"type":"text","value":"apiVersion"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" v1\n"},{"type":"element","tagName":"span","properties":{"className":["token","key","atrule"]},"children":[{"type":"text","value":"kind"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" Pod\n"},{"type":"element","tagName":"span","properties":{"className":["token","key","atrule"]},"children":[{"type":"text","value":"metadata"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","key","atrule"]},"children":[{"type":"text","value":"creationTimestamp"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","null","important"]},"children":[{"type":"text","value":"null"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","key","atrule"]},"children":[{"type":"text","value":"labels"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","key","atrule"]},"children":[{"type":"text","value":"run"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" mario"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":"test\n  "},{"type":"element","tagName":"span","properties":{"className":["token","key","atrule"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" mario"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":"test\n"},{"type":"element","tagName":"span","properties":{"className":["token","key","atrule"]},"children":[{"type":"text","value":"spec"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","key","atrule"]},"children":[{"type":"text","value":"containers"}]},{"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":" "},{"type":"element","tagName":"span","properties":{"className":["token","key","atrule"]},"children":[{"type":"text","value":"image"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" pengbai/docker"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":"supermario"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":"latest\n    "},{"type":"element","tagName":"span","properties":{"className":["token","key","atrule"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" mario"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":"test\n    "},{"type":"element","tagName":"span","properties":{"className":["token","key","atrule"]},"children":[{"type":"text","value":"ports"}]},{"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":" "},{"type":"element","tagName":"span","properties":{"className":["token","key","atrule"]},"children":[{"type":"text","value":"containerPort"}]},{"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":"8080"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","key","atrule"]},"children":[{"type":"text","value":"resources"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" \n      "},{"type":"element","tagName":"span","properties":{"className":["token","key","atrule"]},"children":[{"type":"text","value":"requests"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","key","atrule"]},"children":[{"type":"text","value":"cpu"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 50m \n        "},{"type":"element","tagName":"span","properties":{"className":["token","key","atrule"]},"children":[{"type":"text","value":"memory"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 64M\n      "},{"type":"element","tagName":"span","properties":{"className":["token","key","atrule"]},"children":[{"type":"text","value":"limits"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","key","atrule"]},"children":[{"type":"text","value":"cpu"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 50m\n        "},{"type":"element","tagName":"span","properties":{"className":["token","key","atrule"]},"children":[{"type":"text","value":"memory"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 64M\n  "},{"type":"element","tagName":"span","properties":{"className":["token","key","atrule"]},"children":[{"type":"text","value":"dnsPolicy"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" ClusterFirst\n  "},{"type":"element","tagName":"span","properties":{"className":["token","key","atrule"]},"children":[{"type":"text","value":"restartPolicy"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" Always\n"},{"type":"element","tagName":"span","properties":{"className":["token","key","atrule"]},"children":[{"type":"text","value":"status"}]},{"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":"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 nos fijamos en nuestro fichero pod hemos añadido nuevas propiedades dentro de "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"resources"}]},{"type":"text","value":", hemos añadido:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"requests"}]},{"type":"text","value":": Con esta opción le indicamos a kubernetes el mínimo de recursos que debe tener nuestro contenedor. Esto es muy útil para que kubernetes lo situe donde más le convenga."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"limits"}]},{"type":"text","value":": Como su nombre indica este es el límite que le estamos indicando a kubernetes que puede usar nuestro contenedor. "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"IMPORTANTE: si el contenedor se pasa de recursos es posible que kubernetes decida parar el contenedor"}]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Para ver en detalle las opciones de CPU y MEMORIA recomienda leerse la documentación al respecto "},{"type":"element","tagName":"a","properties":{"href":"https://kubernetes.io/docs/tasks/configure-pod-container/assign-cpu-resource/"},"children":[{"type":"text","value":"Assign cpu resource"}]},{"type":"text","value":" y "},{"type":"element","tagName":"a","properties":{"href":"https://kubernetes.io/docs/concepts/configuration/manage-resources-containers"},"children":[{"type":"text","value":"Manage resources containers"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"En nuestro ejemplo le estamos limitando al uso de *50 milliCPU * y "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"64Mb"}]},{"type":"text","value":", si por ejemplo le indicaramos algo que no tuviera disponible nuestro cluster, kubernetes lo que haría sería esperar a tener esos recursos disponibles para arrancar el contenedor en cuestión."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Ahora arranquemos nuestro pod:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"shell"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-shell"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-shell"]},"children":[{"type":"text","value":"kubectl create -f mario.yml\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Y si hacemos un describe de nuestro pod"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"text"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-text"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-text"]},"children":[{"type":"text","value":"kubectl describe pods mario-test\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2021/01/Captura-de-pantalla-2021-01-09-a-las-14.18.28.png","alt":"Captura-de-pantalla-2021-01-09-a-las-14.18.28"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Podemos ver como todo ha funcionado correctamente y nuestro pod tiene configurado sus recursos."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Ahora cambiemos la configuración para que veamos que pasa cuando le ponemos una cantidad de recursos que no puede asumir. Por ejemplo en mi caso le ponemos que use 64Gb (que mi maquina actual no los tiene)"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"div","properties":{"className":["kg-card","kg-code-card","gatsby-highlight"],"dataLanguage":"yaml"},"children":[{"type":"element","tagName":"pre","properties":{"className":["language-yaml"]},"children":[{"type":"element","tagName":"code","properties":{"className":["language-yaml"]},"children":[{"type":"element","tagName":"span","properties":{"className":["token","key","atrule"]},"children":[{"type":"text","value":"apiVersion"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" v1\n"},{"type":"element","tagName":"span","properties":{"className":["token","key","atrule"]},"children":[{"type":"text","value":"kind"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" Pod\n"},{"type":"element","tagName":"span","properties":{"className":["token","key","atrule"]},"children":[{"type":"text","value":"metadata"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","key","atrule"]},"children":[{"type":"text","value":"creationTimestamp"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","null","important"]},"children":[{"type":"text","value":"null"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","key","atrule"]},"children":[{"type":"text","value":"labels"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","key","atrule"]},"children":[{"type":"text","value":"run"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" mario"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":"test\n  "},{"type":"element","tagName":"span","properties":{"className":["token","key","atrule"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" mario"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":"test\n"},{"type":"element","tagName":"span","properties":{"className":["token","key","atrule"]},"children":[{"type":"text","value":"spec"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","key","atrule"]},"children":[{"type":"text","value":"containers"}]},{"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":" "},{"type":"element","tagName":"span","properties":{"className":["token","key","atrule"]},"children":[{"type":"text","value":"image"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" pengbai/docker"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":"supermario"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":"latest\n    "},{"type":"element","tagName":"span","properties":{"className":["token","key","atrule"]},"children":[{"type":"text","value":"name"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" mario"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":"test\n    "},{"type":"element","tagName":"span","properties":{"className":["token","key","atrule"]},"children":[{"type":"text","value":"ports"}]},{"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":" "},{"type":"element","tagName":"span","properties":{"className":["token","key","atrule"]},"children":[{"type":"text","value":"containerPort"}]},{"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":"8080"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","key","atrule"]},"children":[{"type":"text","value":"resources"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" \n      "},{"type":"element","tagName":"span","properties":{"className":["token","key","atrule"]},"children":[{"type":"text","value":"requests"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","key","atrule"]},"children":[{"type":"text","value":"cpu"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 50m \n        "},{"type":"element","tagName":"span","properties":{"className":["token","key","atrule"]},"children":[{"type":"text","value":"memory"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 64G\n      "},{"type":"element","tagName":"span","properties":{"className":["token","key","atrule"]},"children":[{"type":"text","value":"limits"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","key","atrule"]},"children":[{"type":"text","value":"cpu"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 50m\n        "},{"type":"element","tagName":"span","properties":{"className":["token","key","atrule"]},"children":[{"type":"text","value":"memory"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" 64G\n  "},{"type":"element","tagName":"span","properties":{"className":["token","key","atrule"]},"children":[{"type":"text","value":"dnsPolicy"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" ClusterFirst\n  "},{"type":"element","tagName":"span","properties":{"className":["token","key","atrule"]},"children":[{"type":"text","value":"restartPolicy"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" Always\n"},{"type":"element","tagName":"span","properties":{"className":["token","key","atrule"]},"children":[{"type":"text","value":"status"}]},{"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":"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 borramos el pod que tenemos y creamos este nuevo veamos lo que pasa:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2021/01/Captura-de-pantalla-2021-01-09-a-las-14.22.34.png","alt":"Captura-de-pantalla-2021-01-09-a-las-14.22.34"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Nuestro pod se queda con un estado pending permanente, y si vemos la descripción del pod nos indicara el estado y la información de porque no se esta ejecutando, en este caso por falta de memoria"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2021/01/Captura-de-pantalla-2021-01-09-a-las-14.23.42.png","alt":"Captura-de-pantalla-2021-01-09-a-las-14.23.42"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Como vemos con estas simples propiedades dentro de los pods podemos limitar o indicar los recursos que nuestro contenedor o pod usará (con requests) y la cantidad de hardware que queremos que use como máximo (con limits)."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Y hasta aquí lo referente a lo básico de sobre los recursos de nuestros pods, recomiendo leer la documentación para poder hacer un selección más específica de los recursos que queremos que usen nuestros contenedores, sin mucho más nos vemos en el siguiente, un abrazooooooooo"}]},{"type":"text","value":"\n"},{"type":"comment","value":"kg-card-end: markdown"}],"data":{"quirksMode":false}},"tableOfContents":[]},"featureImageSharp":{"base":"learning-docker-and-k8s-by-practice.jpg","publicURL":"/static/8f47faaada0e810968ad97255d3f8852/learning-docker-and-k8s-by-practice.jpg","imageMeta":{"width":480,"height":270},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAGAAAAgMAAAAAAAAAAAAAAAAAAAIBAwX/xAAUAQEAAAAAAAAAAAAAAAAAAAAB/9oADAMBAAIQAxAAAAHXm8RRgf/EABkQAQACAwAAAAAAAAAAAAAAAAIBEQMQE//aAAgBAQABBQKWumR1Bmzv/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAFhABAQEAAAAAAAAAAAAAAAAAAREg/9oACAEBAAY/AoBNf//EABsQAAICAwEAAAAAAAAAAAAAAAERACEgQWFx/9oACAEBAAE/IRg7EmEqQL9qLjT2sP/aAAwDAQACAAMAAAAQ8M//xAAWEQADAAAAAAAAAAAAAAAAAAAQEWH/2gAIAQMBAT8QVH//xAAXEQEAAwAAAAAAAAAAAAAAAAABEBEx/9oACAECAQE/EBpyP//EABoQAQEBAQADAAAAAAAAAAAAAAERADEQIUH/2gAIAQEAAT8QZBiMqOD0uIouvYaltghUH6eEHoYA4Tf/2Q==","aspectRatio":1.7857142857142858,"src":"/static/8f47faaada0e810968ad97255d3f8852/e3903/learning-docker-and-k8s-by-practice.jpg","srcSet":"/static/8f47faaada0e810968ad97255d3f8852/477ba/learning-docker-and-k8s-by-practice.jpg 175w,\n/static/8f47faaada0e810968ad97255d3f8852/06776/learning-docker-and-k8s-by-practice.jpg 350w,\n/static/8f47faaada0e810968ad97255d3f8852/e3903/learning-docker-and-k8s-by-practice.jpg 480w","srcWebp":"/static/8f47faaada0e810968ad97255d3f8852/61162/learning-docker-and-k8s-by-practice.webp","srcSetWebp":"/static/8f47faaada0e810968ad97255d3f8852/9fca7/learning-docker-and-k8s-by-practice.webp 175w,\n/static/8f47faaada0e810968ad97255d3f8852/37a4e/learning-docker-and-k8s-by-practice.webp 350w,\n/static/8f47faaada0e810968ad97255d3f8852/61162/learning-docker-and-k8s-by-practice.webp 480w","sizes":"(max-width: 480px) 100vw, 480px"}}}},"next":{"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"}}}},"allGhostPost":{"edges":[{"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"}}}}},{"node":{"id":"Ghost__Post__5fa84de4a6c0f5058bff43db","title":"JS Algoritmos y estructuras de datos IV: Resolución de problemas-> Patrón Sliding Window","slug":"js-algoritmos-y-estructuras-de-datos-iii-patron-sliding-window","featured":false,"feature_image":"https://jlgarcia.fulldev.ninja/assets/images/2020/11/unordered-3192273_640-1.png","excerpt":"Este patrón como su nombre indica se basa en \"mover una ventana\", es decir,\ntratamos con los datos que estan dentro de esa ventana ignorando el resto, y\nvamos deslizando la ventana con los siguientes datos.\nVeamoslo con un ejemplo. Dentro de un array queremos obtener la suma mayor entre\n\"n\" de esos números consecutivos, es decir, si por ejemplo queremos saber cual\nes la suma mayor de 2 números consecutivos de este array:\n\n[1,4,2,6,3,9]\n\n\nTendremos que sumar:\n\n * 1 + 4\n * 4 + 2\n * 2 + 6\n * 6 + 3\n","custom_excerpt":null,"visibility":"public","created_at_pretty":"8 Nov 2020","published_at_pretty":"24 Nov 2020","updated_at_pretty":"19 Jan 2021","created_at":"2020-11-08T20:58:28.000+01:00","published_at":"2020-11-24T10:03:00.000+01:00","updated_at":"2021-01-19T21:09:17.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":"Este patrón como su nombre indica se basa en \"mover una ventana\", es decir,\ntratamos con los datos que estan dentro de esa ventana ignorando el resto, y\nvamos deslizando la ventana con los siguientes datos.\nVeamoslo con un ejemplo. Dentro de un array queremos obtener la suma mayor entre\n\"n\" de esos números consecutivos, es decir, si por ejemplo queremos saber cual\nes la suma mayor de 2 números consecutivos de este array:\n\n[1,4,2,6,3,9]\n\n\nTendremos que sumar:\n\n * 1 + 4\n * 4 + 2\n * 2 + 6\n * 6 + 3\n * 3 + 9\n\nPor eso he comentado que es como mover una ventana o una caja donde solo entran\n2 números y sumamos cada vez que cambia uno de los números.\n\nVeamos el posible acercamiento mas habitual o sencillo (el que solemos hacer\nprimero) aunque sería el más lento\n\n// arr: el array a comprobar\n// num: número de elementos en el subarray, de cuantos números queremos realizar el cálculo\nfunction maxSubarraySum (arr, num){\n    if (num > arr.length) return null;\n    \n    var max = -Infinity;\n    for(let i = 0; i < arr.length - num + 1; i++){\n        temp = 0;\n        for (let j = 0; j < num; j++){\n            temp += arr[i+j];\n        }\n        if (temp > max) {\n            max = temp;\n        }\n    }\n    return max;\n}\n\n\nComo vemos tenemos un \"nested loop\", y lo que hacemos es recorrer cada número en\nel primer loop y en el segundo sumamos los \"n\" números siguientes.\n\nEs relativamente fácil pero tenemos una complejidad temporal de O(n^2)\n\nAhora veamos como sería usando el Sliding Pattern\n\nfunction maxSubarraySum (arr, num){\n    let maxSum = 0;\n    let tempSum = 0;\n\n    if (arr.length < num) return null;\n\n    for (let i = 0; i < num; i++){\n        maxSum += arr[i];\n    }\n\n    tempSum = maxSum;\n\n    for (let i = num; i < arr.length; i++){\n        const leftLeg = arr[i - num];\n        const rightLeg = arr[i];\n        tempSum = tempSum - leftLeg + rigthLeg;  \n        maxSum = Math.max(tempSum, maxSum);\n    }\n\n    return maxSum;\n}\n\n\nEsto ya tiene algo más de \"chicha\", así que vayamos por partes\n\nfor (let i = 0; i < num; i++){\n   maxSum += arr[i];\n}\n tempSum = maxSum;\n\n\nSumamos los números que estarían inicialmente en la ventana, es decir desde \"n\"\nhasta 0 y lo establecemos en una variable que usaremos de comodín para ir\nmoviéndonos (tempSum)\n\n for (let i = num; i < arr.length; i++){\n     const leftLeg = arr[i - num];\n     const rightLeg = arr[i];\n     tempSum = tempSum - leftLeg + rigthLeg;   \n     maxSum = Math.max(tempSum, maxSum);\n }\n\n\nA continuación recorremos empezando por \"n\", es decir, después de sumar los \"n\"\nprimeros números, y el paso sería elimino el primero y añado el siguiente, (para\nclarificar con el ejemplo de la ventana he creado leftLeg como limite o pata\nizquierda de la ventana y rightLeg como el derecho ) siendo más específico lo\nque hacemos es restarle a tempSum el primer número dentro de nuestra \"ventana o\ncajón\", que seria leftLeg y le añadimos el siguiente que esté fuera, es decir \nrightLef. Y vamos comparando con el valor anterior y metiendo el mayor dentro de\nla variable maxTemp\n\nSiguiendo con el ejemplo de antes con este array, usando 2 valores consecutivos:\n\n[1,4,2,6,3,9]\n\n\nLos pasos serían:\n\n * En el primer loop, se suman los 2 primeros, con un resultado de 5 y se asigna\n   a la variable tempSum.\n * En el segundo loop se le resta a tempSum el 1, se le suma 2, lo que nos daría\n   6 y así sucesivamente\n * 6 - 4 + 6\n * 8 - 2 + 3\n * 9 - 6 + 9\n * Lo que nos daría 12\n\nOtro ejemplo algo más complicado.\nEn este caso la idea es encontrar el mínimo número de elementos necesarios del\narray que su suma sea igual o superior al número dado. Veamoslo con números\nprimero, tenemos este array:\n\n[2,1,6,5,4]\n\n\nY queremos saber cual es la menor cantidad de números de ese array que su suma\nsea igual o mayor que 9. En este caso serian necesarios 2 números (5+4).\n\nAntes de ver el ejemplo, os cuento lo que haremos:\n\n 1. En este caso empezaremos a sumar desde 0, creando nosotros la ventana, hasta\n    que la suma sea mayor o igual que el número que buscamos.\n 2. Cuando la suma sea mayor o igual veremos cuantos números hemos necesitado,\n    lo apuntaremos y empezaremos a mover la ventana (recordar restando el primer\n    número y sumando el siguiente)\n\nfunction minSubArrayLen(nums, sum){\n    let total = 0;\n    let start= 0;\n    let end = 0;\n\n    let minLen = Infinity;\n\n    while (start < nums.length) {\n        //Si la ventana actual no es mayor o igual que el número dado movemos la ventana a la derecha, es decir ampliamos la ventana\n        if (total < sum && end < nums.length){\n            total += nums[end];\n            end++;\n        } \n        //Si la ventana actual suma al menos la suma dada entonces podemos reducir la ventana\n        else if(total >= sum){\n            minLen = Math.min(minLen, end - start);\n            total -= nums[start];\n            start++;\n        } //Si el total actual es menor que lo que necesitamos pero hemos llegado al final, necesitamos el break para no un infinite loop\n        else {\n            break;\n        }\n    }\n\n    return minLen === Infinity ? 0 : minLen;\n    \n}\n\n\nOtro ejemplo más\nEn este caso queremos contar los carácteres del substring mas largo con\ncarácteres distintos, es decir, buscamos un substring sin que se repita ninguna\nletra. Aquí usaremos una mezcla entre el frequency counter y el sliding pattern.\nBásicamente iremos anotando las letras por las que pasamos e ir moviendo la\nwindow según se repitan\n\nfunction findLongestSubstring(str) {\n  let longest = 0;\n  let seen = {};\n  let start = 0;\n \n  for (let i = 0; i < str.length; i++) {\n\t\tlet char = str[i];\n    //Comprobamos si ya lo tenemos, y si existe, nuestro start seria el que tenemos anotado ya\n    if (seen[char]) {\n\t\t\tstart = Math.max(start, seen[char]);\n    }\n\t\t// Sumamos uno para tener en cuenta el caracter actual\n    longest = Math.max(longest, i - start + 1);\n\t\t// guardamos el índice con el siguiente carácter si se repite no contarlo, el nuevo esta dentro\n\t\t// de la ventana\n\t\tseen[char] = i + 1;\n  }\n  return longest;\n}\n\n\nEste ejemplo es algo más díficil de entender, creo que sobretodo el moviento de\nla ventana, por explicarlo un poco más supongamos que queremos saber la cantidad\nde caracteres máximo consecutivo donde no se repite ningún caracter de la\npalabra ninja (como no...), el resultado sería 4 pero veamos un poco el flujo\nhasta que cambia (tengamos en cuenta que i y start son las \"patas\" de la\nventana):\n\n * Empieza siendo i 0 por lo que empezamos con la n, como no tenemos nada\n   guardado todavía dentro de seen la variable start se queda con 0, longest \n   sería 1 (tanto i como start son 0) y se guardaría seen.n = 1\n * A continuación la i del index es 1, lo que hace que la siguiente letra sea la \n   i. No existe todavía dentro de seen por lo que start todavía seguiría siendo\n   0, longest pasaría a ser 2 (i es 1 y start 0) y guardamos seen.i = 2\n * En la siguiente iteración la i del index es 2, por lo que la siguiente letra\n   es n. En este caso si que tenemos coincidencia dentro seen por lo que start \n   pasaría a ser 1. Aquí es donde está la parte algo más complicada de ver al\n   principio, este paso es el porqué de guardar cada letra con un +1 dentro de \n   seen. Para explicarlo pensemos en el concepto de la ventana, antes de pasar\n   por la modificación del start tenemos que el borde izquierdo (la posición\n   actual del start) esta en la posición 0 y el borde derecho (la i) está en la\n   posición 2, al encontrar coincidencía lo que tenemos que hacer es mover la\n   posición del borde izquierdo para sacar la n de nuestro rango de la ventana\n   por lo que para sacarla sería mover la posición actual del borde izquierdo a \n   n + 1, es decir, movernos al siguiente carácter. Nuestra ventana ahora pasa\n   de estar en nin a in. Hemos movido el start de 0 a 1 por lo que en este caso\n   si la i es 2 entonces longest sigue siendo 2 y ahora como ya existe la n \n   dentro seen pasamos a tener seen.n = 3\n * Ahora la i del index es 3, por lo que la siguiente letra es j, como no hemos\n   pasado por ninguna nuestro start no cambia sigue en 1, longest ahora pasaría\n   a ser 3 (i es 3, start es 1) y guardariamos seen.j = 4\n * Por último la i del index es 4, por lo que ya estariamos en la última letra\n   que es la a, como no tenemos ninguna start sigue siendo 1, longest ahora\n   pasaría a ser 4 (i es 4 y start es 1) y por último se guardaría seen.a = 5\n\nEn este punto terminaría la ejecución y nos devolvería longest que sería 4, es\ndecir, inja. En este ejemplo lo más importante es ver como se mueve la ventana\nrealmente, que lo que hace es ir creciendo hasta que encuentra una repetición y\ncoloca su start a continuación de la repetición para comenzar de nuevo sin\nincluir ese carácter.\n\nCreo que más o menos con estos ejemplos se entiende cual es el funcionamiento de\neste patrón de resolución de problemas que puede ser bastante útil si queremos\nsacar y comparar información entre elementos dentro de un mismo array.\n\nY hasta aquí este post nos vemos en el siguienteeeee, un abrazooooor","html":"<!--kg-card-begin: markdown--><p>Este patrón como su nombre indica se basa en &quot;<em>mover una ventana</em>&quot;, es decir, tratamos con los datos que estan dentro de esa ventana ignorando el resto, y vamos deslizando la ventana con los siguientes datos.<br>\nVeamoslo con un ejemplo. Dentro de un array queremos obtener la suma mayor entre &quot;n&quot; de esos números consecutivos, es decir, si por ejemplo queremos saber cual es la suma mayor de 2 números consecutivos de este array:</p>\n<pre><code class=\"language-javascript\">[1,4,2,6,3,9]\n</code></pre>\n<p>Tendremos que sumar:</p>\n<ul>\n<li>1 + 4</li>\n<li>4 + 2</li>\n<li>2 + 6</li>\n<li>6 + 3</li>\n<li>3 + 9</li>\n</ul>\n<p>Por eso he comentado que es como mover una ventana o una caja donde solo entran 2 números y sumamos cada vez que cambia uno de los números.</p>\n<p>Veamos el posible acercamiento mas habitual o sencillo (el que solemos hacer primero) aunque sería el más lento</p>\n<pre><code class=\"language-javascript\">// arr: el array a comprobar\n// num: número de elementos en el subarray, de cuantos números queremos realizar el cálculo\nfunction maxSubarraySum (arr, num){\n    if (num &gt; arr.length) return null;\n    \n    var max = -Infinity;\n    for(let i = 0; i &lt; arr.length - num + 1; i++){\n        temp = 0;\n        for (let j = 0; j &lt; num; j++){\n            temp += arr[i+j];\n        }\n        if (temp &gt; max) {\n            max = temp;\n        }\n    }\n    return max;\n}\n</code></pre>\n<p>Como vemos tenemos un &quot;nested loop&quot;, y lo que hacemos es recorrer cada número en el primer loop y en el segundo sumamos los &quot;n&quot; números siguientes.</p>\n<p>Es relativamente fácil pero tenemos una complejidad temporal de <strong>O(n^2)</strong></p>\n<p>Ahora veamos como sería usando el <strong>Sliding Pattern</strong></p>\n<pre><code class=\"language-javascript\">function maxSubarraySum (arr, num){\n    let maxSum = 0;\n    let tempSum = 0;\n\n    if (arr.length &lt; num) return null;\n\n    for (let i = 0; i &lt; num; i++){\n        maxSum += arr[i];\n    }\n\n    tempSum = maxSum;\n\n    for (let i = num; i &lt; arr.length; i++){\n        const leftLeg = arr[i - num];\n        const rightLeg = arr[i];\n        tempSum = tempSum - leftLeg + rigthLeg;  \n        maxSum = Math.max(tempSum, maxSum);\n    }\n\n    return maxSum;\n}\n</code></pre>\n<p>Esto ya tiene algo más de <em>&quot;chicha&quot;</em>, así que vayamos por partes</p>\n<pre><code class=\"language-javascript\">for (let i = 0; i &lt; num; i++){\n   maxSum += arr[i];\n}\n tempSum = maxSum;\n</code></pre>\n<p>Sumamos los números que estarían inicialmente en la <em>ventana</em>, es decir desde &quot;n&quot; hasta 0 y lo establecemos en una variable que usaremos de comodín para ir moviéndonos (<em>tempSum</em>)</p>\n<pre><code class=\"language-javascript\"> for (let i = num; i &lt; arr.length; i++){\n     const leftLeg = arr[i - num];\n     const rightLeg = arr[i];\n     tempSum = tempSum - leftLeg + rigthLeg;   \n     maxSum = Math.max(tempSum, maxSum);\n }\n</code></pre>\n<p>A continuación recorremos empezando por &quot;n&quot;, es decir, después de sumar los &quot;n&quot; primeros números, y el paso sería elimino el primero y añado el siguiente, (para clarificar con el ejemplo de la ventana he creado <em>leftLeg</em> como limite o pata izquierda de la ventana y <em>rightLeg</em> como el derecho ) siendo más específico lo que hacemos es restarle a <em>tempSum</em> el primer número dentro de nuestra &quot;ventana o cajón&quot;, que seria <em>leftLeg</em> y le añadimos el siguiente que esté fuera, es decir <em>rightLef</em>. Y vamos comparando con el valor anterior y metiendo el mayor dentro de la variable <strong>maxTemp</strong></p>\n<p>Siguiendo con el ejemplo de antes con este array, usando 2 valores consecutivos:</p>\n<pre><code class=\"language-javascript\">[1,4,2,6,3,9]\n</code></pre>\n<p>Los pasos serían:</p>\n<ul>\n<li>En el primer loop, se suman los 2 primeros, con un resultado de 5 y se asigna a la variable tempSum.</li>\n<li>En el segundo loop se le resta a tempSum el 1, se le suma 2, lo que nos daría 6 y así sucesivamente</li>\n<li>6 - 4 + 6</li>\n<li>8 - 2 + 3</li>\n<li>9 - 6 + 9</li>\n<li>Lo que nos daría 12</li>\n</ul>\n<h4 id=\"otroejemploalgomscomplicado\">Otro ejemplo algo más complicado.</h4>\n<p>En este caso la idea es encontrar el mínimo número de elementos necesarios del array que su suma sea igual o superior al número dado. Veamoslo con números primero, tenemos este array:</p>\n<pre><code class=\"language-javascript\">[2,1,6,5,4]\n</code></pre>\n<p>Y queremos saber cual es la menor cantidad de números de ese array que su suma sea igual o mayor que <strong>9</strong>. En este caso serian necesarios 2 números (5+4).</p>\n<p>Antes de ver el ejemplo, os cuento lo que haremos:</p>\n<ol>\n<li>En este caso empezaremos a sumar desde 0, creando nosotros la ventana, hasta que la suma sea mayor o igual que el número que buscamos.</li>\n<li>Cuando la suma sea mayor o igual veremos cuantos números hemos necesitado, lo apuntaremos y empezaremos a mover la ventana (recordar restando el primer número y sumando el siguiente)</li>\n</ol>\n<pre><code class=\"language-javascript\">function minSubArrayLen(nums, sum){\n    let total = 0;\n    let start= 0;\n    let end = 0;\n\n    let minLen = Infinity;\n\n    while (start &lt; nums.length) {\n        //Si la ventana actual no es mayor o igual que el número dado movemos la ventana a la derecha, es decir ampliamos la ventana\n        if (total &lt; sum &amp;&amp; end &lt; nums.length){\n            total += nums[end];\n            end++;\n        } \n        //Si la ventana actual suma al menos la suma dada entonces podemos reducir la ventana\n        else if(total &gt;= sum){\n            minLen = Math.min(minLen, end - start);\n            total -= nums[start];\n            start++;\n        } //Si el total actual es menor que lo que necesitamos pero hemos llegado al final, necesitamos el break para no un infinite loop\n        else {\n            break;\n        }\n    }\n\n    return minLen === Infinity ? 0 : minLen;\n    \n}\n</code></pre>\n<h4 id=\"otroejemploms\">Otro ejemplo más</h4>\n<p>En este caso queremos contar los carácteres del substring mas largo con carácteres distintos, es decir, buscamos un substring sin que se repita ninguna letra. Aquí usaremos una mezcla entre el <strong>frequency counter y el sliding pattern</strong>. Básicamente iremos anotando las letras por las que pasamos e ir moviendo la window según se repitan</p>\n<pre><code class=\"language-javascript\">function findLongestSubstring(str) {\n  let longest = 0;\n  let seen = {};\n  let start = 0;\n \n  for (let i = 0; i &lt; str.length; i++) {\n\t\tlet char = str[i];\n    //Comprobamos si ya lo tenemos, y si existe, nuestro start seria el que tenemos anotado ya\n    if (seen[char]) {\n\t\t\tstart = Math.max(start, seen[char]);\n    }\n\t\t// Sumamos uno para tener en cuenta el caracter actual\n    longest = Math.max(longest, i - start + 1);\n\t\t// guardamos el índice con el siguiente carácter si se repite no contarlo, el nuevo esta dentro\n\t\t// de la ventana\n\t\tseen[char] = i + 1;\n  }\n  return longest;\n}\n</code></pre>\n<p>Este ejemplo es algo más díficil de entender, creo que sobretodo el moviento de la ventana, por explicarlo un poco más supongamos que queremos saber la cantidad de caracteres máximo consecutivo donde no se repite ningún caracter de la palabra <em>ninja</em> (como no...), el resultado sería 4 pero veamos un poco el flujo hasta que cambia (tengamos en cuenta que <em>i</em> y <em>start</em> son las &quot;patas&quot; de la ventana):</p>\n<ul>\n<li>Empieza siendo <em>i</em> 0 por lo que empezamos con la <em>n</em>, como no tenemos nada guardado todavía dentro de <em>seen</em> la variable <em>start</em> se queda con 0, <em>longest</em> sería 1 (tanto i como start son 0) y se guardaría <em>seen.n = 1</em></li>\n<li>A continuación la <em>i</em> del index es 1, lo que hace que la siguiente letra sea la <em>i</em>. No existe todavía dentro de <em>seen</em> por lo que <em>start</em> todavía seguiría siendo 0, <em>longest</em> pasaría a ser 2 (<em>i</em> es 1 y <em>start</em> 0) y guardamos <em>seen.i = 2</em></li>\n<li>En la siguiente iteración la <em>i</em> del index es 2, por lo que la siguiente letra es <em>n</em>. En este caso si que tenemos coincidencia dentro <em>seen</em> por lo que <em>start</em> pasaría a ser 1. Aquí es donde está la parte algo más complicada de ver al principio, este paso es el porqué de guardar cada letra con un +1 dentro de <em>seen</em>. Para explicarlo pensemos en el concepto de la ventana, antes de pasar por la modificación del <em>start</em> tenemos que el borde izquierdo (la posición actual del <em>start</em>) esta en la posición 0 y el borde derecho (la <em>i</em>) está en la posición 2, al encontrar coincidencía lo que tenemos que hacer es mover la posición del borde izquierdo para sacar la <em>n</em> de nuestro rango de la ventana por lo que para sacarla sería mover la posición actual del borde izquierdo a <em>n</em> + 1, es decir, movernos al siguiente carácter. Nuestra ventana ahora pasa de estar en <em>nin</em> a <em>in</em>. Hemos movido el <em>start</em> de 0 a 1 por lo que en este caso si la <em>i</em> es 2 entonces <em>longest</em> sigue siendo 2 y ahora como ya existe la <em>n</em> dentro <em>seen</em> pasamos a tener <em>seen.n = 3</em></li>\n<li>Ahora la <em>i</em> del index es 3, por lo que la siguiente letra es <em>j</em>, como no hemos pasado por ninguna nuestro <em>start</em> no cambia sigue en 1, <em>longest</em> ahora pasaría a ser 3 (<em>i</em> es 3, <em>start</em> es 1) y guardariamos <em>seen.j = 4</em></li>\n<li>Por último la <em>i</em> del index es 4, por lo que ya estariamos en la última letra que es la <em>a</em>, como no tenemos ninguna <em>start</em> sigue siendo 1, <em>longest</em> ahora pasaría a ser 4 (<em>i</em> es 4 y <em>start</em> es 1) y por último se guardaría <em>seen.a = 5</em></li>\n</ul>\n<p>En este punto terminaría la ejecución y nos devolvería <em>longest</em> que sería 4, es decir, <em>inja</em>. En este ejemplo lo más importante es ver como se mueve la ventana realmente, que lo que hace es ir creciendo hasta que encuentra una repetición y coloca su <em>start</em> a continuación de la repetición para comenzar de nuevo sin incluir ese carácter.</p>\n<p>Creo que más o menos con estos ejemplos se entiende cual es el funcionamiento de este patrón de resolución de problemas que puede ser bastante útil si queremos sacar y comparar información entre elementos dentro de un mismo array.</p>\n<p>Y hasta aquí este post nos vemos en el siguienteeeee, un abrazooooor</p>\n<!--kg-card-end: markdown-->","url":"https://jlgarcia.fulldev.ninja/js-algoritmos-y-estructuras-de-datos-iii-patron-sliding-window/","canonical_url":null,"uuid":"bf31d3c5-051a-49d5-bfe4-42ce07038b63","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"5fa84de4a6c0f5058bff43db","reading_time":6,"send_email_when_published":false,"email_subject":null,"childHtmlRehype":{"html":"<!--kg-card-begin: markdown--><p>Este patrón como su nombre indica se basa en \"<em>mover una ventana</em>\", es decir, tratamos con los datos que estan dentro de esa ventana ignorando el resto, y vamos deslizando la ventana con los siguientes datos.<br>\nVeamoslo con un ejemplo. Dentro de un array queremos obtener la suma mayor entre \"n\" de esos números consecutivos, es decir, si por ejemplo queremos saber cual es la suma mayor de 2 números consecutivos de este array:</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 punctuation\">[</span><span class=\"token number\">1</span><span class=\"token punctuation\">,</span><span class=\"token number\">4</span><span class=\"token punctuation\">,</span><span class=\"token number\">2</span><span class=\"token punctuation\">,</span><span class=\"token number\">6</span><span class=\"token punctuation\">,</span><span class=\"token number\">3</span><span class=\"token punctuation\">,</span><span class=\"token number\">9</span><span class=\"token punctuation\">]</span>\n</code></pre></div>\n<p>Tendremos que sumar:</p>\n<ul>\n<li>1 + 4</li>\n<li>4 + 2</li>\n<li>2 + 6</li>\n<li>6 + 3</li>\n<li>3 + 9</li>\n</ul>\n<p>Por eso he comentado que es como mover una ventana o una caja donde solo entran 2 números y sumamos cada vez que cambia uno de los números.</p>\n<p>Veamos el posible acercamiento mas habitual o sencillo (el que solemos hacer primero) aunque sería el más lento</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 comment\">// arr: el array a comprobar</span>\n<span class=\"token comment\">// num: número de elementos en el subarray, de cuantos números queremos realizar el cálculo</span>\n<span class=\"token keyword\">function</span> <span class=\"token function\">maxSubarraySum</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">arr<span class=\"token punctuation\">,</span> num</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>num <span class=\"token operator\">></span> arr<span class=\"token punctuation\">.</span>length<span class=\"token punctuation\">)</span> <span class=\"token keyword\">return</span> <span class=\"token keyword\">null</span><span class=\"token punctuation\">;</span>\n    \n    <span class=\"token keyword\">var</span> max <span class=\"token operator\">=</span> <span class=\"token operator\">-</span><span class=\"token number\">Infinity</span><span class=\"token punctuation\">;</span>\n    <span class=\"token keyword\">for</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">let</span> i <span class=\"token operator\">=</span> <span class=\"token number\">0</span><span class=\"token punctuation\">;</span> i <span class=\"token operator\">&#x3C;</span> arr<span class=\"token punctuation\">.</span>length <span class=\"token operator\">-</span> num <span class=\"token operator\">+</span> <span class=\"token number\">1</span><span class=\"token punctuation\">;</span> i<span class=\"token operator\">++</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span>\n        temp <span class=\"token operator\">=</span> <span class=\"token number\">0</span><span class=\"token punctuation\">;</span>\n        <span class=\"token keyword\">for</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">let</span> j <span class=\"token operator\">=</span> <span class=\"token number\">0</span><span class=\"token punctuation\">;</span> j <span class=\"token operator\">&#x3C;</span> num<span class=\"token punctuation\">;</span> j<span class=\"token operator\">++</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span>\n            temp <span class=\"token operator\">+=</span> arr<span class=\"token punctuation\">[</span>i<span class=\"token operator\">+</span>j<span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n        <span class=\"token punctuation\">}</span>\n        <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>temp <span class=\"token operator\">></span> max<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n            max <span class=\"token operator\">=</span> temp<span class=\"token punctuation\">;</span>\n        <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span>\n    <span class=\"token keyword\">return</span> max<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div>\n<p>Como vemos tenemos un \"nested loop\", y lo que hacemos es recorrer cada número en el primer loop y en el segundo sumamos los \"n\" números siguientes.</p>\n<p>Es relativamente fácil pero tenemos una complejidad temporal de <strong>O(n^2)</strong></p>\n<p>Ahora veamos como sería usando el <strong>Sliding Pattern</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\">maxSubarraySum</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">arr<span class=\"token punctuation\">,</span> num</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">let</span> maxSum <span class=\"token operator\">=</span> <span class=\"token number\">0</span><span class=\"token punctuation\">;</span>\n    <span class=\"token keyword\">let</span> tempSum <span class=\"token operator\">=</span> <span class=\"token number\">0</span><span class=\"token punctuation\">;</span>\n\n    <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>arr<span class=\"token punctuation\">.</span>length <span class=\"token operator\">&#x3C;</span> num<span class=\"token punctuation\">)</span> <span class=\"token keyword\">return</span> <span class=\"token keyword\">null</span><span class=\"token punctuation\">;</span>\n\n    <span class=\"token keyword\">for</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">let</span> i <span class=\"token operator\">=</span> <span class=\"token number\">0</span><span class=\"token punctuation\">;</span> i <span class=\"token operator\">&#x3C;</span> num<span class=\"token punctuation\">;</span> i<span class=\"token operator\">++</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span>\n        maxSum <span class=\"token operator\">+=</span> arr<span class=\"token punctuation\">[</span>i<span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n\n    tempSum <span class=\"token operator\">=</span> maxSum<span class=\"token punctuation\">;</span>\n\n    <span class=\"token keyword\">for</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">let</span> i <span class=\"token operator\">=</span> num<span class=\"token punctuation\">;</span> i <span class=\"token operator\">&#x3C;</span> arr<span class=\"token punctuation\">.</span>length<span class=\"token punctuation\">;</span> i<span class=\"token operator\">++</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span>\n        <span class=\"token keyword\">const</span> leftLeg <span class=\"token operator\">=</span> arr<span class=\"token punctuation\">[</span>i <span class=\"token operator\">-</span> num<span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n        <span class=\"token keyword\">const</span> rightLeg <span class=\"token operator\">=</span> arr<span class=\"token punctuation\">[</span>i<span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n        tempSum <span class=\"token operator\">=</span> tempSum <span class=\"token operator\">-</span> leftLeg <span class=\"token operator\">+</span> rigthLeg<span class=\"token punctuation\">;</span>  \n        maxSum <span class=\"token operator\">=</span> Math<span class=\"token punctuation\">.</span><span class=\"token function\">max</span><span class=\"token punctuation\">(</span>tempSum<span class=\"token punctuation\">,</span> maxSum<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n\n    <span class=\"token keyword\">return</span> maxSum<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div>\n<p>Esto ya tiene algo más de <em>\"chicha\"</em>, así que vayamos por partes</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\">for</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">let</span> i <span class=\"token operator\">=</span> <span class=\"token number\">0</span><span class=\"token punctuation\">;</span> i <span class=\"token operator\">&#x3C;</span> num<span class=\"token punctuation\">;</span> i<span class=\"token operator\">++</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span>\n   maxSum <span class=\"token operator\">+=</span> arr<span class=\"token punctuation\">[</span>i<span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n tempSum <span class=\"token operator\">=</span> maxSum<span class=\"token punctuation\">;</span>\n</code></pre></div>\n<p>Sumamos los números que estarían inicialmente en la <em>ventana</em>, es decir desde \"n\" hasta 0 y lo establecemos en una variable que usaremos de comodín para ir moviéndonos (<em>tempSum</em>)</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\">for</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">let</span> i <span class=\"token operator\">=</span> num<span class=\"token punctuation\">;</span> i <span class=\"token operator\">&#x3C;</span> arr<span class=\"token punctuation\">.</span>length<span class=\"token punctuation\">;</span> i<span class=\"token operator\">++</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span>\n     <span class=\"token keyword\">const</span> leftLeg <span class=\"token operator\">=</span> arr<span class=\"token punctuation\">[</span>i <span class=\"token operator\">-</span> num<span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n     <span class=\"token keyword\">const</span> rightLeg <span class=\"token operator\">=</span> arr<span class=\"token punctuation\">[</span>i<span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n     tempSum <span class=\"token operator\">=</span> tempSum <span class=\"token operator\">-</span> leftLeg <span class=\"token operator\">+</span> rigthLeg<span class=\"token punctuation\">;</span>   \n     maxSum <span class=\"token operator\">=</span> Math<span class=\"token punctuation\">.</span><span class=\"token function\">max</span><span class=\"token punctuation\">(</span>tempSum<span class=\"token punctuation\">,</span> maxSum<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n <span class=\"token punctuation\">}</span>\n</code></pre></div>\n<p>A continuación recorremos empezando por \"n\", es decir, después de sumar los \"n\" primeros números, y el paso sería elimino el primero y añado el siguiente, (para clarificar con el ejemplo de la ventana he creado <em>leftLeg</em> como limite o pata izquierda de la ventana y <em>rightLeg</em> como el derecho ) siendo más específico lo que hacemos es restarle a <em>tempSum</em> el primer número dentro de nuestra \"ventana o cajón\", que seria <em>leftLeg</em> y le añadimos el siguiente que esté fuera, es decir <em>rightLef</em>. Y vamos comparando con el valor anterior y metiendo el mayor dentro de la variable <strong>maxTemp</strong></p>\n<p>Siguiendo con el ejemplo de antes con este array, usando 2 valores consecutivos:</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 punctuation\">[</span><span class=\"token number\">1</span><span class=\"token punctuation\">,</span><span class=\"token number\">4</span><span class=\"token punctuation\">,</span><span class=\"token number\">2</span><span class=\"token punctuation\">,</span><span class=\"token number\">6</span><span class=\"token punctuation\">,</span><span class=\"token number\">3</span><span class=\"token punctuation\">,</span><span class=\"token number\">9</span><span class=\"token punctuation\">]</span>\n</code></pre></div>\n<p>Los pasos serían:</p>\n<ul>\n<li>En el primer loop, se suman los 2 primeros, con un resultado de 5 y se asigna a la variable tempSum.</li>\n<li>En el segundo loop se le resta a tempSum el 1, se le suma 2, lo que nos daría 6 y así sucesivamente</li>\n<li>6 - 4 + 6</li>\n<li>8 - 2 + 3</li>\n<li>9 - 6 + 9</li>\n<li>Lo que nos daría 12</li>\n</ul>\n<h4 id=\"otroejemploalgomscomplicado\">Otro ejemplo algo más complicado.</h4>\n<p>En este caso la idea es encontrar el mínimo número de elementos necesarios del array que su suma sea igual o superior al número dado. Veamoslo con números primero, tenemos este array:</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 punctuation\">[</span><span class=\"token number\">2</span><span class=\"token punctuation\">,</span><span class=\"token number\">1</span><span class=\"token punctuation\">,</span><span class=\"token number\">6</span><span class=\"token punctuation\">,</span><span class=\"token number\">5</span><span class=\"token punctuation\">,</span><span class=\"token number\">4</span><span class=\"token punctuation\">]</span>\n</code></pre></div>\n<p>Y queremos saber cual es la menor cantidad de números de ese array que su suma sea igual o mayor que <strong>9</strong>. En este caso serian necesarios 2 números (5+4).</p>\n<p>Antes de ver el ejemplo, os cuento lo que haremos:</p>\n<ol>\n<li>En este caso empezaremos a sumar desde 0, creando nosotros la ventana, hasta que la suma sea mayor o igual que el número que buscamos.</li>\n<li>Cuando la suma sea mayor o igual veremos cuantos números hemos necesitado, lo apuntaremos y empezaremos a mover la ventana (recordar restando el primer número y sumando el siguiente)</li>\n</ol>\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\">minSubArrayLen</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">nums<span class=\"token punctuation\">,</span> sum</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">let</span> total <span class=\"token operator\">=</span> <span class=\"token number\">0</span><span class=\"token punctuation\">;</span>\n    <span class=\"token keyword\">let</span> start<span class=\"token operator\">=</span> <span class=\"token number\">0</span><span class=\"token punctuation\">;</span>\n    <span class=\"token keyword\">let</span> end <span class=\"token operator\">=</span> <span class=\"token number\">0</span><span class=\"token punctuation\">;</span>\n\n    <span class=\"token keyword\">let</span> minLen <span class=\"token operator\">=</span> <span class=\"token number\">Infinity</span><span class=\"token punctuation\">;</span>\n\n    <span class=\"token keyword\">while</span> <span class=\"token punctuation\">(</span>start <span class=\"token operator\">&#x3C;</span> nums<span class=\"token punctuation\">.</span>length<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token comment\">//Si la ventana actual no es mayor o igual que el número dado movemos la ventana a la derecha, es decir ampliamos la ventana</span>\n        <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>total <span class=\"token operator\">&#x3C;</span> sum <span class=\"token operator\">&#x26;&#x26;</span> end <span class=\"token operator\">&#x3C;</span> nums<span class=\"token punctuation\">.</span>length<span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span>\n            total <span class=\"token operator\">+=</span> nums<span class=\"token punctuation\">[</span>end<span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n            end<span class=\"token operator\">++</span><span class=\"token punctuation\">;</span>\n        <span class=\"token punctuation\">}</span> \n        <span class=\"token comment\">//Si la ventana actual suma al menos la suma dada entonces podemos reducir la ventana</span>\n        <span class=\"token keyword\">else</span> <span class=\"token keyword\">if</span><span class=\"token punctuation\">(</span>total <span class=\"token operator\">>=</span> sum<span class=\"token punctuation\">)</span><span class=\"token punctuation\">{</span>\n            minLen <span class=\"token operator\">=</span> Math<span class=\"token punctuation\">.</span><span class=\"token function\">min</span><span class=\"token punctuation\">(</span>minLen<span class=\"token punctuation\">,</span> end <span class=\"token operator\">-</span> start<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n            total <span class=\"token operator\">-=</span> nums<span class=\"token punctuation\">[</span>start<span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n            start<span class=\"token operator\">++</span><span class=\"token punctuation\">;</span>\n        <span class=\"token punctuation\">}</span> <span class=\"token comment\">//Si el total actual es menor que lo que necesitamos pero hemos llegado al final, necesitamos el break para no un infinite loop</span>\n        <span class=\"token keyword\">else</span> <span class=\"token punctuation\">{</span>\n            <span class=\"token keyword\">break</span><span class=\"token punctuation\">;</span>\n        <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span>\n\n    <span class=\"token keyword\">return</span> minLen <span class=\"token operator\">===</span> <span class=\"token number\">Infinity</span> <span class=\"token operator\">?</span> <span class=\"token number\">0</span> <span class=\"token operator\">:</span> minLen<span class=\"token punctuation\">;</span>\n    \n<span class=\"token punctuation\">}</span>\n</code></pre></div>\n<h4 id=\"otroejemploms\">Otro ejemplo más</h4>\n<p>En este caso queremos contar los carácteres del substring mas largo con carácteres distintos, es decir, buscamos un substring sin que se repita ninguna letra. Aquí usaremos una mezcla entre el <strong>frequency counter y el sliding pattern</strong>. Básicamente iremos anotando las letras por las que pasamos e ir moviendo la window según se repitan</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\">findLongestSubstring</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">str</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">let</span> longest <span class=\"token operator\">=</span> <span class=\"token number\">0</span><span class=\"token punctuation\">;</span>\n  <span class=\"token keyword\">let</span> seen <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n  <span class=\"token keyword\">let</span> start <span class=\"token operator\">=</span> <span class=\"token number\">0</span><span class=\"token punctuation\">;</span>\n \n  <span class=\"token keyword\">for</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">let</span> i <span class=\"token operator\">=</span> <span class=\"token number\">0</span><span class=\"token punctuation\">;</span> i <span class=\"token operator\">&#x3C;</span> str<span class=\"token punctuation\">.</span>length<span class=\"token punctuation\">;</span> i<span class=\"token operator\">++</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n\t\t<span class=\"token keyword\">let</span> char <span class=\"token operator\">=</span> str<span class=\"token punctuation\">[</span>i<span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n    <span class=\"token comment\">//Comprobamos si ya lo tenemos, y si existe, nuestro start seria el que tenemos anotado ya</span>\n    <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>seen<span class=\"token punctuation\">[</span>char<span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n\t\t\tstart <span class=\"token operator\">=</span> Math<span class=\"token punctuation\">.</span><span class=\"token function\">max</span><span class=\"token punctuation\">(</span>start<span class=\"token punctuation\">,</span> seen<span class=\"token punctuation\">[</span>char<span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n\t\t<span class=\"token comment\">// Sumamos uno para tener en cuenta el caracter actual</span>\n    longest <span class=\"token operator\">=</span> Math<span class=\"token punctuation\">.</span><span class=\"token function\">max</span><span class=\"token punctuation\">(</span>longest<span class=\"token punctuation\">,</span> i <span class=\"token operator\">-</span> start <span class=\"token operator\">+</span> <span class=\"token number\">1</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\t\t<span class=\"token comment\">// guardamos el índice con el siguiente carácter si se repite no contarlo, el nuevo esta dentro</span>\n\t\t<span class=\"token comment\">// de la ventana</span>\n\t\tseen<span class=\"token punctuation\">[</span>char<span class=\"token punctuation\">]</span> <span class=\"token operator\">=</span> i <span class=\"token operator\">+</span> <span class=\"token number\">1</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n  <span class=\"token keyword\">return</span> longest<span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div>\n<p>Este ejemplo es algo más díficil de entender, creo que sobretodo el moviento de la ventana, por explicarlo un poco más supongamos que queremos saber la cantidad de caracteres máximo consecutivo donde no se repite ningún caracter de la palabra <em>ninja</em> (como no...), el resultado sería 4 pero veamos un poco el flujo hasta que cambia (tengamos en cuenta que <em>i</em> y <em>start</em> son las \"patas\" de la ventana):</p>\n<ul>\n<li>Empieza siendo <em>i</em> 0 por lo que empezamos con la <em>n</em>, como no tenemos nada guardado todavía dentro de <em>seen</em> la variable <em>start</em> se queda con 0, <em>longest</em> sería 1 (tanto i como start son 0) y se guardaría <em>seen.n = 1</em></li>\n<li>A continuación la <em>i</em> del index es 1, lo que hace que la siguiente letra sea la <em>i</em>. No existe todavía dentro de <em>seen</em> por lo que <em>start</em> todavía seguiría siendo 0, <em>longest</em> pasaría a ser 2 (<em>i</em> es 1 y <em>start</em> 0) y guardamos <em>seen.i = 2</em></li>\n<li>En la siguiente iteración la <em>i</em> del index es 2, por lo que la siguiente letra es <em>n</em>. En este caso si que tenemos coincidencia dentro <em>seen</em> por lo que <em>start</em> pasaría a ser 1. Aquí es donde está la parte algo más complicada de ver al principio, este paso es el porqué de guardar cada letra con un +1 dentro de <em>seen</em>. Para explicarlo pensemos en el concepto de la ventana, antes de pasar por la modificación del <em>start</em> tenemos que el borde izquierdo (la posición actual del <em>start</em>) esta en la posición 0 y el borde derecho (la <em>i</em>) está en la posición 2, al encontrar coincidencía lo que tenemos que hacer es mover la posición del borde izquierdo para sacar la <em>n</em> de nuestro rango de la ventana por lo que para sacarla sería mover la posición actual del borde izquierdo a <em>n</em> + 1, es decir, movernos al siguiente carácter. Nuestra ventana ahora pasa de estar en <em>nin</em> a <em>in</em>. Hemos movido el <em>start</em> de 0 a 1 por lo que en este caso si la <em>i</em> es 2 entonces <em>longest</em> sigue siendo 2 y ahora como ya existe la <em>n</em> dentro <em>seen</em> pasamos a tener <em>seen.n = 3</em></li>\n<li>Ahora la <em>i</em> del index es 3, por lo que la siguiente letra es <em>j</em>, como no hemos pasado por ninguna nuestro <em>start</em> no cambia sigue en 1, <em>longest</em> ahora pasaría a ser 3 (<em>i</em> es 3, <em>start</em> es 1) y guardariamos <em>seen.j = 4</em></li>\n<li>Por último la <em>i</em> del index es 4, por lo que ya estariamos en la última letra que es la <em>a</em>, como no tenemos ninguna <em>start</em> sigue siendo 1, <em>longest</em> ahora pasaría a ser 4 (<em>i</em> es 4 y <em>start</em> es 1) y por último se guardaría <em>seen.a = 5</em></li>\n</ul>\n<p>En este punto terminaría la ejecución y nos devolvería <em>longest</em> que sería 4, es decir, <em>inja</em>. En este ejemplo lo más importante es ver como se mueve la ventana realmente, que lo que hace es ir creciendo hasta que encuentra una repetición y coloca su <em>start</em> a continuación de la repetición para comenzar de nuevo sin incluir ese carácter.</p>\n<p>Creo que más o menos con estos ejemplos se entiende cual es el funcionamiento de este patrón de resolución de problemas que puede ser bastante útil si queremos sacar y comparar información entre elementos dentro de un mismo array.</p>\n<p>Y hasta aquí este post nos vemos en el siguienteeeee, un abrazooooor</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":"Este patrón como su nombre indica se basa en \""},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"mover una ventana"}]},{"type":"text","value":"\", es decir, tratamos con los datos que estan dentro de esa ventana ignorando el resto, y vamos deslizando la ventana con los siguientes datos."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nVeamoslo con un ejemplo. Dentro de un array queremos obtener la suma mayor entre \"n\" de esos números consecutivos, es decir, si por ejemplo queremos saber cual es la suma mayor de 2 números consecutivos de este array:"}]},{"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","punctuation"]},"children":[{"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":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"4"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"2"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"6"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"3"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"9"}]},{"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":"Tendremos que sumar:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"1 + 4"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"4 + 2"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"2 + 6"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"6 + 3"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"3 + 9"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Por eso he comentado que es como mover una ventana o una caja donde solo entran 2 números y sumamos cada vez que cambia uno de los números."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Veamos el posible acercamiento mas habitual o sencillo (el que solemos hacer primero) aunque sería el más lento"}]},{"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","comment"]},"children":[{"type":"text","value":"// arr: el array a comprobar"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// num: número de elementos en el subarray, de cuantos números queremos realizar el cálculo"}]},{"type":"text","value":"\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":"maxSubarraySum"}]},{"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":"arr"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" num"}]},{"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","keyword"]},"children":[{"type":"text","value":"if"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"num "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":" arr"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"length"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"null"}]},{"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":"var"}]},{"type":"text","value":" max "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"-"}]},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"Infinity"}]},{"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":"for"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"let"}]},{"type":"text","value":" i "},{"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":" i "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":" arr"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"length "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":" num "},{"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":" i"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"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":"\n        temp "},{"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":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"for"}]},{"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":"let"}]},{"type":"text","value":" j "},{"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":" j "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":" num"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":" j"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"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":"\n            temp "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"+="}]},{"type":"text","value":" arr"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"text","value":"i"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":"j"},{"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":"if"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"temp "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">"}]},{"type":"text","value":" max"},{"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            max "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" temp"},{"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","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":" max"},{"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":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Como vemos tenemos un \"nested loop\", y lo que hacemos es recorrer cada número en el primer loop y en el segundo sumamos los \"n\" números siguientes."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Es relativamente fácil pero tenemos una complejidad temporal de "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"O(n^2)"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Ahora veamos como sería usando el "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Sliding Pattern"}]}]},{"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":"maxSubarraySum"}]},{"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":"arr"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" num"}]},{"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","keyword"]},"children":[{"type":"text","value":"let"}]},{"type":"text","value":" maxSum "},{"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":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"let"}]},{"type":"text","value":" tempSum "},{"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":"\n\n    "},{"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":"arr"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"length "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":" num"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"null"}]},{"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":"for"}]},{"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":"let"}]},{"type":"text","value":" i "},{"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":" i "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":" num"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":" i"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"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":"\n        maxSum "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"+="}]},{"type":"text","value":" arr"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"text","value":"i"},{"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    tempSum "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" maxSum"},{"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":"for"}]},{"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":"let"}]},{"type":"text","value":" i "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" num"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":" i "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":" arr"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"length"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":" i"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"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":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" leftLeg "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" arr"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"text","value":"i "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":" num"},{"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","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" rightLeg "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" arr"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"text","value":"i"},{"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        tempSum "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" tempSum "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":" leftLeg "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" rigthLeg"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"  \n        maxSum "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" Math"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"max"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"tempSum"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" maxSum"},{"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    "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" maxSum"},{"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":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Esto ya tiene algo más de "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"\"chicha\""}]},{"type":"text","value":", así que vayamos por partes"}]},{"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":"for"}]},{"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":"let"}]},{"type":"text","value":" i "},{"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":" i "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":" num"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":" i"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"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":"\n   maxSum "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"+="}]},{"type":"text","value":" arr"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"text","value":"i"},{"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 tempSum "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" maxSum"},{"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":"Sumamos los números que estarían inicialmente en la "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"ventana"}]},{"type":"text","value":", es decir desde \"n\" hasta 0 y lo establecemos en una variable que usaremos de comodín para ir moviéndonos ("},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"tempSum"}]},{"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":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"for"}]},{"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":"let"}]},{"type":"text","value":" i "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" num"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":" i "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":" arr"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"length"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":" i"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"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":"\n     "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" leftLeg "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" arr"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"text","value":"i "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":" num"},{"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","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" rightLeg "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" arr"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"text","value":"i"},{"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     tempSum "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" tempSum "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":" leftLeg "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" rigthLeg"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"   \n     maxSum "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" Math"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"max"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"tempSum"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" maxSum"},{"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":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"A continuación recorremos empezando por \"n\", es decir, después de sumar los \"n\" primeros números, y el paso sería elimino el primero y añado el siguiente, (para clarificar con el ejemplo de la ventana he creado "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"leftLeg"}]},{"type":"text","value":" como limite o pata izquierda de la ventana y "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"rightLeg"}]},{"type":"text","value":" como el derecho ) siendo más específico lo que hacemos es restarle a "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"tempSum"}]},{"type":"text","value":" el primer número dentro de nuestra \"ventana o cajón\", que seria "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"leftLeg"}]},{"type":"text","value":" y le añadimos el siguiente que esté fuera, es decir "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"rightLef"}]},{"type":"text","value":". Y vamos comparando con el valor anterior y metiendo el mayor dentro de la variable "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"maxTemp"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Siguiendo con el ejemplo de antes con este array, usando 2 valores consecutivos:"}]},{"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","punctuation"]},"children":[{"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":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"4"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"2"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"6"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"3"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"9"}]},{"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":"Los pasos serían:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"En el primer loop, se suman los 2 primeros, con un resultado de 5 y se asigna a la variable tempSum."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"En el segundo loop se le resta a tempSum el 1, se le suma 2, lo que nos daría 6 y así sucesivamente"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"6 - 4 + 6"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"8 - 2 + 3"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"9 - 6 + 9"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Lo que nos daría 12"}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"otroejemploalgomscomplicado"},"children":[{"type":"text","value":"Otro ejemplo algo más complicado."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"En este caso la idea es encontrar el mínimo número de elementos necesarios del array que su suma sea igual o superior al número dado. Veamoslo con números primero, tenemos este array:"}]},{"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","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"2"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"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":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"6"}]},{"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","number"]},"children":[{"type":"text","value":"4"}]},{"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 queremos saber cual es la menor cantidad de números de ese array que su suma sea igual o mayor que "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"9"}]},{"type":"text","value":". En este caso serian necesarios 2 números (5+4)."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Antes de ver el ejemplo, os cuento lo que haremos:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ol","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"En este caso empezaremos a sumar desde 0, creando nosotros la ventana, hasta que la suma sea mayor o igual que el número que buscamos."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Cuando la suma sea mayor o igual veremos cuantos números hemos necesitado, lo apuntaremos y empezaremos a mover la ventana (recordar restando el primer número y sumando el siguiente)"}]},{"type":"text","value":"\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":"function"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"minSubArrayLen"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","parameter"]},"children":[{"type":"text","value":"nums"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" sum"}]},{"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","keyword"]},"children":[{"type":"text","value":"let"}]},{"type":"text","value":" total "},{"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":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"let"}]},{"type":"text","value":" start"},{"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":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"let"}]},{"type":"text","value":" end "},{"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":"\n\n    "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"let"}]},{"type":"text","value":" minLen "},{"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":"Infinity"}]},{"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":"while"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"start "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":" nums"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"length"},{"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        "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"//Si la ventana actual no es mayor o igual que el número dado movemos la ventana a la derecha, es decir ampliamos la ventana"}]},{"type":"text","value":"\n        "},{"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":"total "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":" sum "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"&&"}]},{"type":"text","value":" end "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":" nums"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"length"},{"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            total "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"+="}]},{"type":"text","value":" nums"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"text","value":"end"},{"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            end"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"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","comment"]},"children":[{"type":"text","value":"//Si la ventana actual suma al menos la suma dada entonces podemos reducir la ventana"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"else"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"if"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"total "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":">="}]},{"type":"text","value":" sum"},{"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            minLen "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" Math"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"min"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"minLen"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" end "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":" start"},{"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            total "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"-="}]},{"type":"text","value":" nums"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"text","value":"start"},{"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            start"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"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":" "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"//Si el total actual es menor que lo que necesitamos pero hemos llegado al final, necesitamos el break para no un infinite loop"}]},{"type":"text","value":"\n        "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"else"}]},{"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":"break"}]},{"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","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n\n    "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" minLen "},{"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":"Infinity"}]},{"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","number"]},"children":[{"type":"text","value":"0"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" minLen"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n    \n"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"}"}]},{"type":"text","value":"\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h4","properties":{"id":"otroejemploms"},"children":[{"type":"text","value":"Otro ejemplo más"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"En este caso queremos contar los carácteres del substring mas largo con carácteres distintos, es decir, buscamos un substring sin que se repita ninguna letra. Aquí usaremos una mezcla entre el "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"frequency counter y el sliding pattern"}]},{"type":"text","value":". Básicamente iremos anotando las letras por las que pasamos e ir moviendo la window según se repitan"}]},{"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":"findLongestSubstring"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","parameter"]},"children":[{"type":"text","value":"str"}]},{"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  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"let"}]},{"type":"text","value":" longest "},{"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":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"let"}]},{"type":"text","value":" seen "},{"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","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","keyword"]},"children":[{"type":"text","value":"let"}]},{"type":"text","value":" start "},{"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":"\n \n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"for"}]},{"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":"let"}]},{"type":"text","value":" i "},{"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":" i "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":" str"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"length"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":" i"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"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\t"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"let"}]},{"type":"text","value":" char "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" str"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"text","value":"i"},{"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","comment"]},"children":[{"type":"text","value":"//Comprobamos si ya lo tenemos, y si existe, nuestro start seria el que tenemos anotado ya"}]},{"type":"text","value":"\n    "},{"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":"seen"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"text","value":"char"},{"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\t\tstart "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" Math"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"max"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"start"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" seen"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"text","value":"char"},{"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":"\n    "},{"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","comment"]},"children":[{"type":"text","value":"// Sumamos uno para tener en cuenta el caracter actual"}]},{"type":"text","value":"\n    longest "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" Math"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"max"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"longest"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" i "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"-"}]},{"type":"text","value":" start "},{"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":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":";"}]},{"type":"text","value":"\n\t\t"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// guardamos el índice con el siguiente carácter si se repite no contarlo, el nuevo esta dentro"}]},{"type":"text","value":"\n\t\t"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// de la ventana"}]},{"type":"text","value":"\n\t\tseen"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"text","value":"char"},{"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":" i "},{"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  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" longest"},{"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":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Este ejemplo es algo más díficil de entender, creo que sobretodo el moviento de la ventana, por explicarlo un poco más supongamos que queremos saber la cantidad de caracteres máximo consecutivo donde no se repite ningún caracter de la palabra "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"ninja"}]},{"type":"text","value":" (como no...), el resultado sería 4 pero veamos un poco el flujo hasta que cambia (tengamos en cuenta que "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"i"}]},{"type":"text","value":" y "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"start"}]},{"type":"text","value":" son las \"patas\" de la ventana):"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Empieza siendo "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"i"}]},{"type":"text","value":" 0 por lo que empezamos con la "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"n"}]},{"type":"text","value":", como no tenemos nada guardado todavía dentro de "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"seen"}]},{"type":"text","value":" la variable "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"start"}]},{"type":"text","value":" se queda con 0, "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"longest"}]},{"type":"text","value":" sería 1 (tanto i como start son 0) y se guardaría "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"seen.n = 1"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"A continuación la "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"i"}]},{"type":"text","value":" del index es 1, lo que hace que la siguiente letra sea la "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"i"}]},{"type":"text","value":". No existe todavía dentro de "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"seen"}]},{"type":"text","value":" por lo que "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"start"}]},{"type":"text","value":" todavía seguiría siendo 0, "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"longest"}]},{"type":"text","value":" pasaría a ser 2 ("},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"i"}]},{"type":"text","value":" es 1 y "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"start"}]},{"type":"text","value":" 0) y guardamos "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"seen.i = 2"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"En la siguiente iteración la "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"i"}]},{"type":"text","value":" del index es 2, por lo que la siguiente letra es "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"n"}]},{"type":"text","value":". En este caso si que tenemos coincidencia dentro "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"seen"}]},{"type":"text","value":" por lo que "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"start"}]},{"type":"text","value":" pasaría a ser 1. Aquí es donde está la parte algo más complicada de ver al principio, este paso es el porqué de guardar cada letra con un +1 dentro de "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"seen"}]},{"type":"text","value":". Para explicarlo pensemos en el concepto de la ventana, antes de pasar por la modificación del "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"start"}]},{"type":"text","value":" tenemos que el borde izquierdo (la posición actual del "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"start"}]},{"type":"text","value":") esta en la posición 0 y el borde derecho (la "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"i"}]},{"type":"text","value":") está en la posición 2, al encontrar coincidencía lo que tenemos que hacer es mover la posición del borde izquierdo para sacar la "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"n"}]},{"type":"text","value":" de nuestro rango de la ventana por lo que para sacarla sería mover la posición actual del borde izquierdo a "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"n"}]},{"type":"text","value":" + 1, es decir, movernos al siguiente carácter. Nuestra ventana ahora pasa de estar en "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"nin"}]},{"type":"text","value":" a "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"in"}]},{"type":"text","value":". Hemos movido el "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"start"}]},{"type":"text","value":" de 0 a 1 por lo que en este caso si la "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"i"}]},{"type":"text","value":" es 2 entonces "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"longest"}]},{"type":"text","value":" sigue siendo 2 y ahora como ya existe la "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"n"}]},{"type":"text","value":" dentro "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"seen"}]},{"type":"text","value":" pasamos a tener "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"seen.n = 3"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Ahora la "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"i"}]},{"type":"text","value":" del index es 3, por lo que la siguiente letra es "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"j"}]},{"type":"text","value":", como no hemos pasado por ninguna nuestro "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"start"}]},{"type":"text","value":" no cambia sigue en 1, "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"longest"}]},{"type":"text","value":" ahora pasaría a ser 3 ("},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"i"}]},{"type":"text","value":" es 3, "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"start"}]},{"type":"text","value":" es 1) y guardariamos "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"seen.j = 4"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Por último la "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"i"}]},{"type":"text","value":" del index es 4, por lo que ya estariamos en la última letra que es la "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"a"}]},{"type":"text","value":", como no tenemos ninguna "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"start"}]},{"type":"text","value":" sigue siendo 1, "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"longest"}]},{"type":"text","value":" ahora pasaría a ser 4 ("},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"i"}]},{"type":"text","value":" es 4 y "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"start"}]},{"type":"text","value":" es 1) y por último se guardaría "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"seen.a = 5"}]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"En este punto terminaría la ejecución y nos devolvería "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"longest"}]},{"type":"text","value":" que sería 4, es decir, "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"inja"}]},{"type":"text","value":". En este ejemplo lo más importante es ver como se mueve la ventana realmente, que lo que hace es ir creciendo hasta que encuentra una repetición y coloca su "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"start"}]},{"type":"text","value":" a continuación de la repetición para comenzar de nuevo sin incluir ese carácter."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Creo que más o menos con estos ejemplos se entiende cual es el funcionamiento de este patrón de resolución de problemas que puede ser bastante útil si queremos sacar y comparar información entre elementos dentro de un mismo array."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Y hasta aquí este post nos vemos en el siguienteeeee, un abrazooooor"}]},{"type":"text","value":"\n"},{"type":"comment","value":"kg-card-end: markdown"}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"otroejemploalgomscomplicado","heading":"Otro ejemplo algo más complicado."},{"id":"otroejemploms","heading":"Otro ejemplo más"}]},"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"}}}}}]}},"pageContext":{"slug":"js-algoritmos-y-estructuras-de-datos-vii-la-recursividad-iii","prev":"docker-ix-kubernetes-iv-definiendo-recursos","next":"js-algoritmos-y-estructuras-de-datos-vi-la-recursividad-y-como-resolver-el-problema","tag":"algoritmos","limit":3,"skip":0,"primaryTagCount":7,"collectionPaths":{}}},
    "staticQueryHashes": ["1272700106","1676991999","2138873178","2546165603","2681841279","2938721187","293880488","3052966952","4156497161"]}