{
    "componentChunkName": "component---node-modules-gatsby-theme-try-ghost-src-templates-post-js",
    "path": "/javascript-funcional-ii/",
    "result": {"data":{"ghostPost":{"id":"Ghost__Post__5fa6a809a6c0f5058bff43b6","title":"Javascript Funcional II: Funciones puras, currying y aplicación parcial","slug":"javascript-funcional-ii","featured":false,"feature_image":"https://jlgarcia.fulldev.ninja/assets/images/2020/11/Capture-5-1.jpeg","excerpt":"Continuemos con nuestra serie de programación funcional, y en este caso\nseguiremos hablando de sus caracteristicas con Javascript.\nEn el post anterior hablamos de Inmutabilidad, una característica donde no se\nmutaban o modificaban los objetos si no que creabamos otros con los cambios\naplicados.\n\nEsto es básico por ejemplo para el caso de lo siguiente que queremos hablar que\nes Funciones puras\n\nFunciones puras\nLas funciones puras son aquellas donde los cambios que queramos hacer solo se\nproducen ","custom_excerpt":null,"visibility":"public","created_at_pretty":"7 Nov 2020","published_at_pretty":"13 Nov 2020","updated_at_pretty":"19 Jan 2021","created_at":"2020-11-07T14:58:33.000+01:00","published_at":"2020-11-13T11:21:00.000+01:00","updated_at":"2021-01-19T21:06:18.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":"funcional","url":"https://jlgarcia.fulldev.ninja/tag/funcional/","name":"funcional","visibility":"public","feature_image":null,"description":null,"meta_title":null,"meta_description":null,"featureImageSharp":null},"tags":[{"slug":"funcional","url":"https://jlgarcia.fulldev.ninja/tag/funcional/","name":"funcional","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":"Continuemos con nuestra serie de programación funcional, y en este caso\nseguiremos hablando de sus caracteristicas con Javascript.\nEn el post anterior hablamos de Inmutabilidad, una característica donde no se\nmutaban o modificaban los objetos si no que creabamos otros con los cambios\naplicados.\n\nEsto es básico por ejemplo para el caso de lo siguiente que queremos hablar que\nes Funciones puras\n\nFunciones puras\nLas funciones puras son aquellas donde los cambios que queramos hacer solo se\nproducen dentro del scope de la función (en su interior básicamente), en ningún\ncaso modifican variables externas. Si tenemos una función que no devuelve nada,\nque usa this o que no tiene argumentos podemos empezar a sospechar que no es\npura. OJO aunque digamos que debemos cumplir este punto en la programación\nfuncional muchas veces no es posible por ejemplo en funciones de IO donde por\nejemplo trabajamos con bases de datos, pero en general debemos poder cumplir con\neste principio.\nVeamos un ejemplo del problema y como lo podemos solucionar, seguiremos la\nteoría del ejemplo anterior\n\nconst oldNinjas = ['Ninja1', 'Ninja2']\nconst newNinja = 'Ninja3'\n\nconst addNinja = (actualNinjas, newNinja) => {\n  const ninjas = actualNinjas\n  ninjas.push(newNinja)\n  return ninjas\n}\n\nconst totalNinjas = addNinja(oldNinjas, newNinja)\n\nconsole.log(totalNinjas) // result <--[\"Ninja1\",\"Ninja2\",\"Ninja3\"]\nconsole.log(oldNinjas) // result <--[\"Ninja1\",\"Ninja2\",\"Ninja3\"]\n\n\nEs un ejemplo muy forzado lo sé, pero creo que se puede captar el concepto,\naunque le estemos enviando por parámetro los ninjas actuales al ser realmente\nuna referencia modificamos el valor de oldNinjas queramos o no, en este caso\nvemos como nuestra función no es pura, tiene efectos colaterales que no\ndeseamos. En este caso una posible solución podía ser esta:\n\nconst oldNinjas = ['Ninja1', 'Ninja2']\nconst newNinja = 'Ninja3'\n\nconst addNinja = (actualNinjas, newNinja) => {\n  return actualNinjas.concat(newNinja)\n}\n\nconst totalNinjas = addNinja(oldNinjas, newNinja)\n\nconsole.log(totalNinjas) // result <--[\"Ninja1\",\"Ninja2\",\"Ninja3\"]\nconsole.log(oldNinjas) // result <--[\"Ninja1\",\"Ninja2\"]\n\n\nConcat es un método de los arrays que realmente no modifica el objeto original,\nsi no que devuelve uno nuevo, con esto cumpliriamos siempre con la funcionalidad\nen cuestión y no modificamos nada que realmente no queremos. Esta solo es una\nforma de cumplir con lo que estamos buscando sé que tenemos otras muchas\nopciones esto es solo a nivel de ejemplo.\n\nVamos a por la siguiente\n\nFunciones de orden superior\nEsto viene también de la mano de las funciones como ciudadanos de primera clase,\nes decir, las funciones se pueden tratar como cualquier otra variable u objeto\ndel lenguaje y hacen uso de otras funciones.\n\nEstas características estamos usandolas habitualmente en javascript aunque puede\nque no seamos conscientes del todo, por ejemplo cuando hacemos usos de callbacks\no trabajamos con promesas ya estamos haciendo uso de estas características.\nVeamos un ejemplo sencillo que hace uso de las 2 características\n\nfunction calculator (number, operation) {\n  return operation (number)\n}\n\nconst plus2 = (number) => {\n  return number + 2\n}\n\nconst squared = (number) => {\n  return number**2\n}\n\nconst twoPlusTwo = calculator(2, plus2)\nconst threeSquared = calculator(3, squared)\n\nconsole.log(twoPlusTwo) // 4\nconsole.log(threeSquared) // 9\n\n\nComo vemos estamos pasando por parámetro las operaciones que queremos realizar y\nluego ya calculator hace uso de el directamente, creo que más o menos se\nentiende.\n\nVeamos el siguiente punto.\n\nCurrificación y aplicación parcial\nA menudo estos conceptos se separan porque puramente hablando no son lo mismo,\npero hacen uso de la misma funcionalidad realmente lo que cambia es la manera de\naplicarla.\nPara hablar de esto (y aunque no quería meterme en tecnicismos) tengo que\nintroducir el concepto de aridad. La aridad de una función básicamente es la\ncantidad de parámetros que tiene un método:\n\nfunction calculator (number, operation) // <-- aridad 2\n\n\nBien viendo lo que es la aridad ahora veamos una funcionalidad muy util que\ntenemos con javascript, que viene de la mano de la de las funciones puras. Como\nhemos comentado ya, es posible que devolvamos funciones y las recibamos por\nparámetro ¿no?... pues en esto es en lo que se basa tanto la aplicación parcial\ncomo la currificación, veamos un ejemplo primero:\n\nfunction calculator (number) {\n  return function (operation) {\n    return operation(number)\n  }\n}\n\nconst plus2 = (number) => {\n  return number + 2\n}\n\nconst squared = (number) => {\n  return number**2\n}\n\nconst baseNumber = calculator(2)\n\nconsole.log(baseNumber) // function (operation) { return operation(number); }\n\nconst twoPlusTwo = baseNumber(plus2)\nconst twoSquared = baseNumber(squared)\n\nconsole.log(twoPlusTwo) // 4\nconsole.log(twoSquared) // 4\n\n\n\nLo importante ahora mismo es la función calculator, como vemos lo primero que\nhace la función es devolver otra función, si nos fijamos en el console.log de \nbaseNumber vemos como realmente es una función que espera una operación y\nsimplemente lo que tenemos es ya un número preparado para realizar la operación.\n\nVisto esto veamos lo que es aplicación parcial con un ejemplo\n\nconst createPlayer = (name, health) => (weapon) => {\n  return {\n    name,\n    health,\n    weapon\n  }\n}\n\nconst playerBase = createPlayer('DevNinja', 1000)\n\nconst availableWeapons = ['SuperGun', 'Katana', 'Smoke Grenade']\n\nconst playerWeapon = availableWeapons[Math.floor(Math.random() * availableWeapons.length)]\n\nconst player1 = playerBase(playerWeapon)\n\nconsole.log(player1) // { name:\"DevNinja\", health:1000, weapon:\"Katana\" }\n\n\nVuelvo a comentar que esto es un poco forzado, pero nos vale para el concepto.\nSi nos fijamos ahora usamos arrow functions que son más comodas para hacer estas\ncosas.\nPues bien en este caso createPlayer lo primero recibe el nombre y el valor de\nsalud y se queda \"a la espera\" de que el sistema le aplique un arma al jugador,\nesto es lo que seria la aplicación parcial, podemos definirlo como una ejecución\nde una función por pasos, pero como vemos en este caso tenemos una aridad\ninicial de 2 y luego de 1, esta situación de aridad es la diferencia principal\nentre aplicación parcial y currificación. La currificación tendría siempre\naridad 1, es decir:\n\nconst createPlayer = (name) => (health) => (weapon) => {\n  return {\n    name,\n    health,\n    weapon\n  }\n}\n\nconst playerBase = createPlayer('DevNinja')\n\nconst playerHealh = Math.floor(Math.random() * 1000)\nconst playerWithInitialHealh = playerBase(playerHealh)\n\nconst availableWeapons = ['SuperGun', 'Katana', 'Smoke Grenade']\nconst playerWeapon = availableWeapons[Math.floor(Math.random() * availableWeapons.length)]\n\nconst player1 = playerWithInitialHealh(playerWeapon)\n\nconsole.log(player1) // { name:\"DevNinja\", health:428, weapon:\"Smoke Grenade\" }\n\n\nAhora tenemos que siempre trabajamos con una aridad de 1, lo que modulariza\nbastante el uso de nuestro método createPlayer, haciendo posible que hagamos\ncualquier operación entre cada paso de la función.\n\nBueno creo que más o menos se entienden estos conceptos, voy un poco rápido con\nesto porque existen multitud de ejemplos y explicaciones al respecto por\ninternet, si algo no esta claro recomiendo investigar un poco más, en esta serie\nnos detendremos un poco en conceptos más complejos como los functores y las\nmonadas que son algo más duros para entenderlos.\n\nNos vemos en el siguiente donde hablaremos de la Composición de funciones un\nabrazoooooo Ninjaaas","html":"<!--kg-card-begin: markdown--><p>Continuemos con nuestra serie de programación funcional, y en este caso seguiremos hablando de sus caracteristicas con Javascript.<br>\nEn el post anterior hablamos de <strong>Inmutabilidad</strong>, una característica donde no se mutaban o modificaban los objetos si no que creabamos otros con los cambios aplicados.</p>\n<p>Esto es básico por ejemplo para el caso de lo siguiente que queremos hablar que es <strong>Funciones puras</strong></p>\n<h2 id=\"funcionespuras\">Funciones puras</h2>\n<p>Las funciones puras son aquellas donde los cambios que queramos hacer solo se producen dentro del <em>scope</em> de la función (en su interior básicamente), en ningún caso modifican variables externas. Si tenemos una función que no devuelve nada, que usa <em>this</em> o que no tiene argumentos podemos empezar a sospechar que no es pura. OJO aunque digamos que debemos cumplir este punto en la programación funcional muchas veces no es posible por ejemplo en funciones de IO donde por ejemplo trabajamos con bases de datos, pero en general debemos poder cumplir con este principio.<br>\nVeamos un ejemplo del problema y como lo podemos solucionar, seguiremos la teoría del ejemplo anterior</p>\n<pre><code class=\"language-javascript\">const oldNinjas = ['Ninja1', 'Ninja2']\nconst newNinja = 'Ninja3'\n\nconst addNinja = (actualNinjas, newNinja) =&gt; {\n  const ninjas = actualNinjas\n  ninjas.push(newNinja)\n  return ninjas\n}\n\nconst totalNinjas = addNinja(oldNinjas, newNinja)\n\nconsole.log(totalNinjas) // result &lt;--[&quot;Ninja1&quot;,&quot;Ninja2&quot;,&quot;Ninja3&quot;]\nconsole.log(oldNinjas) // result &lt;--[&quot;Ninja1&quot;,&quot;Ninja2&quot;,&quot;Ninja3&quot;]\n</code></pre>\n<p>Es un ejemplo muy forzado lo sé, pero creo que se puede captar el concepto, aunque le estemos enviando por parámetro los ninjas actuales al ser realmente una referencia modificamos el valor de <em>oldNinjas</em> queramos o no, en este caso vemos como nuestra función <strong>no es pura</strong>, tiene efectos colaterales que no deseamos. En este caso una posible solución podía ser esta:</p>\n<pre><code class=\"language-javascript\">const oldNinjas = ['Ninja1', 'Ninja2']\nconst newNinja = 'Ninja3'\n\nconst addNinja = (actualNinjas, newNinja) =&gt; {\n  return actualNinjas.concat(newNinja)\n}\n\nconst totalNinjas = addNinja(oldNinjas, newNinja)\n\nconsole.log(totalNinjas) // result &lt;--[&quot;Ninja1&quot;,&quot;Ninja2&quot;,&quot;Ninja3&quot;]\nconsole.log(oldNinjas) // result &lt;--[&quot;Ninja1&quot;,&quot;Ninja2&quot;]\n</code></pre>\n<p>Concat es un método de los arrays que realmente no modifica el objeto original, si no que devuelve uno nuevo, con esto cumpliriamos siempre con la funcionalidad en cuestión y no modificamos nada que realmente no queremos. Esta solo es una forma de cumplir con lo que estamos buscando sé que tenemos otras muchas opciones esto es solo a nivel de ejemplo.</p>\n<p>Vamos a por la siguiente</p>\n<h2 id=\"funcionesdeordensuperior\">Funciones de orden superior</h2>\n<p>Esto viene también de la mano de las <strong>funciones como ciudadanos de primera clase</strong>, es decir, las funciones se pueden tratar como cualquier otra variable u objeto del lenguaje y hacen uso de otras funciones.</p>\n<p>Estas características estamos usandolas habitualmente en javascript aunque puede que no seamos conscientes del todo, por ejemplo cuando hacemos usos de callbacks o trabajamos con promesas ya estamos haciendo uso de estas características. Veamos un ejemplo sencillo que hace uso de las 2 características</p>\n<pre><code class=\"language-javascript\">function calculator (number, operation) {\n  return operation (number)\n}\n\nconst plus2 = (number) =&gt; {\n  return number + 2\n}\n\nconst squared = (number) =&gt; {\n  return number**2\n}\n\nconst twoPlusTwo = calculator(2, plus2)\nconst threeSquared = calculator(3, squared)\n\nconsole.log(twoPlusTwo) // 4\nconsole.log(threeSquared) // 9\n</code></pre>\n<p>Como vemos estamos pasando por parámetro las operaciones que queremos realizar y luego ya <em>calculator</em> hace uso de el directamente, creo que más o menos se entiende.</p>\n<p>Veamos el siguiente punto.</p>\n<h2 id=\"currificacinyaplicacinparcial\">Currificación y aplicación parcial</h2>\n<p>A menudo estos conceptos se separan porque puramente hablando no son lo mismo, pero hacen uso de la misma funcionalidad realmente lo que cambia es la manera de aplicarla.<br>\nPara hablar de esto (y aunque no quería meterme en tecnicismos) tengo que introducir el concepto de <em>aridad</em>. La aridad de una función básicamente es la cantidad de parámetros que tiene un método:</p>\n<pre><code class=\"language-javascript\">function calculator (number, operation) // &lt;-- aridad 2\n</code></pre>\n<p>Bien viendo lo que es la aridad ahora veamos una funcionalidad muy util que tenemos con javascript, que viene de la mano de la de las funciones puras. Como hemos comentado ya, es posible que devolvamos funciones y las recibamos por parámetro ¿no?... pues en esto es en lo que se basa tanto la aplicación parcial como la currificación, veamos un ejemplo primero:</p>\n<pre><code class=\"language-javascript\">function calculator (number) {\n  return function (operation) {\n    return operation(number)\n  }\n}\n\nconst plus2 = (number) =&gt; {\n  return number + 2\n}\n\nconst squared = (number) =&gt; {\n  return number**2\n}\n\nconst baseNumber = calculator(2)\n\nconsole.log(baseNumber) // function (operation) { return operation(number); }\n\nconst twoPlusTwo = baseNumber(plus2)\nconst twoSquared = baseNumber(squared)\n\nconsole.log(twoPlusTwo) // 4\nconsole.log(twoSquared) // 4\n\n</code></pre>\n<p>Lo importante ahora mismo es la función <em>calculator</em>, como vemos lo primero que hace la función es devolver otra función, si nos fijamos en el console.log de <em>baseNumber</em> vemos como realmente es una función que espera una operación y simplemente lo que tenemos es ya un número preparado para realizar la operación.</p>\n<p>Visto esto veamos lo que es aplicación parcial con un ejemplo</p>\n<pre><code class=\"language-javascript\">const createPlayer = (name, health) =&gt; (weapon) =&gt; {\n  return {\n    name,\n    health,\n    weapon\n  }\n}\n\nconst playerBase = createPlayer('DevNinja', 1000)\n\nconst availableWeapons = ['SuperGun', 'Katana', 'Smoke Grenade']\n\nconst playerWeapon = availableWeapons[Math.floor(Math.random() * availableWeapons.length)]\n\nconst player1 = playerBase(playerWeapon)\n\nconsole.log(player1) // { name:&quot;DevNinja&quot;, health:1000, weapon:&quot;Katana&quot; }\n</code></pre>\n<p>Vuelvo a comentar que esto es un poco forzado, pero nos vale para el concepto. Si nos fijamos ahora usamos arrow functions que son más comodas para hacer estas cosas.<br>\nPues bien en este caso <em>createPlayer</em> lo primero recibe el nombre y el valor de salud y se queda &quot;a la espera&quot; de que el sistema le aplique un arma al jugador, esto es lo que seria la aplicación parcial, podemos definirlo como una ejecución de una función por pasos, pero como vemos en este caso tenemos una aridad inicial de 2 y luego de 1, esta situación de aridad es la diferencia principal entre aplicación parcial y currificación. La currificación tendría siempre aridad 1, es decir:</p>\n<pre><code class=\"language-javascript\">const createPlayer = (name) =&gt; (health) =&gt; (weapon) =&gt; {\n  return {\n    name,\n    health,\n    weapon\n  }\n}\n\nconst playerBase = createPlayer('DevNinja')\n\nconst playerHealh = Math.floor(Math.random() * 1000)\nconst playerWithInitialHealh = playerBase(playerHealh)\n\nconst availableWeapons = ['SuperGun', 'Katana', 'Smoke Grenade']\nconst playerWeapon = availableWeapons[Math.floor(Math.random() * availableWeapons.length)]\n\nconst player1 = playerWithInitialHealh(playerWeapon)\n\nconsole.log(player1) // { name:&quot;DevNinja&quot;, health:428, weapon:&quot;Smoke Grenade&quot; }\n</code></pre>\n<p>Ahora tenemos que siempre trabajamos con una aridad de 1, lo que modulariza bastante el uso de nuestro método <em>createPlayer</em>, haciendo posible que hagamos cualquier operación entre cada paso de la función.</p>\n<p>Bueno creo que más o menos se entienden estos conceptos, voy un poco rápido con esto porque existen multitud de ejemplos y explicaciones al respecto por internet, si algo no esta claro recomiendo investigar un poco más, en esta serie nos detendremos un poco en conceptos más complejos como los <em>functores y las monadas</em> que son algo más duros para entenderlos.</p>\n<p>Nos vemos en el siguiente donde hablaremos de la <strong>Composición de funciones</strong> un abrazoooooo Ninjaaas</p>\n<!--kg-card-end: markdown-->","url":"https://jlgarcia.fulldev.ninja/javascript-funcional-ii/","canonical_url":null,"uuid":"50216406-174a-4591-ab2f-93174b039636","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"5fa6a809a6c0f5058bff43b6","reading_time":4,"send_email_when_published":false,"email_subject":null,"childHtmlRehype":{"html":"<!--kg-card-begin: markdown--><p>Continuemos con nuestra serie de programación funcional, y en este caso seguiremos hablando de sus caracteristicas con Javascript.<br>\nEn el post anterior hablamos de <strong>Inmutabilidad</strong>, una característica donde no se mutaban o modificaban los objetos si no que creabamos otros con los cambios aplicados.</p>\n<p>Esto es básico por ejemplo para el caso de lo siguiente que queremos hablar que es <strong>Funciones puras</strong></p>\n<h2 id=\"funcionespuras\">Funciones puras</h2>\n<p>Las funciones puras son aquellas donde los cambios que queramos hacer solo se producen dentro del <em>scope</em> de la función (en su interior básicamente), en ningún caso modifican variables externas. Si tenemos una función que no devuelve nada, que usa <em>this</em> o que no tiene argumentos podemos empezar a sospechar que no es pura. OJO aunque digamos que debemos cumplir este punto en la programación funcional muchas veces no es posible por ejemplo en funciones de IO donde por ejemplo trabajamos con bases de datos, pero en general debemos poder cumplir con este principio.<br>\nVeamos un ejemplo del problema y como lo podemos solucionar, seguiremos la teoría del ejemplo anterior</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> oldNinjas <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'Ninja1'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'Ninja2'</span><span class=\"token punctuation\">]</span>\n<span class=\"token keyword\">const</span> newNinja <span class=\"token operator\">=</span> <span class=\"token string\">'Ninja3'</span>\n\n<span class=\"token keyword\">const</span> <span class=\"token function-variable function\">addNinja</span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">actualNinjas<span class=\"token punctuation\">,</span> newNinja</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">const</span> ninjas <span class=\"token operator\">=</span> actualNinjas\n  ninjas<span class=\"token punctuation\">.</span><span class=\"token function\">push</span><span class=\"token punctuation\">(</span>newNinja<span class=\"token punctuation\">)</span>\n  <span class=\"token keyword\">return</span> ninjas\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">const</span> totalNinjas <span class=\"token operator\">=</span> <span class=\"token function\">addNinja</span><span class=\"token punctuation\">(</span>oldNinjas<span class=\"token punctuation\">,</span> newNinja<span class=\"token punctuation\">)</span>\n\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>totalNinjas<span class=\"token punctuation\">)</span> <span class=\"token comment\">// result &#x3C;--[\"Ninja1\",\"Ninja2\",\"Ninja3\"]</span>\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>oldNinjas<span class=\"token punctuation\">)</span> <span class=\"token comment\">// result &#x3C;--[\"Ninja1\",\"Ninja2\",\"Ninja3\"]</span>\n</code></pre></div>\n<p>Es un ejemplo muy forzado lo sé, pero creo que se puede captar el concepto, aunque le estemos enviando por parámetro los ninjas actuales al ser realmente una referencia modificamos el valor de <em>oldNinjas</em> queramos o no, en este caso vemos como nuestra función <strong>no es pura</strong>, tiene efectos colaterales que no deseamos. En este caso una posible solución podía ser esta:</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> oldNinjas <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'Ninja1'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'Ninja2'</span><span class=\"token punctuation\">]</span>\n<span class=\"token keyword\">const</span> newNinja <span class=\"token operator\">=</span> <span class=\"token string\">'Ninja3'</span>\n\n<span class=\"token keyword\">const</span> <span class=\"token function-variable function\">addNinja</span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">actualNinjas<span class=\"token punctuation\">,</span> newNinja</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">return</span> actualNinjas<span class=\"token punctuation\">.</span><span class=\"token function\">concat</span><span class=\"token punctuation\">(</span>newNinja<span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">const</span> totalNinjas <span class=\"token operator\">=</span> <span class=\"token function\">addNinja</span><span class=\"token punctuation\">(</span>oldNinjas<span class=\"token punctuation\">,</span> newNinja<span class=\"token punctuation\">)</span>\n\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>totalNinjas<span class=\"token punctuation\">)</span> <span class=\"token comment\">// result &#x3C;--[\"Ninja1\",\"Ninja2\",\"Ninja3\"]</span>\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>oldNinjas<span class=\"token punctuation\">)</span> <span class=\"token comment\">// result &#x3C;--[\"Ninja1\",\"Ninja2\"]</span>\n</code></pre></div>\n<p>Concat es un método de los arrays que realmente no modifica el objeto original, si no que devuelve uno nuevo, con esto cumpliriamos siempre con la funcionalidad en cuestión y no modificamos nada que realmente no queremos. Esta solo es una forma de cumplir con lo que estamos buscando sé que tenemos otras muchas opciones esto es solo a nivel de ejemplo.</p>\n<p>Vamos a por la siguiente</p>\n<h2 id=\"funcionesdeordensuperior\">Funciones de orden superior</h2>\n<p>Esto viene también de la mano de las <strong>funciones como ciudadanos de primera clase</strong>, es decir, las funciones se pueden tratar como cualquier otra variable u objeto del lenguaje y hacen uso de otras funciones.</p>\n<p>Estas características estamos usandolas habitualmente en javascript aunque puede que no seamos conscientes del todo, por ejemplo cuando hacemos usos de callbacks o trabajamos con promesas ya estamos haciendo uso de estas características. Veamos un ejemplo sencillo que hace uso de las 2 características</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\">calculator</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">number<span class=\"token punctuation\">,</span> operation</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">return</span> <span class=\"token function\">operation</span> <span class=\"token punctuation\">(</span>number<span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">const</span> <span class=\"token function-variable function\">plus2</span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">number</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">return</span> number <span class=\"token operator\">+</span> <span class=\"token number\">2</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">const</span> <span class=\"token function-variable function\">squared</span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">number</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">return</span> number<span class=\"token operator\">**</span><span class=\"token number\">2</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">const</span> twoPlusTwo <span class=\"token operator\">=</span> <span class=\"token function\">calculator</span><span class=\"token punctuation\">(</span><span class=\"token number\">2</span><span class=\"token punctuation\">,</span> plus2<span class=\"token punctuation\">)</span>\n<span class=\"token keyword\">const</span> threeSquared <span class=\"token operator\">=</span> <span class=\"token function\">calculator</span><span class=\"token punctuation\">(</span><span class=\"token number\">3</span><span class=\"token punctuation\">,</span> squared<span class=\"token punctuation\">)</span>\n\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>twoPlusTwo<span class=\"token punctuation\">)</span> <span class=\"token comment\">// 4</span>\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>threeSquared<span class=\"token punctuation\">)</span> <span class=\"token comment\">// 9</span>\n</code></pre></div>\n<p>Como vemos estamos pasando por parámetro las operaciones que queremos realizar y luego ya <em>calculator</em> hace uso de el directamente, creo que más o menos se entiende.</p>\n<p>Veamos el siguiente punto.</p>\n<h2 id=\"currificacinyaplicacinparcial\">Currificación y aplicación parcial</h2>\n<p>A menudo estos conceptos se separan porque puramente hablando no son lo mismo, pero hacen uso de la misma funcionalidad realmente lo que cambia es la manera de aplicarla.<br>\nPara hablar de esto (y aunque no quería meterme en tecnicismos) tengo que introducir el concepto de <em>aridad</em>. La aridad de una función básicamente es la cantidad de parámetros que tiene un método:</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\">calculator</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">number<span class=\"token punctuation\">,</span> operation</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">// &#x3C;-- aridad 2</span>\n</code></pre></div>\n<p>Bien viendo lo que es la aridad ahora veamos una funcionalidad muy util que tenemos con javascript, que viene de la mano de la de las funciones puras. Como hemos comentado ya, es posible que devolvamos funciones y las recibamos por parámetro ¿no?... pues en esto es en lo que se basa tanto la aplicación parcial como la currificación, veamos un ejemplo primero:</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\">calculator</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">number</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">return</span> <span class=\"token keyword\">function</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">operation</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">return</span> <span class=\"token function\">operation</span><span class=\"token punctuation\">(</span>number<span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">const</span> <span class=\"token function-variable function\">plus2</span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">number</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">return</span> number <span class=\"token operator\">+</span> <span class=\"token number\">2</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">const</span> <span class=\"token function-variable function\">squared</span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">number</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">return</span> number<span class=\"token operator\">**</span><span class=\"token number\">2</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">const</span> baseNumber <span class=\"token operator\">=</span> <span class=\"token function\">calculator</span><span class=\"token punctuation\">(</span><span class=\"token number\">2</span><span class=\"token punctuation\">)</span>\n\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>baseNumber<span class=\"token punctuation\">)</span> <span class=\"token comment\">// function (operation) { return operation(number); }</span>\n\n<span class=\"token keyword\">const</span> twoPlusTwo <span class=\"token operator\">=</span> <span class=\"token function\">baseNumber</span><span class=\"token punctuation\">(</span>plus2<span class=\"token punctuation\">)</span>\n<span class=\"token keyword\">const</span> twoSquared <span class=\"token operator\">=</span> <span class=\"token function\">baseNumber</span><span class=\"token punctuation\">(</span>squared<span class=\"token punctuation\">)</span>\n\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>twoPlusTwo<span class=\"token punctuation\">)</span> <span class=\"token comment\">// 4</span>\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>twoSquared<span class=\"token punctuation\">)</span> <span class=\"token comment\">// 4</span>\n\n</code></pre></div>\n<p>Lo importante ahora mismo es la función <em>calculator</em>, como vemos lo primero que hace la función es devolver otra función, si nos fijamos en el console.log de <em>baseNumber</em> vemos como realmente es una función que espera una operación y simplemente lo que tenemos es ya un número preparado para realizar la operación.</p>\n<p>Visto esto veamos lo que es aplicación parcial con un 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\">const</span> <span class=\"token function-variable function\">createPlayer</span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">name<span class=\"token punctuation\">,</span> health</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">weapon</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">return</span> <span class=\"token punctuation\">{</span>\n    name<span class=\"token punctuation\">,</span>\n    health<span class=\"token punctuation\">,</span>\n    weapon\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">const</span> playerBase <span class=\"token operator\">=</span> <span class=\"token function\">createPlayer</span><span class=\"token punctuation\">(</span><span class=\"token string\">'DevNinja'</span><span class=\"token punctuation\">,</span> <span class=\"token number\">1000</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token keyword\">const</span> availableWeapons <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'SuperGun'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'Katana'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'Smoke Grenade'</span><span class=\"token punctuation\">]</span>\n\n<span class=\"token keyword\">const</span> playerWeapon <span class=\"token operator\">=</span> availableWeapons<span class=\"token punctuation\">[</span>Math<span class=\"token punctuation\">.</span><span class=\"token function\">floor</span><span class=\"token punctuation\">(</span>Math<span class=\"token punctuation\">.</span><span class=\"token function\">random</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">*</span> availableWeapons<span class=\"token punctuation\">.</span>length<span class=\"token punctuation\">)</span><span class=\"token punctuation\">]</span>\n\n<span class=\"token keyword\">const</span> player1 <span class=\"token operator\">=</span> <span class=\"token function\">playerBase</span><span class=\"token punctuation\">(</span>playerWeapon<span class=\"token punctuation\">)</span>\n\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>player1<span class=\"token punctuation\">)</span> <span class=\"token comment\">// { name:\"DevNinja\", health:1000, weapon:\"Katana\" }</span>\n</code></pre></div>\n<p>Vuelvo a comentar que esto es un poco forzado, pero nos vale para el concepto. Si nos fijamos ahora usamos arrow functions que son más comodas para hacer estas cosas.<br>\nPues bien en este caso <em>createPlayer</em> lo primero recibe el nombre y el valor de salud y se queda \"a la espera\" de que el sistema le aplique un arma al jugador, esto es lo que seria la aplicación parcial, podemos definirlo como una ejecución de una función por pasos, pero como vemos en este caso tenemos una aridad inicial de 2 y luego de 1, esta situación de aridad es la diferencia principal entre aplicación parcial y currificación. La currificación tendría siempre aridad 1, es decir:</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\">createPlayer</span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">name</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">health</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">weapon</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">return</span> <span class=\"token punctuation\">{</span>\n    name<span class=\"token punctuation\">,</span>\n    health<span class=\"token punctuation\">,</span>\n    weapon\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">const</span> playerBase <span class=\"token operator\">=</span> <span class=\"token function\">createPlayer</span><span class=\"token punctuation\">(</span><span class=\"token string\">'DevNinja'</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token keyword\">const</span> playerHealh <span class=\"token operator\">=</span> Math<span class=\"token punctuation\">.</span><span class=\"token function\">floor</span><span class=\"token punctuation\">(</span>Math<span class=\"token punctuation\">.</span><span class=\"token function\">random</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">*</span> <span class=\"token number\">1000</span><span class=\"token punctuation\">)</span>\n<span class=\"token keyword\">const</span> playerWithInitialHealh <span class=\"token operator\">=</span> <span class=\"token function\">playerBase</span><span class=\"token punctuation\">(</span>playerHealh<span class=\"token punctuation\">)</span>\n\n<span class=\"token keyword\">const</span> availableWeapons <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'SuperGun'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'Katana'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'Smoke Grenade'</span><span class=\"token punctuation\">]</span>\n<span class=\"token keyword\">const</span> playerWeapon <span class=\"token operator\">=</span> availableWeapons<span class=\"token punctuation\">[</span>Math<span class=\"token punctuation\">.</span><span class=\"token function\">floor</span><span class=\"token punctuation\">(</span>Math<span class=\"token punctuation\">.</span><span class=\"token function\">random</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">*</span> availableWeapons<span class=\"token punctuation\">.</span>length<span class=\"token punctuation\">)</span><span class=\"token punctuation\">]</span>\n\n<span class=\"token keyword\">const</span> player1 <span class=\"token operator\">=</span> <span class=\"token function\">playerWithInitialHealh</span><span class=\"token punctuation\">(</span>playerWeapon<span class=\"token punctuation\">)</span>\n\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>player1<span class=\"token punctuation\">)</span> <span class=\"token comment\">// { name:\"DevNinja\", health:428, weapon:\"Smoke Grenade\" }</span>\n</code></pre></div>\n<p>Ahora tenemos que siempre trabajamos con una aridad de 1, lo que modulariza bastante el uso de nuestro método <em>createPlayer</em>, haciendo posible que hagamos cualquier operación entre cada paso de la función.</p>\n<p>Bueno creo que más o menos se entienden estos conceptos, voy un poco rápido con esto porque existen multitud de ejemplos y explicaciones al respecto por internet, si algo no esta claro recomiendo investigar un poco más, en esta serie nos detendremos un poco en conceptos más complejos como los <em>functores y las monadas</em> que son algo más duros para entenderlos.</p>\n<p>Nos vemos en el siguiente donde hablaremos de la <strong>Composición de funciones</strong> un abrazoooooo Ninjaaas</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":"Continuemos con nuestra serie de programación funcional, y en este caso seguiremos hablando de sus caracteristicas con Javascript."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nEn el post anterior hablamos de "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Inmutabilidad"}]},{"type":"text","value":", una característica donde no se mutaban o modificaban los objetos si no que creabamos otros con los cambios aplicados."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Esto es básico por ejemplo para el caso de lo siguiente que queremos hablar que es "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Funciones puras"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"funcionespuras"},"children":[{"type":"text","value":"Funciones puras"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Las funciones puras son aquellas donde los cambios que queramos hacer solo se producen dentro del "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"scope"}]},{"type":"text","value":" de la función (en su interior básicamente), en ningún caso modifican variables externas. Si tenemos una función que no devuelve nada, que usa "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"this"}]},{"type":"text","value":" o que no tiene argumentos podemos empezar a sospechar que no es pura. OJO aunque digamos que debemos cumplir este punto en la programación funcional muchas veces no es posible por ejemplo en funciones de IO donde por ejemplo trabajamos con bases de datos, pero en general debemos poder cumplir con este principio."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nVeamos un ejemplo del problema y como lo podemos solucionar, seguiremos la teoría del ejemplo anterior"}]},{"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":" oldNinjas "},{"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","string"]},"children":[{"type":"text","value":"'Ninja1'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'Ninja2'"}]},{"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":" newNinja "},{"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":"'Ninja3'"}]},{"type":"text","value":"\n\n"},{"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":"addNinja"}]},{"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":"actualNinjas"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" newNinja"}]},{"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":"const"}]},{"type":"text","value":" ninjas "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" actualNinjas\n  ninjas"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"push"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"newNinja"},{"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":" ninjas\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":"const"}]},{"type":"text","value":" totalNinjas "},{"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":"addNinja"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"oldNinjas"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" newNinja"},{"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":"text","value":"totalNinjas"},{"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":"// result <--[\"Ninja1\",\"Ninja2\",\"Ninja3\"]"}]},{"type":"text","value":"\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":"text","value":"oldNinjas"},{"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":"// result <--[\"Ninja1\",\"Ninja2\",\"Ninja3\"]"}]},{"type":"text","value":"\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Es un ejemplo muy forzado lo sé, pero creo que se puede captar el concepto, aunque le estemos enviando por parámetro los ninjas actuales al ser realmente una referencia modificamos el valor de "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"oldNinjas"}]},{"type":"text","value":" queramos o no, en este caso vemos como nuestra función "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"no es pura"}]},{"type":"text","value":", tiene efectos colaterales que no deseamos. En este caso una posible solución podía ser esta:"}]},{"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":" oldNinjas "},{"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","string"]},"children":[{"type":"text","value":"'Ninja1'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'Ninja2'"}]},{"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":" newNinja "},{"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":"'Ninja3'"}]},{"type":"text","value":"\n\n"},{"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":"addNinja"}]},{"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":"actualNinjas"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" newNinja"}]},{"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":"return"}]},{"type":"text","value":" actualNinjas"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"concat"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"newNinja"},{"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":"const"}]},{"type":"text","value":" totalNinjas "},{"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":"addNinja"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"oldNinjas"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" newNinja"},{"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":"text","value":"totalNinjas"},{"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":"// result <--[\"Ninja1\",\"Ninja2\",\"Ninja3\"]"}]},{"type":"text","value":"\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":"text","value":"oldNinjas"},{"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":"// result <--[\"Ninja1\",\"Ninja2\"]"}]},{"type":"text","value":"\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Concat es un método de los arrays que realmente no modifica el objeto original, si no que devuelve uno nuevo, con esto cumpliriamos siempre con la funcionalidad en cuestión y no modificamos nada que realmente no queremos. Esta solo es una forma de cumplir con lo que estamos buscando sé que tenemos otras muchas opciones esto es solo a nivel de ejemplo."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Vamos a por la siguiente"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"funcionesdeordensuperior"},"children":[{"type":"text","value":"Funciones de orden superior"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Esto viene también de la mano de las "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"funciones como ciudadanos de primera clase"}]},{"type":"text","value":", es decir, las funciones se pueden tratar como cualquier otra variable u objeto del lenguaje y hacen uso de otras funciones."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Estas características estamos usandolas habitualmente en javascript aunque puede que no seamos conscientes del todo, por ejemplo cuando hacemos usos de callbacks o trabajamos con promesas ya estamos haciendo uso de estas características. Veamos un ejemplo sencillo que hace uso de las 2 características"}]},{"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":"calculator"}]},{"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":" operation"}]},{"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":"return"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"operation"}]},{"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","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":"const"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function-variable","function"]},"children":[{"type":"text","value":"plus2"}]},{"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":"number"}]},{"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":"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","number"]},"children":[{"type":"text","value":"2"}]},{"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":"const"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function-variable","function"]},"children":[{"type":"text","value":"squared"}]},{"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":"number"}]},{"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":"return"}]},{"type":"text","value":" number"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"**"}]},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"2"}]},{"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":"const"}]},{"type":"text","value":" twoPlusTwo "},{"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":"calculator"}]},{"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":"text","value":" plus2"},{"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":" threeSquared "},{"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":"calculator"}]},{"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":"text","value":" squared"},{"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":"text","value":"twoPlusTwo"},{"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":"// 4"}]},{"type":"text","value":"\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":"text","value":"threeSquared"},{"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":"// 9"}]},{"type":"text","value":"\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Como vemos estamos pasando por parámetro las operaciones que queremos realizar y luego ya "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"calculator"}]},{"type":"text","value":" hace uso de el directamente, creo que más o menos se entiende."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Veamos el siguiente punto."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"currificacinyaplicacinparcial"},"children":[{"type":"text","value":"Currificación y aplicación parcial"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"A menudo estos conceptos se separan porque puramente hablando no son lo mismo, pero hacen uso de la misma funcionalidad realmente lo que cambia es la manera de aplicarla."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nPara hablar de esto (y aunque no quería meterme en tecnicismos) tengo que introducir el concepto de "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"aridad"}]},{"type":"text","value":". La aridad de una función básicamente es la cantidad de parámetros que tiene un método:"}]},{"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":"calculator"}]},{"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":" operation"}]},{"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":"// <-- aridad 2"}]},{"type":"text","value":"\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Bien viendo lo que es la aridad ahora veamos una funcionalidad muy util que tenemos con javascript, que viene de la mano de la de las funciones puras. Como hemos comentado ya, es posible que devolvamos funciones y las recibamos por parámetro ¿no?... pues en esto es en lo que se basa tanto la aplicación parcial como la currificación, veamos un ejemplo primero:"}]},{"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":"calculator"}]},{"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  "},{"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":"function"}]},{"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":"operation"}]},{"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":"return"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"operation"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"number"},{"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":"const"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function-variable","function"]},"children":[{"type":"text","value":"plus2"}]},{"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":"number"}]},{"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":"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","number"]},"children":[{"type":"text","value":"2"}]},{"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":"const"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function-variable","function"]},"children":[{"type":"text","value":"squared"}]},{"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":"number"}]},{"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":"return"}]},{"type":"text","value":" number"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"**"}]},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"2"}]},{"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":"const"}]},{"type":"text","value":" baseNumber "},{"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":"calculator"}]},{"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":"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":"text","value":"baseNumber"},{"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":"// function (operation) { return operation(number); }"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" twoPlusTwo "},{"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":"baseNumber"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"plus2"},{"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":" twoSquared "},{"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":"baseNumber"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"squared"},{"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":"text","value":"twoPlusTwo"},{"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":"// 4"}]},{"type":"text","value":"\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":"text","value":"twoSquared"},{"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":"// 4"}]},{"type":"text","value":"\n\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Lo importante ahora mismo es la función "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"calculator"}]},{"type":"text","value":", como vemos lo primero que hace la función es devolver otra función, si nos fijamos en el console.log de "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"baseNumber"}]},{"type":"text","value":" vemos como realmente es una función que espera una operación y simplemente lo que tenemos es ya un número preparado para realizar la operación."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Visto esto veamos lo que es aplicación parcial con un 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":"const"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function-variable","function"]},"children":[{"type":"text","value":"createPlayer"}]},{"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":"name"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" health"}]},{"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":"text","value":"weapon"}]},{"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":"return"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    name"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    health"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    weapon\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":"const"}]},{"type":"text","value":" playerBase "},{"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":"createPlayer"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'DevNinja'"}]},{"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":"1000"}]},{"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":"const"}]},{"type":"text","value":" availableWeapons "},{"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","string"]},"children":[{"type":"text","value":"'SuperGun'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'Katana'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'Smoke Grenade'"}]},{"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":"const"}]},{"type":"text","value":" playerWeapon "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" availableWeapons"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"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":"floor"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"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":"random"}]},{"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":" availableWeapons"},{"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\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" player1 "},{"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":"playerBase"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"playerWeapon"},{"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":"text","value":"player1"},{"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":"// { name:\"DevNinja\", health:1000, weapon:\"Katana\" }"}]},{"type":"text","value":"\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Vuelvo a comentar que esto es un poco forzado, pero nos vale para el concepto. Si nos fijamos ahora usamos arrow functions que son más comodas para hacer estas cosas."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nPues bien en este caso "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"createPlayer"}]},{"type":"text","value":" lo primero recibe el nombre y el valor de salud y se queda \"a la espera\" de que el sistema le aplique un arma al jugador, esto es lo que seria la aplicación parcial, podemos definirlo como una ejecución de una función por pasos, pero como vemos en este caso tenemos una aridad inicial de 2 y luego de 1, esta situación de aridad es la diferencia principal entre aplicación parcial y currificación. La currificación tendría siempre aridad 1, es decir:"}]},{"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":"createPlayer"}]},{"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":"name"}]},{"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":"text","value":"health"}]},{"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":"text","value":"weapon"}]},{"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":"return"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"{"}]},{"type":"text","value":"\n    name"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    health"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":"\n    weapon\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":"const"}]},{"type":"text","value":" playerBase "},{"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":"createPlayer"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'DevNinja'"}]},{"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":"const"}]},{"type":"text","value":" playerHealh "},{"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":"floor"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"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":"random"}]},{"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","number"]},"children":[{"type":"text","value":"1000"}]},{"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":" playerWithInitialHealh "},{"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":"playerBase"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"playerHealh"},{"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":"const"}]},{"type":"text","value":" availableWeapons "},{"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","string"]},"children":[{"type":"text","value":"'SuperGun'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'Katana'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'Smoke Grenade'"}]},{"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":" playerWeapon "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" availableWeapons"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"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":"floor"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"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":"random"}]},{"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":" availableWeapons"},{"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\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" player1 "},{"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":"playerWithInitialHealh"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"playerWeapon"},{"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":"text","value":"player1"},{"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":"// { name:\"DevNinja\", health:428, weapon:\"Smoke Grenade\" }"}]},{"type":"text","value":"\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Ahora tenemos que siempre trabajamos con una aridad de 1, lo que modulariza bastante el uso de nuestro método "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"createPlayer"}]},{"type":"text","value":", haciendo posible que hagamos cualquier operación entre cada paso de la función."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Bueno creo que más o menos se entienden estos conceptos, voy un poco rápido con esto porque existen multitud de ejemplos y explicaciones al respecto por internet, si algo no esta claro recomiendo investigar un poco más, en esta serie nos detendremos un poco en conceptos más complejos como los "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"functores y las monadas"}]},{"type":"text","value":" que son algo más duros para entenderlos."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Nos vemos en el siguiente donde hablaremos de la "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Composición de funciones"}]},{"type":"text","value":" un abrazoooooo Ninjaaas"}]},{"type":"text","value":"\n"},{"type":"comment","value":"kg-card-end: markdown"}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"funcionespuras","heading":"Funciones puras"},{"id":"funcionesdeordensuperior","heading":"Funciones de orden superior"},{"id":"currificacinyaplicacinparcial","heading":"Currificación y aplicación parcial"}]},"featureImageSharp":{"base":"Capture-5-1.jpeg","publicURL":"/static/28e76839a7fb382fbbe244b857f2980c/Capture-5-1.jpeg","imageMeta":{"width":628,"height":263},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAIABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAMG/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAABz9giD//EABcQAQADAAAAAAAAAAAAAAAAAAADERL/2gAIAQEAAQUCS4t//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAFxAAAwEAAAAAAAAAAAAAAAAAAAEQEv/aAAgBAQAGPwIWJ//EABkQAAIDAQAAAAAAAAAAAAAAAAERACFREP/aAAgBAQABPyGERsI0r3n/2gAMAwEAAgADAAAAEHAP/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPxA//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPxA//8QAGhABAAIDAQAAAAAAAAAAAAAAASExABARUf/aAAgBAQABPxDERjkbBCDxvX//2Q==","aspectRatio":2.385321100917431,"src":"/static/28e76839a7fb382fbbe244b857f2980c/fc145/Capture-5-1.jpg","srcSet":"/static/28e76839a7fb382fbbe244b857f2980c/65d8c/Capture-5-1.jpg 260w,\n/static/28e76839a7fb382fbbe244b857f2980c/c5f21/Capture-5-1.jpg 520w,\n/static/28e76839a7fb382fbbe244b857f2980c/fc145/Capture-5-1.jpg 628w","srcWebp":"/static/28e76839a7fb382fbbe244b857f2980c/09ccc/Capture-5-1.webp","srcSetWebp":"/static/28e76839a7fb382fbbe244b857f2980c/dc8f3/Capture-5-1.webp 260w,\n/static/28e76839a7fb382fbbe244b857f2980c/2db4b/Capture-5-1.webp 520w,\n/static/28e76839a7fb382fbbe244b857f2980c/09ccc/Capture-5-1.webp 628w","sizes":"(max-width: 628px) 100vw, 628px"}}}},"prev":{"id":"Ghost__Post__5fafcc29a6c0f5058bff4598","title":"Docker VI - Kubernetes I: Intro e instalación","slug":"kubernetes-i-intro-e-instalacion","featured":false,"feature_image":"https://jlgarcia.fulldev.ninja/assets/images/2020/11/learning-docker-and-k8s-by-practice.jpg","excerpt":"En general ya tenemos una idea de que es Kubernetes, seguro que lo hemos oido o\nleido en algún momento, en un resumen muy escueto, podemos decir que es una\nherramienta de instrumentación/orquestación de nodos de Docker, estos pueden\nestar en uno o varios servidores. Nos provee de una serie de herramientas para\npoder gestionar nuestros conjuntos de aplicaciones que están funcionando en\nvarios contenedores Docker.\n\nInstalación\nEn un primer momento comentar que realmente Kubertenes es un servicio q","custom_excerpt":null,"visibility":"public","created_at_pretty":"14 Nov 2020","published_at_pretty":"17 Nov 2020","updated_at_pretty":"19 Jan 2021","created_at":"2020-11-14T13:23:05.000+01:00","published_at":"2020-11-17T11:03:00.000+01:00","updated_at":"2021-01-19T21:07:05.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 general ya tenemos una idea de que es Kubernetes, seguro que lo hemos oido o\nleido en algún momento, en un resumen muy escueto, podemos decir que es una\nherramienta de instrumentación/orquestación de nodos de Docker, estos pueden\nestar en uno o varios servidores. Nos provee de una serie de herramientas para\npoder gestionar nuestros conjuntos de aplicaciones que están funcionando en\nvarios contenedores Docker.\n\nInstalación\nEn un primer momento comentar que realmente Kubertenes es un servicio que estará\nfuncionando en algún proveedor cloud (AWS/Gooogle/Azure...), por lo que\npropiamente dicho no tendriamos una instalación. En esta sección veremos como\ninstalar un entorno local de pruebas de kubernetes y las herramientas habituales\nde gestión de kubernetes (que estas si que se usan en producción)\n\nCLI de gestión kubernetes\nEl servicio de Kubernetes como tal, dispone de una API para su gestión, es\ndecir, que podríamos usar postman o curl para gestionar nuestro entorno de\nkubernetes, pero esto en mi opinión para el uso habitual de kubernetes no es\nnecesario. Disponemos de un cli específico llamado kubectl que nos proporciona\ntodo lo necesario para la gestión de cualquier entorno de kubernetes. (Mas info\n[https://kubernetes.io/es/docs/tasks/tools/install-kubectl/#instalar-kubectl])\n\nBasicamente para su instalación en MacOs por ejemplo solo necesitamos hacer:\n\nbrew install kubernetes-cli\n\n\nCon esto se instalaria el cli que usaremos para trabajar.\n\nKubernetes en local\nA continuación lo que haremos será instalar el servicio local que será nuestro\nkubernetes, para ello han creado una herramienta llamada minikube que hará las\nveces de server de kunernetes (Mas info\n[https://kubernetes.io/es/docs/tasks/tools/install-minikube/]).\n\nPara instalarlo solo tenemos que ejecutar\n\nbrew install minikube\n\n\nEsto instalará lo necesario para que minikube funcione.\nA continuación lo que haremos será arrancar minikube para que funcione con\nkubectl. Para ello es suficiente con ejecutar:\n\nminikube start\n\n\nEsto iniciará y configurará el entorno de minikube y además hará que funcione\ncon kubectl.\nPodemos indicarle también la cantidad de memoria que queremos que use por\ndefecto nuestro servicio de minikube pasandole:\n\nminikube start --memory=4096\n\n\nEsto haría que use 4Gb por defecto usa 2. Tiene más opciones como indicarle\ncantidad de CPU y demás. Si queréis ver más opciones lo ideal es mirar la\ndocumentación para verlas todas.\n\nProbando que todo ha ido bien\nAhora ya tenemos lo básico para empezar a trabajar. Podemos comprobarlo\nejecutando los comandos:\n\n * Ver la versión que tenemos tanto del cliente (lo que seria kubectl) como del\n   servidor (en este caso minikube)\n\nkubectl version\n\n\n\n\n * Ver los nodos que tenemos de kubernetes (donde podemos ver el rol que tiene\n   cada uno, en este caso MASTER)\n\nkubectl get nodes\n\n\n\n\n * Ver el estado kubernetes\n\nminikube status\n\n\n\n\n * Información sobre el cluster de kubernetes\n\nkubectl cluster-info\n\n\n\n\nCon esto ya tendríamos lo básico para empezar a trabajar con kubernetes como si\nde un entorno de producción se tratara. En el próximo post empezaremos a\nmandarle instrucciones para ver como responde, un abrazoooooo","html":"<!--kg-card-begin: markdown--><p>En general ya tenemos una idea de que es Kubernetes, seguro que lo hemos oido o leido en algún momento, en un resumen muy escueto, podemos decir que es una herramienta de instrumentación/orquestación de nodos de Docker, estos pueden estar en uno o varios servidores. Nos provee de una serie de herramientas para poder gestionar nuestros conjuntos de aplicaciones que están funcionando en varios contenedores Docker.</p>\n<h1 id=\"instalacin\">Instalación</h1>\n<p>En un primer momento comentar que realmente Kubertenes es un servicio que estará funcionando en algún proveedor cloud (AWS/Gooogle/Azure...), por lo que propiamente dicho no tendriamos una instalación. En esta sección veremos como instalar un entorno local de pruebas de kubernetes y las herramientas habituales de gestión de kubernetes (que estas si que se usan en producción)</p>\n<h3 id=\"clidegestinkubernetes\">CLI de gestión kubernetes</h3>\n<p>El servicio de Kubernetes como tal, dispone de una API para su gestión, es decir, que podríamos usar postman o curl para gestionar nuestro entorno de kubernetes, pero esto en mi opinión para el uso habitual de kubernetes no es necesario. Disponemos de un cli específico llamado <strong>kubectl</strong> que nos proporciona todo lo necesario para la gestión de cualquier entorno de kubernetes. (Mas <a href=\"https://kubernetes.io/es/docs/tasks/tools/install-kubectl/#instalar-kubectl\">info</a>)</p>\n<p>Basicamente para su instalación en MacOs por ejemplo solo necesitamos hacer:</p>\n<pre><code class=\"language-shell\">brew install kubernetes-cli\n</code></pre>\n<p>Con esto se instalaria el cli que usaremos para trabajar.</p>\n<h3 id=\"kubernetesenlocal\">Kubernetes en local</h3>\n<p>A continuación lo que haremos será instalar el servicio local que será nuestro kubernetes, para ello han creado una herramienta llamada <strong>minikube</strong> que hará las veces de server de kunernetes (Mas <a href=\"https://kubernetes.io/es/docs/tasks/tools/install-minikube/\">info</a>).</p>\n<p>Para instalarlo solo tenemos que ejecutar</p>\n<pre><code class=\"language-shell\">brew install minikube\n</code></pre>\n<p>Esto instalará lo necesario para que minikube funcione.<br>\nA continuación lo que haremos será arrancar <strong>minikube</strong> para que funcione con kubectl. Para ello es suficiente con ejecutar:</p>\n<pre><code class=\"language-shell\">minikube start\n</code></pre>\n<p>Esto iniciará y configurará el entorno de minikube y además hará que funcione con <strong>kubectl</strong>.<br>\nPodemos indicarle también la cantidad de memoria que queremos que use por defecto nuestro servicio de minikube pasandole:</p>\n<pre><code class=\"language-shell\">minikube start --memory=4096\n</code></pre>\n<p>Esto haría que use 4Gb por defecto usa 2. Tiene más opciones como indicarle cantidad de CPU y demás. Si queréis ver más opciones lo ideal es mirar la documentación para verlas todas.</p>\n<h3 id=\"probandoquetodohaidobien\">Probando que todo ha ido bien</h3>\n<p>Ahora ya tenemos lo básico para empezar a trabajar. Podemos comprobarlo ejecutando los comandos:</p>\n<ul>\n<li>Ver la versión que tenemos tanto del cliente (lo que seria kubectl) como del servidor (en este caso minikube)</li>\n</ul>\n<pre><code class=\"language-shell\">kubectl version\n</code></pre>\n<p><img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/11/Captura-de-pantalla-2020-11-14-a-las-13.45.00.png\" alt=\"Captura-de-pantalla-2020-11-14-a-las-13.45.00\"></p>\n<ul>\n<li>Ver los nodos que tenemos de kubernetes (donde podemos ver el rol que tiene cada uno, en este caso MASTER)</li>\n</ul>\n<pre><code class=\"language-shell\">kubectl get nodes\n</code></pre>\n<p><img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/11/Captura-de-pantalla-2020-11-14-a-las-13.45.07.png\" alt=\"Captura-de-pantalla-2020-11-14-a-las-13.45.07\"></p>\n<ul>\n<li>Ver el estado kubernetes</li>\n</ul>\n<pre><code class=\"language-shell\">minikube status\n</code></pre>\n<p><img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/11/Captura-de-pantalla-2020-11-14-a-las-13.48.02.png\" alt=\"Captura-de-pantalla-2020-11-14-a-las-13.48.02\"></p>\n<ul>\n<li>Información sobre el cluster de kubernetes</li>\n</ul>\n<pre><code class=\"language-shell\">kubectl cluster-info\n</code></pre>\n<p><img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/11/Captura-de-pantalla-2020-11-14-a-las-13.49.21.png\" alt=\"Captura-de-pantalla-2020-11-14-a-las-13.49.21\"></p>\n<p>Con esto ya tendríamos lo básico para empezar a trabajar con kubernetes como si de un entorno de producción se tratara. En el próximo post empezaremos a mandarle instrucciones para ver como responde, un abrazoooooo</p>\n<!--kg-card-end: markdown-->","url":"https://jlgarcia.fulldev.ninja/kubernetes-i-intro-e-instalacion/","canonical_url":null,"uuid":"a3169979-5484-4532-913f-21e61bf18d84","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"5fafcc29a6c0f5058bff4598","reading_time":3,"send_email_when_published":false,"email_subject":null,"childHtmlRehype":{"html":"<!--kg-card-begin: markdown--><p>En general ya tenemos una idea de que es Kubernetes, seguro que lo hemos oido o leido en algún momento, en un resumen muy escueto, podemos decir que es una herramienta de instrumentación/orquestación de nodos de Docker, estos pueden estar en uno o varios servidores. Nos provee de una serie de herramientas para poder gestionar nuestros conjuntos de aplicaciones que están funcionando en varios contenedores Docker.</p>\n<h1 id=\"instalacin\">Instalación</h1>\n<p>En un primer momento comentar que realmente Kubertenes es un servicio que estará funcionando en algún proveedor cloud (AWS/Gooogle/Azure...), por lo que propiamente dicho no tendriamos una instalación. En esta sección veremos como instalar un entorno local de pruebas de kubernetes y las herramientas habituales de gestión de kubernetes (que estas si que se usan en producción)</p>\n<h3 id=\"clidegestinkubernetes\">CLI de gestión kubernetes</h3>\n<p>El servicio de Kubernetes como tal, dispone de una API para su gestión, es decir, que podríamos usar postman o curl para gestionar nuestro entorno de kubernetes, pero esto en mi opinión para el uso habitual de kubernetes no es necesario. Disponemos de un cli específico llamado <strong>kubectl</strong> que nos proporciona todo lo necesario para la gestión de cualquier entorno de kubernetes. (Mas <a href=\"https://kubernetes.io/es/docs/tasks/tools/install-kubectl/#instalar-kubectl\">info</a>)</p>\n<p>Basicamente para su instalación en MacOs por ejemplo solo necesitamos hacer:</p>\n<div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\">brew <span class=\"token function\">install</span> kubernetes-cli\n</code></pre></div>\n<p>Con esto se instalaria el cli que usaremos para trabajar.</p>\n<h3 id=\"kubernetesenlocal\">Kubernetes en local</h3>\n<p>A continuación lo que haremos será instalar el servicio local que será nuestro kubernetes, para ello han creado una herramienta llamada <strong>minikube</strong> que hará las veces de server de kunernetes (Mas <a href=\"https://kubernetes.io/es/docs/tasks/tools/install-minikube/\">info</a>).</p>\n<p>Para instalarlo solo tenemos que ejecutar</p>\n<div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\">brew <span class=\"token function\">install</span> minikube\n</code></pre></div>\n<p>Esto instalará lo necesario para que minikube funcione.<br>\nA continuación lo que haremos será arrancar <strong>minikube</strong> para que funcione con kubectl. Para ello es suficiente con ejecutar:</p>\n<div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\">minikube start\n</code></pre></div>\n<p>Esto iniciará y configurará el entorno de minikube y además hará que funcione con <strong>kubectl</strong>.<br>\nPodemos indicarle también la cantidad de memoria que queremos que use por defecto nuestro servicio de minikube pasandole:</p>\n<div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\">minikube start --memory<span class=\"token operator\">=</span><span class=\"token number\">4096</span>\n</code></pre></div>\n<p>Esto haría que use 4Gb por defecto usa 2. Tiene más opciones como indicarle cantidad de CPU y demás. Si queréis ver más opciones lo ideal es mirar la documentación para verlas todas.</p>\n<h3 id=\"probandoquetodohaidobien\">Probando que todo ha ido bien</h3>\n<p>Ahora ya tenemos lo básico para empezar a trabajar. Podemos comprobarlo ejecutando los comandos:</p>\n<ul>\n<li>Ver la versión que tenemos tanto del cliente (lo que seria kubectl) como del servidor (en este caso minikube)</li>\n</ul>\n<div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\">kubectl version\n</code></pre></div>\n<p><img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/11/Captura-de-pantalla-2020-11-14-a-las-13.45.00.png\" alt=\"Captura-de-pantalla-2020-11-14-a-las-13.45.00\"></p>\n<ul>\n<li>Ver los nodos que tenemos de kubernetes (donde podemos ver el rol que tiene cada uno, en este caso MASTER)</li>\n</ul>\n<div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\">kubectl get nodes\n</code></pre></div>\n<p><img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/11/Captura-de-pantalla-2020-11-14-a-las-13.45.07.png\" alt=\"Captura-de-pantalla-2020-11-14-a-las-13.45.07\"></p>\n<ul>\n<li>Ver el estado kubernetes</li>\n</ul>\n<div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\">minikube status\n</code></pre></div>\n<p><img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/11/Captura-de-pantalla-2020-11-14-a-las-13.48.02.png\" alt=\"Captura-de-pantalla-2020-11-14-a-las-13.48.02\"></p>\n<ul>\n<li>Información sobre el cluster de kubernetes</li>\n</ul>\n<div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"shell\"><pre class=\"language-shell\"><code class=\"language-shell\">kubectl cluster-info\n</code></pre></div>\n<p><img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/11/Captura-de-pantalla-2020-11-14-a-las-13.49.21.png\" alt=\"Captura-de-pantalla-2020-11-14-a-las-13.49.21\"></p>\n<p>Con esto ya tendríamos lo básico para empezar a trabajar con kubernetes como si de un entorno de producción se tratara. En el próximo post empezaremos a mandarle instrucciones para ver como responde, 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":"En general ya tenemos una idea de que es Kubernetes, seguro que lo hemos oido o leido en algún momento, en un resumen muy escueto, podemos decir que es una herramienta de instrumentación/orquestación de nodos de Docker, estos pueden estar en uno o varios servidores. Nos provee de una serie de herramientas para poder gestionar nuestros conjuntos de aplicaciones que están funcionando en varios contenedores Docker."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h1","properties":{"id":"instalacin"},"children":[{"type":"text","value":"Instalación"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"En un primer momento comentar que realmente Kubertenes es un servicio que estará funcionando en algún proveedor cloud (AWS/Gooogle/Azure...), por lo que propiamente dicho no tendriamos una instalación. En esta sección veremos como instalar un entorno local de pruebas de kubernetes y las herramientas habituales de gestión de kubernetes (que estas si que se usan en producción)"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"clidegestinkubernetes"},"children":[{"type":"text","value":"CLI de gestión kubernetes"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"El servicio de Kubernetes como tal, dispone de una API para su gestión, es decir, que podríamos usar postman o curl para gestionar nuestro entorno de kubernetes, pero esto en mi opinión para el uso habitual de kubernetes no es necesario. Disponemos de un cli específico llamado "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"kubectl"}]},{"type":"text","value":" que nos proporciona todo lo necesario para la gestión de cualquier entorno de kubernetes. (Mas "},{"type":"element","tagName":"a","properties":{"href":"https://kubernetes.io/es/docs/tasks/tools/install-kubectl/#instalar-kubectl"},"children":[{"type":"text","value":"info"}]},{"type":"text","value":")"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Basicamente para su instalación en MacOs por ejemplo solo necesitamos hacer:"}]},{"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":"brew "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"install"}]},{"type":"text","value":" kubernetes-cli\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Con esto se instalaria el cli que usaremos para trabajar."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"kubernetesenlocal"},"children":[{"type":"text","value":"Kubernetes en local"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"A continuación lo que haremos será instalar el servicio local que será nuestro kubernetes, para ello han creado una herramienta llamada "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"minikube"}]},{"type":"text","value":" que hará las veces de server de kunernetes (Mas "},{"type":"element","tagName":"a","properties":{"href":"https://kubernetes.io/es/docs/tasks/tools/install-minikube/"},"children":[{"type":"text","value":"info"}]},{"type":"text","value":")."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Para instalarlo solo tenemos que ejecutar"}]},{"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":"brew "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"install"}]},{"type":"text","value":" minikube\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Esto instalará lo necesario para que minikube funcione."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nA continuación lo que haremos será arrancar "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"minikube"}]},{"type":"text","value":" para que funcione con kubectl. Para ello es suficiente con ejecutar:"}]},{"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":"minikube start\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Esto iniciará y configurará el entorno de minikube y además hará que funcione con "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"kubectl"}]},{"type":"text","value":"."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nPodemos indicarle también la cantidad de memoria que queremos que use por defecto nuestro servicio de minikube pasandole:"}]},{"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":"minikube start --memory"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"4096"}]},{"type":"text","value":"\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Esto haría que use 4Gb por defecto usa 2. Tiene más opciones como indicarle cantidad de CPU y demás. Si queréis ver más opciones lo ideal es mirar la documentación para verlas todas."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"probandoquetodohaidobien"},"children":[{"type":"text","value":"Probando que todo ha ido bien"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Ahora ya tenemos lo básico para empezar a trabajar. Podemos comprobarlo ejecutando los comandos:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Ver la versión que tenemos tanto del cliente (lo que seria kubectl) como del servidor (en este caso minikube)"}]},{"type":"text","value":"\n"}]},{"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 version\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-14-a-las-13.45.00.png","alt":"Captura-de-pantalla-2020-11-14-a-las-13.45.00"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Ver los nodos que tenemos de kubernetes (donde podemos ver el rol que tiene cada uno, en este caso MASTER)"}]},{"type":"text","value":"\n"}]},{"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 get nodes\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-14-a-las-13.45.07.png","alt":"Captura-de-pantalla-2020-11-14-a-las-13.45.07"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Ver el estado kubernetes"}]},{"type":"text","value":"\n"}]},{"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":"minikube status\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-14-a-las-13.48.02.png","alt":"Captura-de-pantalla-2020-11-14-a-las-13.48.02"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Información sobre el cluster de kubernetes"}]},{"type":"text","value":"\n"}]},{"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 cluster-info\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-14-a-las-13.49.21.png","alt":"Captura-de-pantalla-2020-11-14-a-las-13.49.21"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Con esto ya tendríamos lo básico para empezar a trabajar con kubernetes como si de un entorno de producción se tratara. En el próximo post empezaremos a mandarle instrucciones para ver como responde, un abrazoooooo"}]},{"type":"text","value":"\n"},{"type":"comment","value":"kg-card-end: markdown"}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"instalacin","heading":"Instalación","items":[{"id":"clidegestinkubernetes","heading":"CLI de gestión kubernetes"},{"id":"kubernetesenlocal","heading":"Kubernetes en local"},{"id":"probandoquetodohaidobien","heading":"Probando que todo ha ido bien"}]}]},"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__5c3e0fda2dd6610fd828cb5b","title":"JS Algoritmos y estructuras de datos III: Patrón Multiple Pointers","slug":"js-algoritmos-y-estructurdas","featured":false,"feature_image":"https://jlgarcia.fulldev.ninja/assets/images/2020/11/unordered-3192273_640.png","excerpt":"Continuemos con nuestra serie sobre algoritmos y estructuras de datos, en este\ncaso vamos a ver el patrón Multiple pointers.\n\nMultiple pointers pattern\nEste patrón, pensando en arrays, se basa en crear puntos o valores que\ncorresponden a una posición y moverse al principio, el medio o al final según\nciertos condiciones. Este patrón es muy eficiente para reducir al mínimo posible\nla complejidad espacial.\n\nPensemos lo primero en un ejemplo donde poder usarlo, vamos a crear un método\nque dentro de ","custom_excerpt":null,"visibility":"public","created_at_pretty":"15 Jan 2019","published_at_pretty":"9 Nov 2020","updated_at_pretty":"19 Jan 2021","created_at":"2019-01-15T17:52:42.000+01:00","published_at":"2020-11-09T10:06:00.000+01:00","updated_at":"2021-01-19T21:05:30.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":"Continuemos con nuestra serie sobre algoritmos y estructuras de datos, en este\ncaso vamos a ver el patrón Multiple pointers.\n\nMultiple pointers pattern\nEste patrón, pensando en arrays, se basa en crear puntos o valores que\ncorresponden a una posición y moverse al principio, el medio o al final según\nciertos condiciones. Este patrón es muy eficiente para reducir al mínimo posible\nla complejidad espacial.\n\nPensemos lo primero en un ejemplo donde poder usarlo, vamos a crear un método\nque dentro de un array ordenado nos devuelva la primera pareja que sume 0.\n\nEn un primer momento lo que nos vendría a la cabeza sería hacer 2 loops\nrecorriendo dos veces todo:\n\nfunction sumZero (arr) {\n  for (let i = 0; i < arr.length; i++) {\n    for (let j = 0; j < arr.length; j++) {\n      if (arr[i] + arr[j] === 0) {\n        return [arr[i], arr[j]]\n      } \n    }\n  }\n}\n\nconsole.log(sumZero([-2, -1, 0, 1, 2])) // [-2, 2]\n\n\nEste algoritmo tiene una complejidad:\n\n * Temporal O(n^2)\n * Espacial O(1)\n\nQue aunque en complejidad espacial no esta mal en temporal se nos puede ir de\nlas manos.\n\nVeamos una solución algo mejor usando este patrón, pero antes de continuar\nquiero recalcar que esto es posible porque el array esta ordenado, en general\nmuchos de los algoritmos cuentan con esto para poder resolverse (más adelante\nveremos varios de los mejores patrones de ordenación). Vamos con la solución:\n\nfunction sumZero (arr) {\n  // Establecemos los puntos de inicio (multiple pointers u know)\n  let left = 0\n  let right = arr.length - 1\n\n  while (left < right) { // para no pasarnos\n    let sum = arr[left] + arr[right]\n\n    if (sum === 0) {\n      return [arr[left], arr[right]]\n    } else if (sum > 0) {\n      right--\n    } else {\n      left++\n    }\n  }\n}\n\nconsole.log(sumZero([-3, -2, -1, 0, 1, 2, 4])) // [-2, 2]\n\n\nEn esta solución lo que hacemos es ir moviendo nuestros puntos y comprobando si\ncumple la condición de ser igual a 0. Como es un array ordenado si la suma es\nmayor de 0 quiere decir que el valor es superior por la derecha del 0 (nuestra\nvariable right) y si el valor es negativo quiere decir que el valor es superior\npor la izquierda (varible left). Según cual sea de los dos lo que hacemos es ir\nmoviendo nuestros puntos hasta que en algun momento de 0 o hayamos recorrido\ntodos los valores por entre ambos puntos.\n\nEsta solución tiene una complejidad de:\n\n * Temporal O(n), solo recorremos una vez los valores.\n * Espacial O(1)\n\nVeamos un ejemplo algo más dificil, en este caso queremos comprobar si un string\nes una subsecuencia de otro, o más bien si aparece como una secuencia de los\ncarácteres de otro pero de manera ordenada, es decir, si word estaría dentro de \nhello world en orden (no es word pero el orden es primero w y ultimo d)\n\nfunction isInString (string1, string2) {\n  // Establecemos los puntos de inicio (multiple pointers u know)\n  let s1 = 0\n  let s2 = 0\n\n  while (s2 < string2.length) { // para no pasarnos\n    if (string1[s1] === string2[s2]) s1++\n    if (s1 === string1.length) return true\n    s2++\n  }\n  return false\n}\n\nconsole.log(isInString('ninja', 'new in jail')) // true si quitamos lo que sobra n__ in ja__\n\n\nEn este caso tenemos dos strings que debemos recorrer y queremos comprobar si el\nprimero string1 es una subsecuencia del segundo string2. En este caso nuestros\npuntos los situamos al inicio de cada string y vamos recorriendo, si encontramos\nuna coincidencia de la primera posición del string1 en la primera posición del\nstring2, movemos la posición del string1 si no, movemos la posición del string2\ny así sucesivamente una vez que hayamos recorrido todo el string1 quiere decir\nque ya tenemos coincidencia y devolvemos true, en el caso de que la posición de\nstring2 sea mayor que el tamaño del string2 quiere decir que no tenemos\ncoincidencias por lo que devolvemos false.\n\nEste patrón como vemos es muy util para comparar de alguna forma ya sea un\nelemento o varios y no tener que recorrerlos todos n veces convirtiendo la\ncomplejidad temporal en O(n^x) siendo x la cantidad de veces (o la cantidad de\nelementos) que tenemos que recorrer un elemento (o varios) al completo. En este\ncaso por ejemplo tenemos una complejidad de:\n\n * Temporal O(n + m). Dos strings que en el peor de los casos recorreremos\n   enteros pero solo una vez cada uno.\n * Espacial O(1)\n\nHasta aquí lo referente a este patrón de resolución de problemas, nos vemos en\nel siguienteeee un abraazoooo","html":"<!--kg-card-begin: markdown--><p>Continuemos con nuestra serie sobre algoritmos y estructuras de datos, en este caso vamos a ver el patrón <strong>Multiple pointers</strong>.</p>\n<h3 id=\"multiplepointerspattern\">Multiple pointers pattern</h3>\n<p>Este patrón, pensando en arrays, se basa en crear puntos o valores que corresponden a una posición y moverse al principio, el medio o al final según ciertos condiciones. Este patrón es muy eficiente para reducir al mínimo posible la complejidad espacial.</p>\n<p>Pensemos lo primero en un ejemplo donde poder usarlo, vamos a crear un método que dentro de un array ordenado nos devuelva la primera pareja que sume 0.</p>\n<p>En un primer momento lo que nos vendría a la cabeza sería hacer 2 loops recorriendo dos veces todo:</p>\n<pre><code class=\"language-javascript\">function sumZero (arr) {\n  for (let i = 0; i &lt; arr.length; i++) {\n    for (let j = 0; j &lt; arr.length; j++) {\n      if (arr[i] + arr[j] === 0) {\n        return [arr[i], arr[j]]\n      } \n    }\n  }\n}\n\nconsole.log(sumZero([-2, -1, 0, 1, 2])) // [-2, 2]\n</code></pre>\n<p>Este algoritmo tiene una complejidad:</p>\n<ul>\n<li>Temporal <strong>O(n^2)</strong></li>\n<li>Espacial  <strong>O(1)</strong></li>\n</ul>\n<p>Que aunque en complejidad espacial no esta mal en temporal se nos puede ir de las manos.</p>\n<p>Veamos una solución algo mejor usando este patrón, pero antes de continuar quiero recalcar que esto es posible porque <strong>el array esta ordenado</strong>, en general muchos de los algoritmos cuentan con esto para poder resolverse (más adelante veremos varios de los mejores patrones de ordenación). Vamos con la solución:</p>\n<pre><code class=\"language-javascript\">function sumZero (arr) {\n  // Establecemos los puntos de inicio (multiple pointers u know)\n  let left = 0\n  let right = arr.length - 1\n\n  while (left &lt; right) { // para no pasarnos\n    let sum = arr[left] + arr[right]\n\n    if (sum === 0) {\n      return [arr[left], arr[right]]\n    } else if (sum &gt; 0) {\n      right--\n    } else {\n      left++\n    }\n  }\n}\n\nconsole.log(sumZero([-3, -2, -1, 0, 1, 2, 4])) // [-2, 2]\n</code></pre>\n<p>En esta solución lo que hacemos es ir moviendo nuestros puntos y comprobando si cumple la condición de ser igual a 0. Como es un array ordenado si la suma es mayor de 0 quiere decir que el valor es superior por la derecha del 0  (nuestra variable right) y si el valor es negativo quiere decir que el valor es superior por la izquierda (varible left). Según cual sea de los dos lo que hacemos es ir moviendo nuestros puntos hasta que en algun momento de 0 o hayamos recorrido todos los valores por entre ambos puntos.</p>\n<p>Esta solución tiene una complejidad de:</p>\n<ul>\n<li>Temporal <strong>O(n)</strong>, solo recorremos una vez los valores.</li>\n<li>Espacial <strong>O(1)</strong></li>\n</ul>\n<p>Veamos un ejemplo algo más dificil, en este caso queremos comprobar si un string es una subsecuencia de otro, o más bien si aparece como una secuencia de los carácteres de otro pero de manera ordenada, es decir, si <em>word</em> estaría dentro de <em>hello world</em> en orden (no es word pero el orden es primero w y ultimo d)</p>\n<pre><code class=\"language-javascript\">function isInString (string1, string2) {\n  // Establecemos los puntos de inicio (multiple pointers u know)\n  let s1 = 0\n  let s2 = 0\n\n  while (s2 &lt; string2.length) { // para no pasarnos\n    if (string1[s1] === string2[s2]) s1++\n    if (s1 === string1.length) return true\n    s2++\n  }\n  return false\n}\n\nconsole.log(isInString('ninja', 'new in jail')) // true si quitamos lo que sobra n__ in ja__\n</code></pre>\n<p>En este caso tenemos dos strings que debemos recorrer y queremos comprobar si el primero <em>string1</em> es una subsecuencia del segundo <em>string2</em>. En este caso nuestros puntos los situamos al inicio de cada string y vamos recorriendo, si encontramos una coincidencia de la primera posición del string1 en la primera posición del string2, movemos la posición del string1 si no, movemos la posición del string2 y así sucesivamente una vez que hayamos recorrido todo el string1 quiere decir que ya tenemos coincidencia y devolvemos <em>true</em>, en el caso de que la posición de string2 sea mayor que el tamaño del string2 quiere decir que no tenemos coincidencias por lo que devolvemos <em>false</em>.</p>\n<p>Este patrón como vemos es muy util para comparar de alguna forma ya sea un elemento o varios y no tener que recorrerlos todos <strong>n</strong> veces convirtiendo la complejidad temporal en <strong>O(n^x)</strong> siendo x la cantidad de veces (o la cantidad de elementos) que tenemos que recorrer un elemento (o varios) al completo. En este caso por ejemplo tenemos una complejidad de:</p>\n<ul>\n<li>Temporal <strong>O(n + m)</strong>. Dos strings que en el peor de los casos recorreremos enteros pero solo una vez cada uno.</li>\n<li>Espacial <strong>O(1)</strong></li>\n</ul>\n<p>Hasta aquí lo referente a este patrón de resolución de problemas, nos vemos en el siguienteeee un abraazoooo</p>\n<!--kg-card-end: markdown-->","url":"https://jlgarcia.fulldev.ninja/js-algoritmos-y-estructurdas/","canonical_url":null,"uuid":"b102a2f6-1565-4a9f-94f5-a78ff12e173d","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"5c3e0fda2dd6610fd828cb5b","reading_time":3,"send_email_when_published":false,"email_subject":null,"childHtmlRehype":{"html":"<!--kg-card-begin: markdown--><p>Continuemos con nuestra serie sobre algoritmos y estructuras de datos, en este caso vamos a ver el patrón <strong>Multiple pointers</strong>.</p>\n<h3 id=\"multiplepointerspattern\">Multiple pointers pattern</h3>\n<p>Este patrón, pensando en arrays, se basa en crear puntos o valores que corresponden a una posición y moverse al principio, el medio o al final según ciertos condiciones. Este patrón es muy eficiente para reducir al mínimo posible la complejidad espacial.</p>\n<p>Pensemos lo primero en un ejemplo donde poder usarlo, vamos a crear un método que dentro de un array ordenado nos devuelva la primera pareja que sume 0.</p>\n<p>En un primer momento lo que nos vendría a la cabeza sería hacer 2 loops recorriendo dos veces todo:</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\">sumZero</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">arr</span><span class=\"token punctuation\">)</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 punctuation\">;</span> i<span class=\"token operator\">++</span><span class=\"token punctuation\">)</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> arr<span class=\"token punctuation\">.</span>length<span class=\"token punctuation\">;</span> j<span class=\"token operator\">++</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>arr<span class=\"token punctuation\">[</span>i<span class=\"token punctuation\">]</span> <span class=\"token operator\">+</span> arr<span class=\"token punctuation\">[</span>j<span class=\"token punctuation\">]</span> <span class=\"token operator\">===</span> <span class=\"token number\">0</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token keyword\">return</span> <span class=\"token punctuation\">[</span>arr<span class=\"token punctuation\">[</span>i<span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span> arr<span class=\"token punctuation\">[</span>j<span class=\"token punctuation\">]</span><span class=\"token punctuation\">]</span>\n      <span class=\"token punctuation\">}</span> \n    <span class=\"token punctuation\">}</span>\n  <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\">sumZero</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">[</span><span class=\"token operator\">-</span><span class=\"token number\">2</span><span class=\"token punctuation\">,</span> <span class=\"token operator\">-</span><span class=\"token number\">1</span><span class=\"token punctuation\">,</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span> <span class=\"token number\">1</span><span class=\"token punctuation\">,</span> <span class=\"token number\">2</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">// [-2, 2]</span>\n</code></pre></div>\n<p>Este algoritmo tiene una complejidad:</p>\n<ul>\n<li>Temporal <strong>O(n^2)</strong></li>\n<li>Espacial  <strong>O(1)</strong></li>\n</ul>\n<p>Que aunque en complejidad espacial no esta mal en temporal se nos puede ir de las manos.</p>\n<p>Veamos una solución algo mejor usando este patrón, pero antes de continuar quiero recalcar que esto es posible porque <strong>el array esta ordenado</strong>, en general muchos de los algoritmos cuentan con esto para poder resolverse (más adelante veremos varios de los mejores patrones de ordenación). Vamos con la solució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\">function</span> <span class=\"token function\">sumZero</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">arr</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token comment\">// Establecemos los puntos de inicio (multiple pointers u know)</span>\n  <span class=\"token keyword\">let</span> left <span class=\"token operator\">=</span> <span class=\"token number\">0</span>\n  <span class=\"token keyword\">let</span> right <span class=\"token operator\">=</span> arr<span class=\"token punctuation\">.</span>length <span class=\"token operator\">-</span> <span class=\"token number\">1</span>\n\n  <span class=\"token keyword\">while</span> <span class=\"token punctuation\">(</span>left <span class=\"token operator\">&#x3C;</span> right<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span> <span class=\"token comment\">// para no pasarnos</span>\n    <span class=\"token keyword\">let</span> sum <span class=\"token operator\">=</span> arr<span class=\"token punctuation\">[</span>left<span class=\"token punctuation\">]</span> <span class=\"token operator\">+</span> arr<span class=\"token punctuation\">[</span>right<span class=\"token punctuation\">]</span>\n\n    <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>sum <span class=\"token operator\">===</span> <span class=\"token number\">0</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token keyword\">return</span> <span class=\"token punctuation\">[</span>arr<span class=\"token punctuation\">[</span>left<span class=\"token punctuation\">]</span><span class=\"token punctuation\">,</span> arr<span class=\"token punctuation\">[</span>right<span class=\"token punctuation\">]</span><span class=\"token punctuation\">]</span>\n    <span class=\"token punctuation\">}</span> <span class=\"token keyword\">else</span> <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>sum <span class=\"token operator\">></span> <span class=\"token number\">0</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n      right<span class=\"token operator\">--</span>\n    <span class=\"token punctuation\">}</span> <span class=\"token keyword\">else</span> <span class=\"token punctuation\">{</span>\n      left<span class=\"token operator\">++</span>\n    <span class=\"token punctuation\">}</span>\n  <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\">sumZero</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">[</span><span class=\"token operator\">-</span><span class=\"token number\">3</span><span class=\"token punctuation\">,</span> <span class=\"token operator\">-</span><span class=\"token number\">2</span><span class=\"token punctuation\">,</span> <span class=\"token operator\">-</span><span class=\"token number\">1</span><span class=\"token punctuation\">,</span> <span class=\"token number\">0</span><span class=\"token punctuation\">,</span> <span class=\"token number\">1</span><span class=\"token punctuation\">,</span> <span class=\"token number\">2</span><span class=\"token punctuation\">,</span> <span class=\"token number\">4</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">// [-2, 2]</span>\n</code></pre></div>\n<p>En esta solución lo que hacemos es ir moviendo nuestros puntos y comprobando si cumple la condición de ser igual a 0. Como es un array ordenado si la suma es mayor de 0 quiere decir que el valor es superior por la derecha del 0  (nuestra variable right) y si el valor es negativo quiere decir que el valor es superior por la izquierda (varible left). Según cual sea de los dos lo que hacemos es ir moviendo nuestros puntos hasta que en algun momento de 0 o hayamos recorrido todos los valores por entre ambos puntos.</p>\n<p>Esta solución tiene una complejidad de:</p>\n<ul>\n<li>Temporal <strong>O(n)</strong>, solo recorremos una vez los valores.</li>\n<li>Espacial <strong>O(1)</strong></li>\n</ul>\n<p>Veamos un ejemplo algo más dificil, en este caso queremos comprobar si un string es una subsecuencia de otro, o más bien si aparece como una secuencia de los carácteres de otro pero de manera ordenada, es decir, si <em>word</em> estaría dentro de <em>hello world</em> en orden (no es word pero el orden es primero w y ultimo d)</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\">isInString</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">string1<span class=\"token punctuation\">,</span> string2</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token comment\">// Establecemos los puntos de inicio (multiple pointers u know)</span>\n  <span class=\"token keyword\">let</span> s1 <span class=\"token operator\">=</span> <span class=\"token number\">0</span>\n  <span class=\"token keyword\">let</span> s2 <span class=\"token operator\">=</span> <span class=\"token number\">0</span>\n\n  <span class=\"token keyword\">while</span> <span class=\"token punctuation\">(</span>s2 <span class=\"token operator\">&#x3C;</span> string2<span class=\"token punctuation\">.</span>length<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span> <span class=\"token comment\">// para no pasarnos</span>\n    <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>string1<span class=\"token punctuation\">[</span>s1<span class=\"token punctuation\">]</span> <span class=\"token operator\">===</span> string2<span class=\"token punctuation\">[</span>s2<span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span> s1<span class=\"token operator\">++</span>\n    <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>s1 <span class=\"token operator\">===</span> string1<span class=\"token punctuation\">.</span>length<span class=\"token punctuation\">)</span> <span class=\"token keyword\">return</span> <span class=\"token boolean\">true</span>\n    s2<span class=\"token operator\">++</span>\n  <span class=\"token punctuation\">}</span>\n  <span class=\"token keyword\">return</span> <span class=\"token boolean\">false</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\">isInString</span><span class=\"token punctuation\">(</span><span class=\"token string\">'ninja'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'new in jail'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span> <span class=\"token comment\">// true si quitamos lo que sobra n__ in ja__</span>\n</code></pre></div>\n<p>En este caso tenemos dos strings que debemos recorrer y queremos comprobar si el primero <em>string1</em> es una subsecuencia del segundo <em>string2</em>. En este caso nuestros puntos los situamos al inicio de cada string y vamos recorriendo, si encontramos una coincidencia de la primera posición del string1 en la primera posición del string2, movemos la posición del string1 si no, movemos la posición del string2 y así sucesivamente una vez que hayamos recorrido todo el string1 quiere decir que ya tenemos coincidencia y devolvemos <em>true</em>, en el caso de que la posición de string2 sea mayor que el tamaño del string2 quiere decir que no tenemos coincidencias por lo que devolvemos <em>false</em>.</p>\n<p>Este patrón como vemos es muy util para comparar de alguna forma ya sea un elemento o varios y no tener que recorrerlos todos <strong>n</strong> veces convirtiendo la complejidad temporal en <strong>O(n^x)</strong> siendo x la cantidad de veces (o la cantidad de elementos) que tenemos que recorrer un elemento (o varios) al completo. En este caso por ejemplo tenemos una complejidad de:</p>\n<ul>\n<li>Temporal <strong>O(n + m)</strong>. Dos strings que en el peor de los casos recorreremos enteros pero solo una vez cada uno.</li>\n<li>Espacial <strong>O(1)</strong></li>\n</ul>\n<p>Hasta aquí lo referente a este patrón de resolución de problemas, nos vemos en el siguienteeee un abraazoooo</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":"Continuemos con nuestra serie sobre algoritmos y estructuras de datos, en este caso vamos a ver el patrón "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Multiple pointers"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"multiplepointerspattern"},"children":[{"type":"text","value":"Multiple pointers pattern"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Este patrón, pensando en arrays, se basa en crear puntos o valores que corresponden a una posición y moverse al principio, el medio o al final según ciertos condiciones. Este patrón es muy eficiente para reducir al mínimo posible la complejidad espacial."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Pensemos lo primero en un ejemplo donde poder usarlo, vamos a crear un método que dentro de un array ordenado nos devuelva la primera pareja que sume 0."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"En un primer momento lo que nos vendría a la cabeza sería hacer 2 loops recorriendo dos veces todo:"}]},{"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":"sumZero"}]},{"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":" "},{"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":" 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","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    "},{"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":" 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":" 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":"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":"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":"text","value":" "},{"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":"j"},{"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","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        "},{"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":"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":" arr"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"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","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\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":"sumZero"}]},{"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","operator"]},"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":"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":"1"}]},{"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":" "},{"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":" "},{"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","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","comment"]},"children":[{"type":"text","value":"// [-2, 2]"}]},{"type":"text","value":"\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Este algoritmo tiene una complejidad:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Temporal "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"O(n^2)"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Espacial  "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"O(1)"}]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Que aunque en complejidad espacial no esta mal en temporal se nos puede ir de las manos."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Veamos una solución algo mejor usando este patrón, pero antes de continuar quiero recalcar que esto es posible porque "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"el array esta ordenado"}]},{"type":"text","value":", en general muchos de los algoritmos cuentan con esto para poder resolverse (más adelante veremos varios de los mejores patrones de ordenación). Vamos con la solució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":"sumZero"}]},{"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":" "},{"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":"// Establecemos los puntos de inicio (multiple pointers u know)"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"let"}]},{"type":"text","value":" left "},{"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":" right "},{"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":" "},{"type":"element","tagName":"span","properties":{"className":["token","number"]},"children":[{"type":"text","value":"1"}]},{"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":"left "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":" right"},{"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":" "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// para no pasarnos"}]},{"type":"text","value":"\n    "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"let"}]},{"type":"text","value":" sum "},{"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":"left"},{"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":" arr"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"text","value":"right"},{"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":"sum "},{"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      "},{"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":"text","value":"arr"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"text","value":"left"},{"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":" arr"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"text","value":"right"},{"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":" "},{"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":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"sum "},{"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      right"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"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","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      left"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"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","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":"sumZero"}]},{"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","operator"]},"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":"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":"2"}]},{"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":"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":" "},{"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","number"]},"children":[{"type":"text","value":"1"}]},{"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":"2"}]},{"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":"4"}]},{"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","comment"]},"children":[{"type":"text","value":"// [-2, 2]"}]},{"type":"text","value":"\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"En esta solución lo que hacemos es ir moviendo nuestros puntos y comprobando si cumple la condición de ser igual a 0. Como es un array ordenado si la suma es mayor de 0 quiere decir que el valor es superior por la derecha del 0  (nuestra variable right) y si el valor es negativo quiere decir que el valor es superior por la izquierda (varible left). Según cual sea de los dos lo que hacemos es ir moviendo nuestros puntos hasta que en algun momento de 0 o hayamos recorrido todos los valores por entre ambos puntos."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Esta solución tiene una complejidad de:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Temporal "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"O(n)"}]},{"type":"text","value":", solo recorremos una vez los valores."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Espacial "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"O(1)"}]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Veamos un ejemplo algo más dificil, en este caso queremos comprobar si un string es una subsecuencia de otro, o más bien si aparece como una secuencia de los carácteres de otro pero de manera ordenada, es decir, si "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"word"}]},{"type":"text","value":" estaría dentro de "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"hello world"}]},{"type":"text","value":" en orden (no es word pero el orden es primero w y ultimo d)"}]},{"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":"isInString"}]},{"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":"string1"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" string2"}]},{"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":"// Establecemos los puntos de inicio (multiple pointers u know)"}]},{"type":"text","value":"\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"let"}]},{"type":"text","value":" s1 "},{"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":" s2 "},{"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\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":"s2 "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"<"}]},{"type":"text","value":" string2"},{"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":" "},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// para no pasarnos"}]},{"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":"string1"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"text","value":"s1"},{"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":" string2"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"text","value":"s2"},{"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":" s1"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"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":"s1 "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"==="}]},{"type":"text","value":" string1"},{"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","boolean"]},"children":[{"type":"text","value":"true"}]},{"type":"text","value":"\n    s2"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"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":" "},{"type":"element","tagName":"span","properties":{"className":["token","boolean"]},"children":[{"type":"text","value":"false"}]},{"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":"isInString"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'ninja'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'new in jail'"}]},{"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","comment"]},"children":[{"type":"text","value":"// true si quitamos lo que sobra n__ in ja__"}]},{"type":"text","value":"\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"En este caso tenemos dos strings que debemos recorrer y queremos comprobar si el primero "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"string1"}]},{"type":"text","value":" es una subsecuencia del segundo "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"string2"}]},{"type":"text","value":". En este caso nuestros puntos los situamos al inicio de cada string y vamos recorriendo, si encontramos una coincidencia de la primera posición del string1 en la primera posición del string2, movemos la posición del string1 si no, movemos la posición del string2 y así sucesivamente una vez que hayamos recorrido todo el string1 quiere decir que ya tenemos coincidencia y devolvemos "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"true"}]},{"type":"text","value":", en el caso de que la posición de string2 sea mayor que el tamaño del string2 quiere decir que no tenemos coincidencias por lo que devolvemos "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"false"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Este patrón como vemos es muy util para comparar de alguna forma ya sea un elemento o varios y no tener que recorrerlos todos "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"n"}]},{"type":"text","value":" veces convirtiendo la complejidad temporal en "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"O(n^x)"}]},{"type":"text","value":" siendo x la cantidad de veces (o la cantidad de elementos) que tenemos que recorrer un elemento (o varios) al completo. En este caso por ejemplo tenemos una complejidad de:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Temporal "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"O(n + m)"}]},{"type":"text","value":". Dos strings que en el peor de los casos recorreremos enteros pero solo una vez cada uno."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Espacial "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"O(1)"}]}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Hasta aquí lo referente a este patrón de resolución de problemas, nos vemos en el siguienteeee un abraazoooo"}]},{"type":"text","value":"\n"},{"type":"comment","value":"kg-card-end: markdown"}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"multiplepointerspattern","heading":"Multiple pointers pattern"}]},"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__5fa7e206a6c0f5058bff43c9","title":"Javascript Funcional III: Composición de funciones","slug":"javascript-funcional-iii-composicion-de-funciones","featured":false,"feature_image":"https://jlgarcia.fulldev.ninja/assets/images/2020/11/Capture-5-1-1.jpeg","excerpt":"Bien vamos con la última de las características que tiene la programación\nfuncional antes de adentrarnos puramente en propiedades funcionales. En este\ncaso vamos a ver en detalle que es eso de Composición de funciones.\n\nEsto realmente no tiene mucha ciencia, el propio nombre nos indica de que va, se\ntrata de aplicar funciones en cadena para lógicas más complejas. Esto se suele\nver en ciertas librerias como composition, pipe, flow..., primero veremos como\naplicar esto de forma nativa y ya veremos","custom_excerpt":null,"visibility":"public","created_at_pretty":"8 Nov 2020","published_at_pretty":"20 Nov 2020","updated_at_pretty":"19 Jan 2021","created_at":"2020-11-08T13:18:14.000+01:00","published_at":"2020-11-20T11:37:00.000+01:00","updated_at":"2021-01-19T21:08:03.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":"funcional","url":"https://jlgarcia.fulldev.ninja/tag/funcional/","name":"funcional","visibility":"public","feature_image":null,"description":null,"meta_title":null,"meta_description":null,"featureImageSharp":null},"tags":[{"slug":"funcional","url":"https://jlgarcia.fulldev.ninja/tag/funcional/","name":"funcional","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},{"slug":"ramda","url":"https://jlgarcia.fulldev.ninja/tag/ramda/","name":"ramda","visibility":"public","feature_image":null,"description":null,"meta_title":null,"meta_description":null,"featureImageSharp":null}],"plaintext":"Bien vamos con la última de las características que tiene la programación\nfuncional antes de adentrarnos puramente en propiedades funcionales. En este\ncaso vamos a ver en detalle que es eso de Composición de funciones.\n\nEsto realmente no tiene mucha ciencia, el propio nombre nos indica de que va, se\ntrata de aplicar funciones en cadena para lógicas más complejas. Esto se suele\nver en ciertas librerias como composition, pipe, flow..., primero veremos como\naplicar esto de forma nativa y ya veremos algún atajo con alguna libreria.\n\nContinuemos con la teoria de uno de los ejemplos anteriores que es la de crear\nun player inicial para un juego:\n\nconst setName = (name) => (player) => {\n  player.name = name\n  return player\n}\n\nconst setPowers = (player) => {\n  const availablePowers = ['fly', 'invisibility', 'bulletproof', 'superstrength']\n  player.powers = availablePowers[Math.floor(Math.random() * availablePowers.length)]\n  return player\n}\n\nconst setWeapon = (player) => {\n  const availableWeapons = ['gun', 'katana', 'ninja star', 'grenade']\n  player.weapon = availableWeapons[Math.floor(Math.random() * availableWeapons.length)]\n  return player \n}\n\nconst newPlayer = setWeapon(setPowers(setName('Ninja')({})))\n\nconsole.log(newPlayer)\n\n\nSi nos fijamos en el contenido de newPlayer, es donde tenemos nuestra\ncomposición de funciones, lo que se suele ver como:\n\nf(g(x))\n\n\nEn este caso puede que sea facil de entender lo que estamos haciendo en este\ncaso, pero si tuvieramos esta forma en soluciones más complejas puede que no nos\nenteremos de nada, por lo que veamos como ir mejorando nuestra teoria de la\ncomposición.\n\nLo primero que haremos será crear nuestro propio método compose:\n\nconst compose = (...fns) => x => {\n  return fns.reduce((previous, current) => {\n    return current(previous)\n  }, x)\n}\n\n\nEste método compose lo que hace es recibir una cantidad n de funciones que debe\naplicar sobre un valor inicial x. En este caso lo hace de izquierda a derecha,\nmuchas veces se usa reduceRight para hacerlo de derecha a izquierda, depende de\ncuales sean los métodos a usar para la composición nos interesa más una\ndirección u otra (por defecto derecha a izquierda aunque a mí me gusta más\nizquierda a derecha).\n\nAhora con esta función compose solo tenemos que usarla:\n\nconst compose = (...fns) => x => {\n  return fns.reduce((previous, current) => {\n    return current(previous)\n  }, x)\n}\n\nconst setName = (name) => (player) => {\n  player.name = name\n  return player\n}\n\nconst setPowers = (player) => {\n  const availablePowers = ['fly', 'invisibility', 'bulletproof', 'superstrength']\n  player.powers = availablePowers[Math.floor(Math.random() * availablePowers.length)]\n  return player\n}\n\nconst setWeapon = (player) => {\n  const availableWeapons = ['gun', 'katana', 'ninja star', 'grenade']\n  player.weapon = availableWeapons[Math.floor(Math.random() * availableWeapons.length)]\n  return player \n}\n\nconst newPlayer = setWeapon(setPowers(setName('Ninja')({})))\nconst otherPlayer = compose(setName('Ninja'), setPowers, setWeapon)({})\n\nconsole.log(newPlayer)\nconsole.log(otherPlayer)\n\n\n\n\nComo podemos ver ambas funcionan correctamente y es un poco más sencillo de\nentender lo que estamos haciendo. Recuerdo que este ejemplo es un poco forzado\nes solo orientativo para ver la funcionalidad compose.\n\nVeamos el ejemplo con Ramda\n\nconst R = require('ramda')\n\nconst setName = (name) => (player) => {\n  player.name = name\n  return player\n}\n\nconst setPowers = (player) => {\n  const availablePowers = ['fly', 'invisibility', 'bulletproof', 'superstrength']\n  player.powers = availablePowers[Math.floor(Math.random() * availablePowers.length)]\n  return player\n}\n\nconst setWeapon = (player) => {\n  const availableWeapons = ['gun', 'katana', 'ninja star', 'grenade']\n  player.weapon = availableWeapons[Math.floor(Math.random() * availableWeapons.length)]\n  return player \n}\n\nconst newPlayer = setWeapon(setPowers(setName('Ninja')({})))\n// Aquí en lugar de compose usamos el método en cuestión de R que es pipe\nconst otherPlayer = R.pipe(setName('Ninja'), setPowers, setWeapon)({})\n\nconsole.log(newPlayer)\nconsole.log(otherPlayer)\n\n\nSolo tenemos que usar pipe para hacerlo de izquierda a derecha o compose para\nhacerlo de derecha a izquierda\n\nUn detalle importante a tener en cuenta y que hacemos uso en el ejemplo, es lo\nque se conoce como programación tacita o point free, este concepto se refiere a\nla omisión de los parámetros de los métodos cuando lo usamos por ejemplo en una\ncomposición como esta que hemos visto, debido a que los valores de retorno de\nunos métodos son los de entrada de otros por lo que como el proceso se realiza\nautomáticamente lo podemos omitir. En este caso que hemos visto siempre se\nretorna el mismo objeto, pero pudiera ser cualquier otro caso mientras que se\ncumpla este concepto:\n\nfuncA :: A -> B\nfuncB :: B -> C\n\n// Esto lo podemos encadenar porque funcB espera como valor de entrada B que es lo que devuelve funcA\nfuncC:: funcA + funcB :: A -> B -> C\n\n\nCreo que con esto se entiende más o menos lo básico sobre la composición, en los\npróximos capítulos veremos elementos más puramente funcionales como pueden ser\nlos Funtores, una abrazooooo","html":"<!--kg-card-begin: markdown--><p>Bien vamos con la última de las características que tiene la programación funcional antes de adentrarnos puramente en propiedades funcionales. En este caso vamos a ver en detalle que es eso de <em>Composición de funciones</em>.</p>\n<p>Esto realmente no tiene mucha ciencia, el propio nombre nos indica de que va, se trata de aplicar funciones en cadena para lógicas más complejas. Esto se suele ver en ciertas librerias como <em>composition, pipe, flow...</em>, primero veremos como aplicar esto de forma nativa y ya veremos algún atajo con alguna libreria.</p>\n<p>Continuemos con la teoria de uno de los ejemplos anteriores que es la de crear un <em>player</em> inicial para un juego:</p>\n<pre><code class=\"language-javascript\">const setName = (name) =&gt; (player) =&gt; {\n  player.name = name\n  return player\n}\n\nconst setPowers = (player) =&gt; {\n  const availablePowers = ['fly', 'invisibility', 'bulletproof', 'superstrength']\n  player.powers = availablePowers[Math.floor(Math.random() * availablePowers.length)]\n  return player\n}\n\nconst setWeapon = (player) =&gt; {\n  const availableWeapons = ['gun', 'katana', 'ninja star', 'grenade']\n  player.weapon = availableWeapons[Math.floor(Math.random() * availableWeapons.length)]\n  return player \n}\n\nconst newPlayer = setWeapon(setPowers(setName('Ninja')({})))\n\nconsole.log(newPlayer)\n</code></pre>\n<p>Si nos fijamos en el contenido de <em>newPlayer</em>, es donde tenemos nuestra composición de funciones, lo que se suele ver como:</p>\n<pre><code class=\"language-javascript\">f(g(x))\n</code></pre>\n<p>En este caso puede que sea facil de entender lo que estamos haciendo en este caso, pero si tuvieramos esta forma en soluciones más complejas puede que no nos enteremos de nada, por lo que veamos como ir mejorando nuestra teoria de la composición.</p>\n<p>Lo primero que haremos será crear nuestro propio método <em>compose</em>:</p>\n<pre><code class=\"language-javascript\">const compose = (...fns) =&gt; x =&gt; {\n  return fns.reduce((previous, current) =&gt; {\n    return current(previous)\n  }, x)\n}\n</code></pre>\n<p>Este método compose lo que hace es recibir una cantidad <strong>n</strong> de funciones que debe aplicar sobre un valor inicial <strong>x</strong>. En este caso lo hace de <strong>izquierda a derecha</strong>, muchas veces se usa <strong>reduceRight</strong> para hacerlo de <strong>derecha a izquierda</strong>, depende de cuales sean los métodos a usar para la composición nos interesa más una dirección u otra (por defecto derecha a izquierda aunque a mí me gusta más izquierda a derecha).</p>\n<p>Ahora con esta función compose solo tenemos que usarla:</p>\n<pre><code class=\"language-javascript\">const compose = (...fns) =&gt; x =&gt; {\n  return fns.reduce((previous, current) =&gt; {\n    return current(previous)\n  }, x)\n}\n\nconst setName = (name) =&gt; (player) =&gt; {\n  player.name = name\n  return player\n}\n\nconst setPowers = (player) =&gt; {\n  const availablePowers = ['fly', 'invisibility', 'bulletproof', 'superstrength']\n  player.powers = availablePowers[Math.floor(Math.random() * availablePowers.length)]\n  return player\n}\n\nconst setWeapon = (player) =&gt; {\n  const availableWeapons = ['gun', 'katana', 'ninja star', 'grenade']\n  player.weapon = availableWeapons[Math.floor(Math.random() * availableWeapons.length)]\n  return player \n}\n\nconst newPlayer = setWeapon(setPowers(setName('Ninja')({})))\nconst otherPlayer = compose(setName('Ninja'), setPowers, setWeapon)({})\n\nconsole.log(newPlayer)\nconsole.log(otherPlayer)\n</code></pre>\n<p><img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/11/Captura-de-pantalla-2020-11-08-a-las-14.50.00.png\" alt=\"Captura-de-pantalla-2020-11-08-a-las-14.50.00\"></p>\n<p>Como podemos ver ambas funcionan correctamente y es un poco más sencillo de entender lo que estamos haciendo. Recuerdo que este ejemplo es un poco forzado es solo orientativo para ver la funcionalidad <em>compose</em>.</p>\n<p>Veamos el ejemplo con <strong>Ramda</strong></p>\n<pre><code class=\"language-javascript\">const R = require('ramda')\n\nconst setName = (name) =&gt; (player) =&gt; {\n  player.name = name\n  return player\n}\n\nconst setPowers = (player) =&gt; {\n  const availablePowers = ['fly', 'invisibility', 'bulletproof', 'superstrength']\n  player.powers = availablePowers[Math.floor(Math.random() * availablePowers.length)]\n  return player\n}\n\nconst setWeapon = (player) =&gt; {\n  const availableWeapons = ['gun', 'katana', 'ninja star', 'grenade']\n  player.weapon = availableWeapons[Math.floor(Math.random() * availableWeapons.length)]\n  return player \n}\n\nconst newPlayer = setWeapon(setPowers(setName('Ninja')({})))\n// Aquí en lugar de compose usamos el método en cuestión de R que es pipe\nconst otherPlayer = R.pipe(setName('Ninja'), setPowers, setWeapon)({})\n\nconsole.log(newPlayer)\nconsole.log(otherPlayer)\n</code></pre>\n<p>Solo tenemos que usar <strong>pipe</strong> para hacerlo de izquierda a derecha o <strong>compose</strong> para hacerlo de derecha a izquierda</p>\n<p>Un detalle importante a tener en cuenta y que hacemos uso en el ejemplo, es lo que se conoce como <em>programación tacita o point free</em>, este concepto se refiere a la omisión de los parámetros de los métodos cuando lo usamos por ejemplo en una composición como esta que hemos visto, debido a que los valores de retorno de unos métodos son los de entrada de otros por lo que como el proceso se realiza automáticamente lo podemos omitir. En este caso que hemos visto siempre se retorna el mismo objeto, pero pudiera ser cualquier otro caso mientras que se cumpla este concepto:</p>\n<pre><code class=\"language-javascript\">funcA :: A -&gt; B\nfuncB :: B -&gt; C\n\n// Esto lo podemos encadenar porque funcB espera como valor de entrada B que es lo que devuelve funcA\nfuncC:: funcA + funcB :: A -&gt; B -&gt; C\n</code></pre>\n<p>Creo que con esto se entiende más o menos lo básico sobre la composición, en los próximos capítulos veremos elementos más puramente funcionales como pueden ser los <strong>Funtores</strong>, una abrazooooo</p>\n<!--kg-card-end: markdown-->","url":"https://jlgarcia.fulldev.ninja/javascript-funcional-iii-composicion-de-funciones/","canonical_url":null,"uuid":"9e2f2b98-0abd-4a8d-923b-38c0cf1f4c48","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"5fa7e206a6c0f5058bff43c9","reading_time":3,"send_email_when_published":false,"email_subject":null,"childHtmlRehype":{"html":"<!--kg-card-begin: markdown--><p>Bien vamos con la última de las características que tiene la programación funcional antes de adentrarnos puramente en propiedades funcionales. En este caso vamos a ver en detalle que es eso de <em>Composición de funciones</em>.</p>\n<p>Esto realmente no tiene mucha ciencia, el propio nombre nos indica de que va, se trata de aplicar funciones en cadena para lógicas más complejas. Esto se suele ver en ciertas librerias como <em>composition, pipe, flow...</em>, primero veremos como aplicar esto de forma nativa y ya veremos algún atajo con alguna libreria.</p>\n<p>Continuemos con la teoria de uno de los ejemplos anteriores que es la de crear un <em>player</em> inicial para un juego:</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\">setName</span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">name</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">player</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  player<span class=\"token punctuation\">.</span>name <span class=\"token operator\">=</span> name\n  <span class=\"token keyword\">return</span> player\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">const</span> <span class=\"token function-variable function\">setPowers</span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">player</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">const</span> availablePowers <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'fly'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'invisibility'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'bulletproof'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'superstrength'</span><span class=\"token punctuation\">]</span>\n  player<span class=\"token punctuation\">.</span>powers <span class=\"token operator\">=</span> availablePowers<span class=\"token punctuation\">[</span>Math<span class=\"token punctuation\">.</span><span class=\"token function\">floor</span><span class=\"token punctuation\">(</span>Math<span class=\"token punctuation\">.</span><span class=\"token function\">random</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">*</span> availablePowers<span class=\"token punctuation\">.</span>length<span class=\"token punctuation\">)</span><span class=\"token punctuation\">]</span>\n  <span class=\"token keyword\">return</span> player\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">const</span> <span class=\"token function-variable function\">setWeapon</span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">player</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">const</span> availableWeapons <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'gun'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'katana'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'ninja star'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'grenade'</span><span class=\"token punctuation\">]</span>\n  player<span class=\"token punctuation\">.</span>weapon <span class=\"token operator\">=</span> availableWeapons<span class=\"token punctuation\">[</span>Math<span class=\"token punctuation\">.</span><span class=\"token function\">floor</span><span class=\"token punctuation\">(</span>Math<span class=\"token punctuation\">.</span><span class=\"token function\">random</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">*</span> availableWeapons<span class=\"token punctuation\">.</span>length<span class=\"token punctuation\">)</span><span class=\"token punctuation\">]</span>\n  <span class=\"token keyword\">return</span> player \n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">const</span> newPlayer <span class=\"token operator\">=</span> <span class=\"token function\">setWeapon</span><span class=\"token punctuation\">(</span><span class=\"token function\">setPowers</span><span class=\"token punctuation\">(</span><span class=\"token function\">setName</span><span class=\"token punctuation\">(</span><span class=\"token string\">'Ninja'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span>\n\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>newPlayer<span class=\"token punctuation\">)</span>\n</code></pre></div>\n<p>Si nos fijamos en el contenido de <em>newPlayer</em>, es donde tenemos nuestra composición de funciones, lo que se suele ver como:</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 function\">f</span><span class=\"token punctuation\">(</span><span class=\"token function\">g</span><span class=\"token punctuation\">(</span>x<span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span>\n</code></pre></div>\n<p>En este caso puede que sea facil de entender lo que estamos haciendo en este caso, pero si tuvieramos esta forma en soluciones más complejas puede que no nos enteremos de nada, por lo que veamos como ir mejorando nuestra teoria de la composición.</p>\n<p>Lo primero que haremos será crear nuestro propio método <em>compose</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\">const</span> <span class=\"token function-variable function\">compose</span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\"><span class=\"token operator\">...</span>fns</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token parameter\">x</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">return</span> fns<span class=\"token punctuation\">.</span><span class=\"token function\">reduce</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">previous<span class=\"token punctuation\">,</span> current</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">return</span> <span class=\"token function\">current</span><span class=\"token punctuation\">(</span>previous<span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> x<span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span>\n</code></pre></div>\n<p>Este método compose lo que hace es recibir una cantidad <strong>n</strong> de funciones que debe aplicar sobre un valor inicial <strong>x</strong>. En este caso lo hace de <strong>izquierda a derecha</strong>, muchas veces se usa <strong>reduceRight</strong> para hacerlo de <strong>derecha a izquierda</strong>, depende de cuales sean los métodos a usar para la composición nos interesa más una dirección u otra (por defecto derecha a izquierda aunque a mí me gusta más izquierda a derecha).</p>\n<p>Ahora con esta función compose solo tenemos que usarla:</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\">compose</span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\"><span class=\"token operator\">...</span>fns</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token parameter\">x</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">return</span> fns<span class=\"token punctuation\">.</span><span class=\"token function\">reduce</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">previous<span class=\"token punctuation\">,</span> current</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">return</span> <span class=\"token function\">current</span><span class=\"token punctuation\">(</span>previous<span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> x<span class=\"token punctuation\">)</span>\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">const</span> <span class=\"token function-variable function\">setName</span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">name</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">player</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  player<span class=\"token punctuation\">.</span>name <span class=\"token operator\">=</span> name\n  <span class=\"token keyword\">return</span> player\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">const</span> <span class=\"token function-variable function\">setPowers</span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">player</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">const</span> availablePowers <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'fly'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'invisibility'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'bulletproof'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'superstrength'</span><span class=\"token punctuation\">]</span>\n  player<span class=\"token punctuation\">.</span>powers <span class=\"token operator\">=</span> availablePowers<span class=\"token punctuation\">[</span>Math<span class=\"token punctuation\">.</span><span class=\"token function\">floor</span><span class=\"token punctuation\">(</span>Math<span class=\"token punctuation\">.</span><span class=\"token function\">random</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">*</span> availablePowers<span class=\"token punctuation\">.</span>length<span class=\"token punctuation\">)</span><span class=\"token punctuation\">]</span>\n  <span class=\"token keyword\">return</span> player\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">const</span> <span class=\"token function-variable function\">setWeapon</span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">player</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">const</span> availableWeapons <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'gun'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'katana'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'ninja star'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'grenade'</span><span class=\"token punctuation\">]</span>\n  player<span class=\"token punctuation\">.</span>weapon <span class=\"token operator\">=</span> availableWeapons<span class=\"token punctuation\">[</span>Math<span class=\"token punctuation\">.</span><span class=\"token function\">floor</span><span class=\"token punctuation\">(</span>Math<span class=\"token punctuation\">.</span><span class=\"token function\">random</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">*</span> availableWeapons<span class=\"token punctuation\">.</span>length<span class=\"token punctuation\">)</span><span class=\"token punctuation\">]</span>\n  <span class=\"token keyword\">return</span> player \n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">const</span> newPlayer <span class=\"token operator\">=</span> <span class=\"token function\">setWeapon</span><span class=\"token punctuation\">(</span><span class=\"token function\">setPowers</span><span class=\"token punctuation\">(</span><span class=\"token function\">setName</span><span class=\"token punctuation\">(</span><span class=\"token string\">'Ninja'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span>\n<span class=\"token keyword\">const</span> otherPlayer <span class=\"token operator\">=</span> <span class=\"token function\">compose</span><span class=\"token punctuation\">(</span><span class=\"token function\">setName</span><span class=\"token punctuation\">(</span><span class=\"token string\">'Ninja'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span> setPowers<span class=\"token punctuation\">,</span> setWeapon<span class=\"token punctuation\">)</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>newPlayer<span class=\"token punctuation\">)</span>\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>otherPlayer<span class=\"token punctuation\">)</span>\n</code></pre></div>\n<p><img src=\"https://jlgarcia.fulldev.ninja/assets/images/2020/11/Captura-de-pantalla-2020-11-08-a-las-14.50.00.png\" alt=\"Captura-de-pantalla-2020-11-08-a-las-14.50.00\"></p>\n<p>Como podemos ver ambas funcionan correctamente y es un poco más sencillo de entender lo que estamos haciendo. Recuerdo que este ejemplo es un poco forzado es solo orientativo para ver la funcionalidad <em>compose</em>.</p>\n<p>Veamos el ejemplo con <strong>Ramda</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\">const</span> <span class=\"token constant\">R</span> <span class=\"token operator\">=</span> <span class=\"token function\">require</span><span class=\"token punctuation\">(</span><span class=\"token string\">'ramda'</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token keyword\">const</span> <span class=\"token function-variable function\">setName</span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">name</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">player</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  player<span class=\"token punctuation\">.</span>name <span class=\"token operator\">=</span> name\n  <span class=\"token keyword\">return</span> player\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">const</span> <span class=\"token function-variable function\">setPowers</span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">player</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">const</span> availablePowers <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'fly'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'invisibility'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'bulletproof'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'superstrength'</span><span class=\"token punctuation\">]</span>\n  player<span class=\"token punctuation\">.</span>powers <span class=\"token operator\">=</span> availablePowers<span class=\"token punctuation\">[</span>Math<span class=\"token punctuation\">.</span><span class=\"token function\">floor</span><span class=\"token punctuation\">(</span>Math<span class=\"token punctuation\">.</span><span class=\"token function\">random</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">*</span> availablePowers<span class=\"token punctuation\">.</span>length<span class=\"token punctuation\">)</span><span class=\"token punctuation\">]</span>\n  <span class=\"token keyword\">return</span> player\n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">const</span> <span class=\"token function-variable function\">setWeapon</span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">player</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">const</span> availableWeapons <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'gun'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'katana'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'ninja star'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'grenade'</span><span class=\"token punctuation\">]</span>\n  player<span class=\"token punctuation\">.</span>weapon <span class=\"token operator\">=</span> availableWeapons<span class=\"token punctuation\">[</span>Math<span class=\"token punctuation\">.</span><span class=\"token function\">floor</span><span class=\"token punctuation\">(</span>Math<span class=\"token punctuation\">.</span><span class=\"token function\">random</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">*</span> availableWeapons<span class=\"token punctuation\">.</span>length<span class=\"token punctuation\">)</span><span class=\"token punctuation\">]</span>\n  <span class=\"token keyword\">return</span> player \n<span class=\"token punctuation\">}</span>\n\n<span class=\"token keyword\">const</span> newPlayer <span class=\"token operator\">=</span> <span class=\"token function\">setWeapon</span><span class=\"token punctuation\">(</span><span class=\"token function\">setPowers</span><span class=\"token punctuation\">(</span><span class=\"token function\">setName</span><span class=\"token punctuation\">(</span><span class=\"token string\">'Ninja'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span>\n<span class=\"token comment\">// Aquí en lugar de compose usamos el método en cuestión de R que es pipe</span>\n<span class=\"token keyword\">const</span> otherPlayer <span class=\"token operator\">=</span> <span class=\"token constant\">R</span><span class=\"token punctuation\">.</span><span class=\"token function\">pipe</span><span class=\"token punctuation\">(</span><span class=\"token function\">setName</span><span class=\"token punctuation\">(</span><span class=\"token string\">'Ninja'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span> setPowers<span class=\"token punctuation\">,</span> setWeapon<span class=\"token punctuation\">)</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span>\n\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>newPlayer<span class=\"token punctuation\">)</span>\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>otherPlayer<span class=\"token punctuation\">)</span>\n</code></pre></div>\n<p>Solo tenemos que usar <strong>pipe</strong> para hacerlo de izquierda a derecha o <strong>compose</strong> para hacerlo de derecha a izquierda</p>\n<p>Un detalle importante a tener en cuenta y que hacemos uso en el ejemplo, es lo que se conoce como <em>programación tacita o point free</em>, este concepto se refiere a la omisión de los parámetros de los métodos cuando lo usamos por ejemplo en una composición como esta que hemos visto, debido a que los valores de retorno de unos métodos son los de entrada de otros por lo que como el proceso se realiza automáticamente lo podemos omitir. En este caso que hemos visto siempre se retorna el mismo objeto, pero pudiera ser cualquier otro caso mientras que se cumpla este concepto:</p>\n<div class=\"kg-card kg-code-card gatsby-highlight\" data-language=\"javascript\"><pre class=\"language-javascript\"><code class=\"language-javascript\">funcA <span class=\"token operator\">:</span><span class=\"token operator\">:</span> <span class=\"token constant\">A</span> <span class=\"token operator\">-</span><span class=\"token operator\">></span> <span class=\"token constant\">B</span>\nfuncB <span class=\"token operator\">:</span><span class=\"token operator\">:</span> <span class=\"token constant\">B</span> <span class=\"token operator\">-</span><span class=\"token operator\">></span> <span class=\"token constant\">C</span>\n\n<span class=\"token comment\">// Esto lo podemos encadenar porque funcB espera como valor de entrada B que es lo que devuelve funcA</span>\nfuncC<span class=\"token operator\">:</span><span class=\"token operator\">:</span> funcA <span class=\"token operator\">+</span> funcB <span class=\"token operator\">:</span><span class=\"token operator\">:</span> <span class=\"token constant\">A</span> <span class=\"token operator\">-</span><span class=\"token operator\">></span> <span class=\"token constant\">B</span> <span class=\"token operator\">-</span><span class=\"token operator\">></span> <span class=\"token constant\">C</span>\n</code></pre></div>\n<p>Creo que con esto se entiende más o menos lo básico sobre la composición, en los próximos capítulos veremos elementos más puramente funcionales como pueden ser los <strong>Funtores</strong>, una abrazooooo</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 vamos con la última de las características que tiene la programación funcional antes de adentrarnos puramente en propiedades funcionales. En este caso vamos a ver en detalle que es eso de "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"Composición de funciones"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Esto realmente no tiene mucha ciencia, el propio nombre nos indica de que va, se trata de aplicar funciones en cadena para lógicas más complejas. Esto se suele ver en ciertas librerias como "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"composition, pipe, flow..."}]},{"type":"text","value":", primero veremos como aplicar esto de forma nativa y ya veremos algún atajo con alguna libreria."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Continuemos con la teoria de uno de los ejemplos anteriores que es la de crear un "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"player"}]},{"type":"text","value":" inicial para un juego:"}]},{"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":"setName"}]},{"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":"name"}]},{"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":"text","value":"player"}]},{"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  player"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"name "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" name\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" player\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":"const"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function-variable","function"]},"children":[{"type":"text","value":"setPowers"}]},{"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":"player"}]},{"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":"const"}]},{"type":"text","value":" availablePowers "},{"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","string"]},"children":[{"type":"text","value":"'fly'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'invisibility'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'bulletproof'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'superstrength'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"text","value":"\n  player"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"powers "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" availablePowers"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"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":"floor"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"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":"random"}]},{"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":" availablePowers"},{"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  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" player\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":"const"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function-variable","function"]},"children":[{"type":"text","value":"setWeapon"}]},{"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":"player"}]},{"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":"const"}]},{"type":"text","value":" availableWeapons "},{"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","string"]},"children":[{"type":"text","value":"'gun'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'katana'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'ninja star'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'grenade'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"text","value":"\n  player"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"weapon "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" availableWeapons"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"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":"floor"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"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":"random"}]},{"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":" availableWeapons"},{"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  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" player \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":"const"}]},{"type":"text","value":" newPlayer "},{"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":"setWeapon"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"setPowers"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"setName"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'Ninja'"}]},{"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":"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":"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":"text","value":"newPlayer"},{"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 el contenido de "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"newPlayer"}]},{"type":"text","value":", es donde tenemos nuestra composición de funciones, lo que se suele ver como:"}]},{"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","function"]},"children":[{"type":"text","value":"f"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"g"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"x"},{"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 caso puede que sea facil de entender lo que estamos haciendo en este caso, pero si tuvieramos esta forma en soluciones más complejas puede que no nos enteremos de nada, por lo que veamos como ir mejorando nuestra teoria de la composición."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Lo primero que haremos será crear nuestro propio método "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"compose"}]},{"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":"const"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function-variable","function"]},"children":[{"type":"text","value":"compose"}]},{"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":"fns"}]},{"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","parameter"]},"children":[{"type":"text","value":"x"}]},{"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":"return"}]},{"type":"text","value":" fns"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"reduce"}]},{"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","parameter"]},"children":[{"type":"text","value":"previous"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" current"}]},{"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":"return"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"current"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"previous"},{"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":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" x"},{"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 método compose lo que hace es recibir una cantidad "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"n"}]},{"type":"text","value":" de funciones que debe aplicar sobre un valor inicial "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"x"}]},{"type":"text","value":". En este caso lo hace de "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"izquierda a derecha"}]},{"type":"text","value":", muchas veces se usa "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"reduceRight"}]},{"type":"text","value":" para hacerlo de "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"derecha a izquierda"}]},{"type":"text","value":", depende de cuales sean los métodos a usar para la composición nos interesa más una dirección u otra (por defecto derecha a izquierda aunque a mí me gusta más izquierda a derecha)."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Ahora con esta función compose solo tenemos que usarla:"}]},{"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":"compose"}]},{"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":"fns"}]},{"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","parameter"]},"children":[{"type":"text","value":"x"}]},{"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":"return"}]},{"type":"text","value":" fns"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"reduce"}]},{"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","parameter"]},"children":[{"type":"text","value":"previous"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" current"}]},{"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":"return"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"current"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"previous"},{"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":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" x"},{"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":"const"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function-variable","function"]},"children":[{"type":"text","value":"setName"}]},{"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":"name"}]},{"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":"text","value":"player"}]},{"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  player"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"name "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" name\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" player\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":"const"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function-variable","function"]},"children":[{"type":"text","value":"setPowers"}]},{"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":"player"}]},{"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":"const"}]},{"type":"text","value":" availablePowers "},{"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","string"]},"children":[{"type":"text","value":"'fly'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'invisibility'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'bulletproof'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'superstrength'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"text","value":"\n  player"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"powers "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" availablePowers"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"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":"floor"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"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":"random"}]},{"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":" availablePowers"},{"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  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" player\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":"const"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function-variable","function"]},"children":[{"type":"text","value":"setWeapon"}]},{"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":"player"}]},{"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":"const"}]},{"type":"text","value":" availableWeapons "},{"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","string"]},"children":[{"type":"text","value":"'gun'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'katana'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'ninja star'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'grenade'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"text","value":"\n  player"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"weapon "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" availableWeapons"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"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":"floor"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"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":"random"}]},{"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":" availableWeapons"},{"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  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" player \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":"const"}]},{"type":"text","value":" newPlayer "},{"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":"setWeapon"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"setPowers"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"setName"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'Ninja'"}]},{"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":"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":"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":" otherPlayer "},{"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":"compose"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"setName"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'Ninja'"}]},{"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":" setPowers"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" setWeapon"},{"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":"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\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":"text","value":"newPlayer"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\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":"text","value":"otherPlayer"},{"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":"element","tagName":"img","properties":{"src":"https://jlgarcia.fulldev.ninja/assets/images/2020/11/Captura-de-pantalla-2020-11-08-a-las-14.50.00.png","alt":"Captura-de-pantalla-2020-11-08-a-las-14.50.00"},"children":[]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Como podemos ver ambas funcionan correctamente y es un poco más sencillo de entender lo que estamos haciendo. Recuerdo que este ejemplo es un poco forzado es solo orientativo para ver la funcionalidad "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"compose"}]},{"type":"text","value":"."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Veamos el ejemplo con "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Ramda"}]}]},{"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","constant"]},"children":[{"type":"text","value":"R"}]},{"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":"require"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'ramda'"}]},{"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":"const"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function-variable","function"]},"children":[{"type":"text","value":"setName"}]},{"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":"name"}]},{"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":"text","value":"player"}]},{"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  player"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"name "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" name\n  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" player\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":"const"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function-variable","function"]},"children":[{"type":"text","value":"setPowers"}]},{"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":"player"}]},{"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":"const"}]},{"type":"text","value":" availablePowers "},{"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","string"]},"children":[{"type":"text","value":"'fly'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'invisibility'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'bulletproof'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'superstrength'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"text","value":"\n  player"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"powers "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" availablePowers"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"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":"floor"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"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":"random"}]},{"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":" availablePowers"},{"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  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" player\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":"const"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","function-variable","function"]},"children":[{"type":"text","value":"setWeapon"}]},{"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":"player"}]},{"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":"const"}]},{"type":"text","value":" availableWeapons "},{"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","string"]},"children":[{"type":"text","value":"'gun'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'katana'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'ninja star'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'grenade'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"]"}]},{"type":"text","value":"\n  player"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"text","value":"weapon "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" availableWeapons"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"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":"floor"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"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":"random"}]},{"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":" availableWeapons"},{"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  "},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"return"}]},{"type":"text","value":" player \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":"const"}]},{"type":"text","value":" newPlayer "},{"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":"setWeapon"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"setPowers"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"setName"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'Ninja'"}]},{"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":"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":"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":"// Aquí en lugar de compose usamos el método en cuestión de R que es pipe"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" otherPlayer "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","constant"]},"children":[{"type":"text","value":"R"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"pipe"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"setName"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'Ninja'"}]},{"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":" setPowers"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" setWeapon"},{"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":"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\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":"text","value":"newPlayer"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":")"}]},{"type":"text","value":"\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":"text","value":"otherPlayer"},{"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":"Solo tenemos que usar "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"pipe"}]},{"type":"text","value":" para hacerlo de izquierda a derecha o "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"compose"}]},{"type":"text","value":" para hacerlo de derecha a izquierda"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Un detalle importante a tener en cuenta y que hacemos uso en el ejemplo, es lo que se conoce como "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"programación tacita o point free"}]},{"type":"text","value":", este concepto se refiere a la omisión de los parámetros de los métodos cuando lo usamos por ejemplo en una composición como esta que hemos visto, debido a que los valores de retorno de unos métodos son los de entrada de otros por lo que como el proceso se realiza automáticamente lo podemos omitir. En este caso que hemos visto siempre se retorna el mismo objeto, pero pudiera ser cualquier otro caso mientras que se cumpla este concepto:"}]},{"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":"funcA "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"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","constant"]},"children":[{"type":"text","value":"A"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"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","constant"]},"children":[{"type":"text","value":"B"}]},{"type":"text","value":"\nfuncB "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"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","constant"]},"children":[{"type":"text","value":"B"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"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","constant"]},"children":[{"type":"text","value":"C"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","comment"]},"children":[{"type":"text","value":"// Esto lo podemos encadenar porque funcB espera como valor de entrada B que es lo que devuelve funcA"}]},{"type":"text","value":"\nfuncC"},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":":"}]},{"type":"text","value":" funcA "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"+"}]},{"type":"text","value":" funcB "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"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","constant"]},"children":[{"type":"text","value":"A"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"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","constant"]},"children":[{"type":"text","value":"B"}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"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","constant"]},"children":[{"type":"text","value":"C"}]},{"type":"text","value":"\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Creo que con esto se entiende más o menos lo básico sobre la composición, en los próximos capítulos veremos elementos más puramente funcionales como pueden ser los "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Funtores"}]},{"type":"text","value":", una abrazooooo"}]},{"type":"text","value":"\n"},{"type":"comment","value":"kg-card-end: markdown"}],"data":{"quirksMode":false}},"tableOfContents":[]},"featureImageSharp":{"base":"Capture-5-1-1.jpeg","publicURL":"/static/28e76839a7fb382fbbe244b857f2980c/Capture-5-1-1.jpeg","imageMeta":{"width":628,"height":263},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAIABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAMG/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAABz9giD//EABcQAQADAAAAAAAAAAAAAAAAAAADERL/2gAIAQEAAQUCS4t//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAFxAAAwEAAAAAAAAAAAAAAAAAAAEQEv/aAAgBAQAGPwIWJ//EABkQAAIDAQAAAAAAAAAAAAAAAAERACFREP/aAAgBAQABPyGERsI0r3n/2gAMAwEAAgADAAAAEHAP/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPxA//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPxA//8QAGhABAAIDAQAAAAAAAAAAAAAAASExABARUf/aAAgBAQABPxDERjkbBCDxvX//2Q==","aspectRatio":2.3972602739726026,"src":"/static/28e76839a7fb382fbbe244b857f2980c/fc145/Capture-5-1-1.jpg","srcSet":"/static/28e76839a7fb382fbbe244b857f2980c/477ba/Capture-5-1-1.jpg 175w,\n/static/28e76839a7fb382fbbe244b857f2980c/06776/Capture-5-1-1.jpg 350w,\n/static/28e76839a7fb382fbbe244b857f2980c/fc145/Capture-5-1-1.jpg 628w","srcWebp":"/static/28e76839a7fb382fbbe244b857f2980c/09ccc/Capture-5-1-1.webp","srcSetWebp":"/static/28e76839a7fb382fbbe244b857f2980c/9fca7/Capture-5-1-1.webp 175w,\n/static/28e76839a7fb382fbbe244b857f2980c/37a4e/Capture-5-1-1.webp 350w,\n/static/28e76839a7fb382fbbe244b857f2980c/09ccc/Capture-5-1-1.webp 628w","sizes":"(max-width: 628px) 100vw, 628px"}}}}},{"node":{"id":"Ghost__Post__5fa68e1fa6c0f5058bff43ac","title":"Javascript Funcional I: Intro e Inmutabilidad","slug":"javascript-funcional-intro","featured":false,"feature_image":"https://jlgarcia.fulldev.ninja/assets/images/2020/11/Capture-5.jpeg","excerpt":"Empezamos nueva serie donde explicaremos los conceptos básicos de la\nprogramación funcional orientados al mundo JavaScript.\nEmpecemos por lo básico, ¿qué es la programación funcional? Citando directamente\na la wikipedia\n\n> En informática, la programación funcional es un paradigma de programación\ndeclarativa basado en el uso de verdaderas funciones matemáticas. En este estilo\nde programación las funciones son ciudadanas de primera clase, porque sus\nexpresiones pueden ser asignadas a variables com","custom_excerpt":null,"visibility":"public","created_at_pretty":"7 Nov 2020","published_at_pretty":"7 Nov 2020","updated_at_pretty":"19 Jan 2021","created_at":"2020-11-07T13:07:59.000+01:00","published_at":"2020-11-07T14:57:05.000+01:00","updated_at":"2021-01-19T21:05:11.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":"funcional","url":"https://jlgarcia.fulldev.ninja/tag/funcional/","name":"funcional","visibility":"public","feature_image":null,"description":null,"meta_title":null,"meta_description":null,"featureImageSharp":null},"tags":[{"slug":"funcional","url":"https://jlgarcia.fulldev.ninja/tag/funcional/","name":"funcional","visibility":"public","feature_image":null,"description":null,"meta_title":null,"meta_description":null,"featureImageSharp":null},{"slug":"ramda","url":"https://jlgarcia.fulldev.ninja/tag/ramda/","name":"ramda","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":"Empezamos nueva serie donde explicaremos los conceptos básicos de la\nprogramación funcional orientados al mundo JavaScript.\nEmpecemos por lo básico, ¿qué es la programación funcional? Citando directamente\na la wikipedia\n\n> En informática, la programación funcional es un paradigma de programación\ndeclarativa basado en el uso de verdaderas funciones matemáticas. En este estilo\nde programación las funciones son ciudadanas de primera clase, porque sus\nexpresiones pueden ser asignadas a variables como se haría con cualquier otro\nvalor; además de que pueden crearse funciones de orden superior.\n\n\nDigamos que es un parádigma donde todo esta basado en algún tipo de función o\nteoría matemática (su centro fué el cálculo lambda) y nos obliga a realizar\nabstracciones que no son habituales en paradigmas más habituales como la\nprogramación orientada a objetos, pero esto no implica que tengamos que ser\nlicenciados en matemáticas para porder usarlo y beneficiarnos de sus ventajas.\n\nLas carácteristicas y ventajas que se suelen comentar sobre este paradigma:\n\n * En lugar de centrarse en el ¿cómo? se centra en el ¿qué? queremos hacer, lo\n   que hace que nos abstraigamos un poco más del problema que queremos resolver.\n * Como su nombre indica está básado en el trabajo con funciones, practicamente\n   todo es una función, y se tiende a la realización de funciones con un trabajo\n   mínimo y específico, por lo que tendremos funciones pequeñas donde por\n   ejemplo si estamos trabajando en un carrito de la compra existirian métodos\n   como sumar precio o añadir descuento, y estos métodos devolverían siempre lo\n   mismo siempre y cuando sus valores de entrada fueran los mismos. Muchos se\n   preguntaran pero con esto ¿cómo contruimos toda la lógica de un carrito de la\n   compra?... esto se basaría en la composición de funciones, es decir, cogemos\n   esas funciones pequeñas que hemos creado y componemos una lógica que cumpla\n   con nuestras necesidades. Siguiendo con el ejemplo del carrito si se añade\n   algo al carrito de la compra tendriamos un método añadir producto que lo que\n   podría hacer sería incluir producto al listado, sumar precio y aplicar\n   descuento. Esto ya lo veremos más adelante.\n * Usa lo que se conoce como funciones puras, estás funciones se llaman así\n   porque no tienen efectos colaterales, es decir, no cambián ni hacen nada\n   fuera del propio método (incluso un console.log es considerado un efecto\n   colateral), por eso siempre obtenemos el mismo resultado pasandole los mismos\n   parámetros.\n * Al basarse en las funciones puras es un lenguaje muy apto para el\n   paralelismo, ya que no modifica no accede a valores externos no tendremos\n   problemas de race condition o casi cualquier otro que pudiera venir surgido\n   de la concurrencia.\n * Las funciones son ciudadanos de primera clase, son funciones de orden\n   superior. Ambos casos están relacionados, las funciones de orden superior se\n   las llama asi cuando son funciones que actuan directamente sobre otras\n   funciones y entedemos funciones como ciudadanos de primera clase cuando las\n   funciones pueden ser tratadas como cualquier otro elemento del lenguaje, es\n   decir se pueden pasar como parámetros o se pueden devolver funciones\n   directamente como resultado.\n * Hace uso de lo que se conoce como recursividad, es decir, una función se\n   puede llamar a si misma, por ejemplo para recorrer un árbol de directorios,\n   podemos tener un método que sea abrir carpeta y según vaya recorriendo si el\n   fichero en cuestión no es una carpeta lo devuelve y si es una carpeta se\n   llama de nuevo a abrir carpeta y así hasta que se termina el arbol.\n * Todo es inmutable, es decir, no se modifica nada existente se crean elementos\n   nuevos dentro de las propias funciones con los cambios necesarios.\n * Suele ser un código más expresivo\n * Es un código más facilmente testeable\n * Se tiende menos a la repetición de código, ya que todo está planteado como\n   mini funciones con un trabajo en concreto, solo tenemos que reutilizarlas\n   cuando toque o componer funciones que las usen.\n\nSi me pongo podría seguir escribiendo características pero bueno en general creo\nque nos hacemos una idea de lo que os estoy vendiendo aquí y por mucho que siga\nhasta que no se vean ejemplos concretos no entenderemos lo que es esto realmente\npor lo que vamos a empezar hablando de Javascript e Inmutabilidad\n\nJavascript funcional\nPrimero hablemos un poco del caso concreto de Javascript como lenguaje\nfuncional. Para mi Javascript es de los mejores lenguajes que existen por su\nversatilidad y sus minimas obligaciones, es decir, podemos hacer lo que nos de\nla gana. Esto en general suele crear incovenientes porque no tenemos normas que\nseguir como puede ser establecer un tipo a las variables, como ya sabemos una\nvariable ahora puede ser un número y más tarde convertirse en un string sin ni\nsiquiera hacer un casting de tipos. Esta libertad viene de la mano de multitud\nde posibles errores si nos descuidamos con estas cosas (que no suelen pasar en\notros lenguajes).\nPero gracias a esto podemos programar como más nos convenga o nos guste y\ncombinar soluciones de distintos tipos para nuestro beneficio.\nComo sabemos en Javascript practicamente todo es un tipo Object o parte de un\ntipo Object, incluso las funciones, esto nos permite usar las funciones como\ncualquier otro objeto: asignarlo a variables, pasarlas por parámetro, devolver\nfunciones como resultado.... como hemos dicho al principio esto es lo básico\npara que un lenguaje sea funcional por lo que ya tenemos esta posibilidad,\nveamos como podemos cumplir con las carácteristicas básicas de un lenguaje\nfuncional: Inmutabilidad, Funciones puras, Funciones de orden superior, Uso de\ncurrificación y composición de funciones\n\nInmutabilidad\nVeamos lo primero el problema en cuestión\n\nconst oldNinjas = ['Ninja1', 'Ninja2']\nconst newNinja = 'Ninja3'\n\nconst totalNinjas = oldNinjas\ntotalNinjas.push(newNinja)\n\nconsole.log(oldNinjas) <-- Result: [ \"Ninja1\", \"Ninja2\", \"Ninja3\" ]\n\n\nComo vemos se ha modificado oldNinjas también, esto es funcionamiento interno de\nJavascript, digamos que lo que tenemos dentro de totalNinjas es una referencia\nen memoria a oldNinjas por eso hagamos lo que hagamos con totalNinjas se verá\nreproducido en oldNinjas, ojo que es un ejemplo un poco forzado para ver el caso\nconcreto, con un oldNinjas.concat no tendriamos este problema.\n\nSuponiendo que tenemos este problema tenemos varias opciones para resolverlo, la\nprimera hacemos un freeze sobre oldNinjas para que no se pueda modificar hagamos\nlo que hagamos (nos daria error) y a continuación realizamos una copia del\narray:\n\nconst oldNinjas = Object.freeze(['Ninja1', 'Ninja2'])\nconst newNinja = 'Ninja3'\n\nconst totalNinjas = [...oldNinjas] // Copiamos\ntotalNinjas.push(newNinja)\n\nconsole.log(totalNinjas) // result --> [ \"Ninja1\", \"Ninja2\", \"Ninja3\"]\nconsole.log(oldNinjas) // result --> [ \"Ninja1\", \"Ninja2\"]\n\n\n\nEsta sería una opción para cumplir con este principio, otra es usar alguna\nlibrería funcional que haga esto por nosotros, a mí la que más me gusta es Ramda\n[https://ramdajs.com/], es muy eficiente y cumple más o menos bien con los\nrequerimientos funcionales\n\nconst R = require('ramda')\n\nconst oldNinjas = Object.freeze(['Ninja1', 'Ninja2'])\nconst newNinja = 'Ninja3'\n\nconst totalNinjas = R.append(newNinja, oldNinjas)\n\nconsole.log(totalNinjas) // result --> [ \"Ninja1\", \"Ninja2\", \"Ninja3\"]\nconsole.log(oldNinjas) // result --> [ \"Ninja1\", \"Ninja2\"]\n\n\nEsto es un ejemplo de como podemos cumplir con el principio de inmutabalidad\nnecesario en la programación funcional.\n\nCreo que por el momento es suficiente para un único post, continuaremos con los\nsiguientes conceptos en proximos capítulos, cuadaaaos y un abrazooooooo","html":"<!--kg-card-begin: markdown--><p>Empezamos nueva serie donde explicaremos los conceptos básicos de la programación funcional orientados al mundo JavaScript.<br>\nEmpecemos por lo básico, ¿qué es la programación funcional? Citando directamente a la wikipedia</p>\n<blockquote>\n<p>En informática, la programación funcional es un paradigma de programación declarativa basado en el uso de verdaderas funciones matemáticas. En este estilo de programación las funciones son ciudadanas de primera clase, porque sus expresiones pueden ser asignadas a variables como se haría con cualquier otro valor; además de que pueden crearse funciones de orden superior.</p>\n</blockquote>\n<p>Digamos que es un parádigma donde todo esta basado en algún tipo de función o teoría matemática (su centro fué el cálculo lambda) y nos obliga a realizar abstracciones que no son habituales en paradigmas más habituales como la programación orientada a objetos, pero esto no implica que tengamos que ser licenciados en matemáticas para porder usarlo y beneficiarnos de sus ventajas.</p>\n<p>Las carácteristicas y ventajas que se suelen comentar sobre este paradigma:</p>\n<ul>\n<li>En lugar de centrarse en el <strong>¿cómo?</strong> se centra en el <strong>¿qué?</strong> queremos hacer, lo que hace que nos abstraigamos un poco más del problema que queremos resolver.</li>\n<li>Como su nombre indica está básado en el trabajo con funciones, practicamente todo es una función, y se tiende a la realización de funciones con un trabajo mínimo y específico, por lo que tendremos funciones pequeñas donde por ejemplo si estamos trabajando en un carrito de la compra existirian métodos como <strong>sumar precio o añadir descuento</strong>, y estos métodos devolverían siempre lo mismo siempre y cuando sus valores de entrada fueran los mismos. Muchos se preguntaran pero con esto ¿cómo contruimos toda la lógica de un carrito de la compra?... esto se basaría en la <strong>composición de funciones</strong>, es decir, cogemos esas funciones pequeñas que hemos creado y <em>componemos</em> una lógica que cumpla con nuestras necesidades. Siguiendo con el ejemplo del carrito si se añade algo al carrito de la compra tendriamos un método <strong>añadir producto</strong> que lo que podría hacer sería <strong>incluir producto al listado, sumar precio y aplicar descuento</strong>. Esto ya lo veremos más adelante.</li>\n<li>Usa lo que se conoce como <strong>funciones puras</strong>, estás funciones se llaman así porque no tienen efectos colaterales, es decir, no cambián ni hacen nada fuera del propio método (incluso un console.log es considerado un efecto colateral), por eso siempre obtenemos el mismo resultado pasandole los mismos parámetros.</li>\n<li>Al basarse en las funciones puras es un lenguaje muy apto para el paralelismo, ya que no modifica no accede a valores externos no tendremos problemas de <em>race condition</em> o casi cualquier otro que pudiera venir surgido de la concurrencia.</li>\n<li>Las funciones son <strong>ciudadanos de primera clase</strong>, son <strong>funciones de orden superior</strong>. Ambos casos están relacionados, las funciones de orden superior se las llama asi cuando son funciones que actuan directamente sobre otras funciones y entedemos funciones como ciudadanos de primera clase cuando las funciones pueden ser tratadas como cualquier otro elemento del lenguaje, es decir se pueden pasar como parámetros o se pueden devolver funciones directamente como resultado.</li>\n<li>Hace uso de lo que se conoce como <strong>recursividad</strong>, es decir, una función se puede llamar a si misma, por ejemplo para recorrer un árbol de directorios, podemos tener un método que sea <strong>abrir carpeta</strong> y según vaya recorriendo si el fichero en cuestión no es una carpeta lo devuelve y si es una carpeta se llama de nuevo a <strong>abrir carpeta</strong> y así hasta que se termina el arbol.</li>\n<li>Todo es inmutable, es decir, no se modifica nada existente se crean elementos nuevos dentro de las propias funciones con los cambios necesarios.</li>\n<li>Suele ser un código más expresivo</li>\n<li>Es un código más facilmente testeable</li>\n<li>Se tiende menos a la repetición de código, ya que todo está planteado como mini funciones con un trabajo en concreto, solo tenemos que reutilizarlas cuando toque o componer funciones que las usen.</li>\n</ul>\n<p>Si me pongo podría seguir escribiendo características pero bueno en general creo que nos hacemos una idea de lo que os estoy vendiendo aquí y por mucho que siga hasta que no se vean ejemplos concretos no entenderemos lo que es esto realmente por lo que vamos a empezar hablando de <strong>Javascript e Inmutabilidad</strong></p>\n<h2 id=\"javascriptfuncional\">Javascript funcional</h2>\n<p>Primero hablemos un poco del caso concreto de Javascript como lenguaje funcional. Para mi Javascript es de los mejores lenguajes que existen por su versatilidad y sus minimas obligaciones, es decir, <strong>podemos hacer lo que nos de la gana</strong>. Esto en general suele crear incovenientes porque no tenemos normas que seguir como puede ser establecer un tipo a las variables, como ya sabemos una variable ahora puede ser un número y más tarde convertirse en un string sin ni siquiera hacer un casting de tipos. Esta libertad viene de la mano de multitud de posibles errores si nos descuidamos con estas cosas (que no suelen pasar en otros lenguajes).<br>\nPero gracias a esto podemos programar como más nos convenga o nos guste y combinar soluciones de distintos tipos para nuestro beneficio.<br>\nComo sabemos en Javascript practicamente todo es un tipo Object o parte de un tipo Object, incluso las funciones, esto nos permite usar las funciones como cualquier otro objeto: asignarlo a variables, pasarlas por parámetro, devolver funciones como resultado.... como hemos dicho al principio esto es lo básico para que un lenguaje sea funcional por lo que ya tenemos esta posibilidad, veamos como podemos cumplir con las carácteristicas básicas de un lenguaje funcional: <strong>Inmutabilidad</strong>, <strong>Funciones puras</strong>, <strong>Funciones de orden superior</strong>, <strong>Uso de currificación</strong> y <strong>composición de funciones</strong></p>\n<h3 id=\"inmutabilidad\">Inmutabilidad</h3>\n<p>Veamos lo primero el problema en cuestión</p>\n<pre><code class=\"language-javascript\">const oldNinjas = ['Ninja1', 'Ninja2']\nconst newNinja = 'Ninja3'\n\nconst totalNinjas = oldNinjas\ntotalNinjas.push(newNinja)\n\nconsole.log(oldNinjas) &lt;-- Result: [ &quot;Ninja1&quot;, &quot;Ninja2&quot;, &quot;Ninja3&quot; ]\n</code></pre>\n<p>Como vemos se ha modificado <em>oldNinjas</em> también, esto es funcionamiento interno de Javascript, digamos que lo que tenemos dentro de <em>totalNinjas</em> es una referencia en memoria a <em>oldNinjas</em> por eso hagamos lo que hagamos con totalNinjas se verá reproducido en oldNinjas, ojo que es un ejemplo un poco forzado para ver el caso concreto, con un <strong>oldNinjas.concat</strong> no tendriamos este problema.</p>\n<p>Suponiendo que tenemos este problema tenemos varias opciones para resolverlo, la primera hacemos un <strong>freeze</strong> sobre oldNinjas para que no se pueda modificar hagamos lo que hagamos (nos daria error) y a continuación realizamos una copia del array:</p>\n<pre><code class=\"language-javascript\">const oldNinjas = Object.freeze(['Ninja1', 'Ninja2'])\nconst newNinja = 'Ninja3'\n\nconst totalNinjas = [...oldNinjas] // Copiamos\ntotalNinjas.push(newNinja)\n\nconsole.log(totalNinjas) // result --&gt; [ &quot;Ninja1&quot;, &quot;Ninja2&quot;, &quot;Ninja3&quot;]\nconsole.log(oldNinjas) // result --&gt; [ &quot;Ninja1&quot;, &quot;Ninja2&quot;]\n\n</code></pre>\n<p>Esta sería una opción para cumplir con este principio, otra es usar alguna librería funcional que haga esto por nosotros, a mí la que más me gusta es <a href=\"https://ramdajs.com/\">Ramda</a>, es muy eficiente y cumple más o menos bien con los requerimientos funcionales</p>\n<pre><code class=\"language-javascript\">const R = require('ramda')\n\nconst oldNinjas = Object.freeze(['Ninja1', 'Ninja2'])\nconst newNinja = 'Ninja3'\n\nconst totalNinjas = R.append(newNinja, oldNinjas)\n\nconsole.log(totalNinjas) // result --&gt; [ &quot;Ninja1&quot;, &quot;Ninja2&quot;, &quot;Ninja3&quot;]\nconsole.log(oldNinjas) // result --&gt; [ &quot;Ninja1&quot;, &quot;Ninja2&quot;]\n</code></pre>\n<p>Esto es un ejemplo de como podemos cumplir con el principio de inmutabalidad necesario en la programación funcional.</p>\n<p>Creo que por el momento es suficiente para un único post, continuaremos con los siguientes conceptos en proximos capítulos, cuadaaaos y un abrazooooooo</p>\n<!--kg-card-end: markdown-->","url":"https://jlgarcia.fulldev.ninja/javascript-funcional-intro/","canonical_url":null,"uuid":"b07c9ffd-7cf7-46c2-9239-a2170e2764e4","codeinjection_foot":null,"codeinjection_head":null,"codeinjection_styles":null,"comment_id":"5fa68e1fa6c0f5058bff43ac","reading_time":5,"send_email_when_published":false,"email_subject":null,"childHtmlRehype":{"html":"<!--kg-card-begin: markdown--><p>Empezamos nueva serie donde explicaremos los conceptos básicos de la programación funcional orientados al mundo JavaScript.<br>\nEmpecemos por lo básico, ¿qué es la programación funcional? Citando directamente a la wikipedia</p>\n<blockquote>\n<p>En informática, la programación funcional es un paradigma de programación declarativa basado en el uso de verdaderas funciones matemáticas. En este estilo de programación las funciones son ciudadanas de primera clase, porque sus expresiones pueden ser asignadas a variables como se haría con cualquier otro valor; además de que pueden crearse funciones de orden superior.</p>\n</blockquote>\n<p>Digamos que es un parádigma donde todo esta basado en algún tipo de función o teoría matemática (su centro fué el cálculo lambda) y nos obliga a realizar abstracciones que no son habituales en paradigmas más habituales como la programación orientada a objetos, pero esto no implica que tengamos que ser licenciados en matemáticas para porder usarlo y beneficiarnos de sus ventajas.</p>\n<p>Las carácteristicas y ventajas que se suelen comentar sobre este paradigma:</p>\n<ul>\n<li>En lugar de centrarse en el <strong>¿cómo?</strong> se centra en el <strong>¿qué?</strong> queremos hacer, lo que hace que nos abstraigamos un poco más del problema que queremos resolver.</li>\n<li>Como su nombre indica está básado en el trabajo con funciones, practicamente todo es una función, y se tiende a la realización de funciones con un trabajo mínimo y específico, por lo que tendremos funciones pequeñas donde por ejemplo si estamos trabajando en un carrito de la compra existirian métodos como <strong>sumar precio o añadir descuento</strong>, y estos métodos devolverían siempre lo mismo siempre y cuando sus valores de entrada fueran los mismos. Muchos se preguntaran pero con esto ¿cómo contruimos toda la lógica de un carrito de la compra?... esto se basaría en la <strong>composición de funciones</strong>, es decir, cogemos esas funciones pequeñas que hemos creado y <em>componemos</em> una lógica que cumpla con nuestras necesidades. Siguiendo con el ejemplo del carrito si se añade algo al carrito de la compra tendriamos un método <strong>añadir producto</strong> que lo que podría hacer sería <strong>incluir producto al listado, sumar precio y aplicar descuento</strong>. Esto ya lo veremos más adelante.</li>\n<li>Usa lo que se conoce como <strong>funciones puras</strong>, estás funciones se llaman así porque no tienen efectos colaterales, es decir, no cambián ni hacen nada fuera del propio método (incluso un console.log es considerado un efecto colateral), por eso siempre obtenemos el mismo resultado pasandole los mismos parámetros.</li>\n<li>Al basarse en las funciones puras es un lenguaje muy apto para el paralelismo, ya que no modifica no accede a valores externos no tendremos problemas de <em>race condition</em> o casi cualquier otro que pudiera venir surgido de la concurrencia.</li>\n<li>Las funciones son <strong>ciudadanos de primera clase</strong>, son <strong>funciones de orden superior</strong>. Ambos casos están relacionados, las funciones de orden superior se las llama asi cuando son funciones que actuan directamente sobre otras funciones y entedemos funciones como ciudadanos de primera clase cuando las funciones pueden ser tratadas como cualquier otro elemento del lenguaje, es decir se pueden pasar como parámetros o se pueden devolver funciones directamente como resultado.</li>\n<li>Hace uso de lo que se conoce como <strong>recursividad</strong>, es decir, una función se puede llamar a si misma, por ejemplo para recorrer un árbol de directorios, podemos tener un método que sea <strong>abrir carpeta</strong> y según vaya recorriendo si el fichero en cuestión no es una carpeta lo devuelve y si es una carpeta se llama de nuevo a <strong>abrir carpeta</strong> y así hasta que se termina el arbol.</li>\n<li>Todo es inmutable, es decir, no se modifica nada existente se crean elementos nuevos dentro de las propias funciones con los cambios necesarios.</li>\n<li>Suele ser un código más expresivo</li>\n<li>Es un código más facilmente testeable</li>\n<li>Se tiende menos a la repetición de código, ya que todo está planteado como mini funciones con un trabajo en concreto, solo tenemos que reutilizarlas cuando toque o componer funciones que las usen.</li>\n</ul>\n<p>Si me pongo podría seguir escribiendo características pero bueno en general creo que nos hacemos una idea de lo que os estoy vendiendo aquí y por mucho que siga hasta que no se vean ejemplos concretos no entenderemos lo que es esto realmente por lo que vamos a empezar hablando de <strong>Javascript e Inmutabilidad</strong></p>\n<h2 id=\"javascriptfuncional\">Javascript funcional</h2>\n<p>Primero hablemos un poco del caso concreto de Javascript como lenguaje funcional. Para mi Javascript es de los mejores lenguajes que existen por su versatilidad y sus minimas obligaciones, es decir, <strong>podemos hacer lo que nos de la gana</strong>. Esto en general suele crear incovenientes porque no tenemos normas que seguir como puede ser establecer un tipo a las variables, como ya sabemos una variable ahora puede ser un número y más tarde convertirse en un string sin ni siquiera hacer un casting de tipos. Esta libertad viene de la mano de multitud de posibles errores si nos descuidamos con estas cosas (que no suelen pasar en otros lenguajes).<br>\nPero gracias a esto podemos programar como más nos convenga o nos guste y combinar soluciones de distintos tipos para nuestro beneficio.<br>\nComo sabemos en Javascript practicamente todo es un tipo Object o parte de un tipo Object, incluso las funciones, esto nos permite usar las funciones como cualquier otro objeto: asignarlo a variables, pasarlas por parámetro, devolver funciones como resultado.... como hemos dicho al principio esto es lo básico para que un lenguaje sea funcional por lo que ya tenemos esta posibilidad, veamos como podemos cumplir con las carácteristicas básicas de un lenguaje funcional: <strong>Inmutabilidad</strong>, <strong>Funciones puras</strong>, <strong>Funciones de orden superior</strong>, <strong>Uso de currificación</strong> y <strong>composición de funciones</strong></p>\n<h3 id=\"inmutabilidad\">Inmutabilidad</h3>\n<p>Veamos lo primero el problema 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> oldNinjas <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span><span class=\"token string\">'Ninja1'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'Ninja2'</span><span class=\"token punctuation\">]</span>\n<span class=\"token keyword\">const</span> newNinja <span class=\"token operator\">=</span> <span class=\"token string\">'Ninja3'</span>\n\n<span class=\"token keyword\">const</span> totalNinjas <span class=\"token operator\">=</span> oldNinjas\ntotalNinjas<span class=\"token punctuation\">.</span><span class=\"token function\">push</span><span class=\"token punctuation\">(</span>newNinja<span class=\"token punctuation\">)</span>\n\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>oldNinjas<span class=\"token punctuation\">)</span> <span class=\"token operator\">&#x3C;</span><span class=\"token operator\">--</span> Result<span class=\"token operator\">:</span> <span class=\"token punctuation\">[</span> <span class=\"token string\">\"Ninja1\"</span><span class=\"token punctuation\">,</span> <span class=\"token string\">\"Ninja2\"</span><span class=\"token punctuation\">,</span> <span class=\"token string\">\"Ninja3\"</span> <span class=\"token punctuation\">]</span>\n</code></pre></div>\n<p>Como vemos se ha modificado <em>oldNinjas</em> también, esto es funcionamiento interno de Javascript, digamos que lo que tenemos dentro de <em>totalNinjas</em> es una referencia en memoria a <em>oldNinjas</em> por eso hagamos lo que hagamos con totalNinjas se verá reproducido en oldNinjas, ojo que es un ejemplo un poco forzado para ver el caso concreto, con un <strong>oldNinjas.concat</strong> no tendriamos este problema.</p>\n<p>Suponiendo que tenemos este problema tenemos varias opciones para resolverlo, la primera hacemos un <strong>freeze</strong> sobre oldNinjas para que no se pueda modificar hagamos lo que hagamos (nos daria error) y a continuación realizamos una copia del 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 keyword\">const</span> oldNinjas <span class=\"token operator\">=</span> Object<span class=\"token punctuation\">.</span><span class=\"token function\">freeze</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">[</span><span class=\"token string\">'Ninja1'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'Ninja2'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span>\n<span class=\"token keyword\">const</span> newNinja <span class=\"token operator\">=</span> <span class=\"token string\">'Ninja3'</span>\n\n<span class=\"token keyword\">const</span> totalNinjas <span class=\"token operator\">=</span> <span class=\"token punctuation\">[</span><span class=\"token operator\">...</span>oldNinjas<span class=\"token punctuation\">]</span> <span class=\"token comment\">// Copiamos</span>\ntotalNinjas<span class=\"token punctuation\">.</span><span class=\"token function\">push</span><span class=\"token punctuation\">(</span>newNinja<span class=\"token punctuation\">)</span>\n\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>totalNinjas<span class=\"token punctuation\">)</span> <span class=\"token comment\">// result --> [ \"Ninja1\", \"Ninja2\", \"Ninja3\"]</span>\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>oldNinjas<span class=\"token punctuation\">)</span> <span class=\"token comment\">// result --> [ \"Ninja1\", \"Ninja2\"]</span>\n\n</code></pre></div>\n<p>Esta sería una opción para cumplir con este principio, otra es usar alguna librería funcional que haga esto por nosotros, a mí la que más me gusta es <a href=\"https://ramdajs.com/\">Ramda</a>, es muy eficiente y cumple más o menos bien con los requerimientos funcionales</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 constant\">R</span> <span class=\"token operator\">=</span> <span class=\"token function\">require</span><span class=\"token punctuation\">(</span><span class=\"token string\">'ramda'</span><span class=\"token punctuation\">)</span>\n\n<span class=\"token keyword\">const</span> oldNinjas <span class=\"token operator\">=</span> Object<span class=\"token punctuation\">.</span><span class=\"token function\">freeze</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">[</span><span class=\"token string\">'Ninja1'</span><span class=\"token punctuation\">,</span> <span class=\"token string\">'Ninja2'</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span>\n<span class=\"token keyword\">const</span> newNinja <span class=\"token operator\">=</span> <span class=\"token string\">'Ninja3'</span>\n\n<span class=\"token keyword\">const</span> totalNinjas <span class=\"token operator\">=</span> <span class=\"token constant\">R</span><span class=\"token punctuation\">.</span><span class=\"token function\">append</span><span class=\"token punctuation\">(</span>newNinja<span class=\"token punctuation\">,</span> oldNinjas<span class=\"token punctuation\">)</span>\n\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>totalNinjas<span class=\"token punctuation\">)</span> <span class=\"token comment\">// result --> [ \"Ninja1\", \"Ninja2\", \"Ninja3\"]</span>\nconsole<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>oldNinjas<span class=\"token punctuation\">)</span> <span class=\"token comment\">// result --> [ \"Ninja1\", \"Ninja2\"]</span>\n</code></pre></div>\n<p>Esto es un ejemplo de como podemos cumplir con el principio de inmutabalidad necesario en la programación funcional.</p>\n<p>Creo que por el momento es suficiente para un único post, continuaremos con los siguientes conceptos en proximos capítulos, cuadaaaos y un abrazooooooo</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":"Empezamos nueva serie donde explicaremos los conceptos básicos de la programación funcional orientados al mundo JavaScript."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nEmpecemos por lo básico, ¿qué es la programación funcional? Citando directamente a la wikipedia"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"blockquote","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"En informática, la programación funcional es un paradigma de programación declarativa basado en el uso de verdaderas funciones matemáticas. En este estilo de programación las funciones son ciudadanas de primera clase, porque sus expresiones pueden ser asignadas a variables como se haría con cualquier otro valor; además de que pueden crearse funciones de orden superior."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Digamos que es un parádigma donde todo esta basado en algún tipo de función o teoría matemática (su centro fué el cálculo lambda) y nos obliga a realizar abstracciones que no son habituales en paradigmas más habituales como la programación orientada a objetos, pero esto no implica que tengamos que ser licenciados en matemáticas para porder usarlo y beneficiarnos de sus ventajas."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Las carácteristicas y ventajas que se suelen comentar sobre este paradigma:"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"ul","properties":{},"children":[{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"En lugar de centrarse en el "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"¿cómo?"}]},{"type":"text","value":" se centra en el "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"¿qué?"}]},{"type":"text","value":" queremos hacer, lo que hace que nos abstraigamos un poco más del problema que queremos resolver."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Como su nombre indica está básado en el trabajo con funciones, practicamente todo es una función, y se tiende a la realización de funciones con un trabajo mínimo y específico, por lo que tendremos funciones pequeñas donde por ejemplo si estamos trabajando en un carrito de la compra existirian métodos como "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"sumar precio o añadir descuento"}]},{"type":"text","value":", y estos métodos devolverían siempre lo mismo siempre y cuando sus valores de entrada fueran los mismos. Muchos se preguntaran pero con esto ¿cómo contruimos toda la lógica de un carrito de la compra?... esto se basaría en la "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"composición de funciones"}]},{"type":"text","value":", es decir, cogemos esas funciones pequeñas que hemos creado y "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"componemos"}]},{"type":"text","value":" una lógica que cumpla con nuestras necesidades. Siguiendo con el ejemplo del carrito si se añade algo al carrito de la compra tendriamos un método "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"añadir producto"}]},{"type":"text","value":" que lo que podría hacer sería "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"incluir producto al listado, sumar precio y aplicar descuento"}]},{"type":"text","value":". Esto ya lo veremos más adelante."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Usa lo que se conoce como "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"funciones puras"}]},{"type":"text","value":", estás funciones se llaman así porque no tienen efectos colaterales, es decir, no cambián ni hacen nada fuera del propio método (incluso un console.log es considerado un efecto colateral), por eso siempre obtenemos el mismo resultado pasandole los mismos parámetros."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Al basarse en las funciones puras es un lenguaje muy apto para el paralelismo, ya que no modifica no accede a valores externos no tendremos problemas de "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"race condition"}]},{"type":"text","value":" o casi cualquier otro que pudiera venir surgido de la concurrencia."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Las funciones son "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"ciudadanos de primera clase"}]},{"type":"text","value":", son "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"funciones de orden superior"}]},{"type":"text","value":". Ambos casos están relacionados, las funciones de orden superior se las llama asi cuando son funciones que actuan directamente sobre otras funciones y entedemos funciones como ciudadanos de primera clase cuando las funciones pueden ser tratadas como cualquier otro elemento del lenguaje, es decir se pueden pasar como parámetros o se pueden devolver funciones directamente como resultado."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Hace uso de lo que se conoce como "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"recursividad"}]},{"type":"text","value":", es decir, una función se puede llamar a si misma, por ejemplo para recorrer un árbol de directorios, podemos tener un método que sea "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"abrir carpeta"}]},{"type":"text","value":" y según vaya recorriendo si el fichero en cuestión no es una carpeta lo devuelve y si es una carpeta se llama de nuevo a "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"abrir carpeta"}]},{"type":"text","value":" y así hasta que se termina el arbol."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Todo es inmutable, es decir, no se modifica nada existente se crean elementos nuevos dentro de las propias funciones con los cambios necesarios."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Suele ser un código más expresivo"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Es un código más facilmente testeable"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"li","properties":{},"children":[{"type":"text","value":"Se tiende menos a la repetición de código, ya que todo está planteado como mini funciones con un trabajo en concreto, solo tenemos que reutilizarlas cuando toque o componer funciones que las usen."}]},{"type":"text","value":"\n"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Si me pongo podría seguir escribiendo características pero bueno en general creo que nos hacemos una idea de lo que os estoy vendiendo aquí y por mucho que siga hasta que no se vean ejemplos concretos no entenderemos lo que es esto realmente por lo que vamos a empezar hablando de "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Javascript e Inmutabilidad"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h2","properties":{"id":"javascriptfuncional"},"children":[{"type":"text","value":"Javascript funcional"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Primero hablemos un poco del caso concreto de Javascript como lenguaje funcional. Para mi Javascript es de los mejores lenguajes que existen por su versatilidad y sus minimas obligaciones, es decir, "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"podemos hacer lo que nos de la gana"}]},{"type":"text","value":". Esto en general suele crear incovenientes porque no tenemos normas que seguir como puede ser establecer un tipo a las variables, como ya sabemos una variable ahora puede ser un número y más tarde convertirse en un string sin ni siquiera hacer un casting de tipos. Esta libertad viene de la mano de multitud de posibles errores si nos descuidamos con estas cosas (que no suelen pasar en otros lenguajes)."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nPero gracias a esto podemos programar como más nos convenga o nos guste y combinar soluciones de distintos tipos para nuestro beneficio."},{"type":"element","tagName":"br","properties":{},"children":[]},{"type":"text","value":"\nComo sabemos en Javascript practicamente todo es un tipo Object o parte de un tipo Object, incluso las funciones, esto nos permite usar las funciones como cualquier otro objeto: asignarlo a variables, pasarlas por parámetro, devolver funciones como resultado.... como hemos dicho al principio esto es lo básico para que un lenguaje sea funcional por lo que ya tenemos esta posibilidad, veamos como podemos cumplir con las carácteristicas básicas de un lenguaje funcional: "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Inmutabilidad"}]},{"type":"text","value":", "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Funciones puras"}]},{"type":"text","value":", "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Funciones de orden superior"}]},{"type":"text","value":", "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"Uso de currificación"}]},{"type":"text","value":" y "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"composición de funciones"}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"h3","properties":{"id":"inmutabilidad"},"children":[{"type":"text","value":"Inmutabilidad"}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Veamos lo primero el problema 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":" oldNinjas "},{"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","string"]},"children":[{"type":"text","value":"'Ninja1'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'Ninja2'"}]},{"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":" newNinja "},{"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":"'Ninja3'"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" totalNinjas "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" oldNinjas\ntotalNinjas"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"push"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"newNinja"},{"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":"text","value":"oldNinjas"},{"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":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"--"}]},{"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","punctuation"]},"children":[{"type":"text","value":"["}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"Ninja1\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"Ninja2\""}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"\"Ninja3\""}]},{"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 se ha modificado "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"oldNinjas"}]},{"type":"text","value":" también, esto es funcionamiento interno de Javascript, digamos que lo que tenemos dentro de "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"totalNinjas"}]},{"type":"text","value":" es una referencia en memoria a "},{"type":"element","tagName":"em","properties":{},"children":[{"type":"text","value":"oldNinjas"}]},{"type":"text","value":" por eso hagamos lo que hagamos con totalNinjas se verá reproducido en oldNinjas, ojo que es un ejemplo un poco forzado para ver el caso concreto, con un "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"oldNinjas.concat"}]},{"type":"text","value":" no tendriamos este problema."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Suponiendo que tenemos este problema tenemos varias opciones para resolverlo, la primera hacemos un "},{"type":"element","tagName":"strong","properties":{},"children":[{"type":"text","value":"freeze"}]},{"type":"text","value":" sobre oldNinjas para que no se pueda modificar hagamos lo que hagamos (nos daria error) y a continuación realizamos una copia del 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","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" oldNinjas "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" Object"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"freeze"}]},{"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","string"]},"children":[{"type":"text","value":"'Ninja1'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'Ninja2'"}]},{"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":" newNinja "},{"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":"'Ninja3'"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" totalNinjas "},{"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","operator"]},"children":[{"type":"text","value":"..."}]},{"type":"text","value":"oldNinjas"},{"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":"// Copiamos"}]},{"type":"text","value":"\ntotalNinjas"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"push"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"newNinja"},{"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":"text","value":"totalNinjas"},{"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":"// result --> [ \"Ninja1\", \"Ninja2\", \"Ninja3\"]"}]},{"type":"text","value":"\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":"text","value":"oldNinjas"},{"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":"// result --> [ \"Ninja1\", \"Ninja2\"]"}]},{"type":"text","value":"\n\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Esta sería una opción para cumplir con este principio, otra es usar alguna librería funcional que haga esto por nosotros, a mí la que más me gusta es "},{"type":"element","tagName":"a","properties":{"href":"https://ramdajs.com/"},"children":[{"type":"text","value":"Ramda"}]},{"type":"text","value":", es muy eficiente y cumple más o menos bien con los requerimientos funcionales"}]},{"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","constant"]},"children":[{"type":"text","value":"R"}]},{"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":"require"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'ramda'"}]},{"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":"const"}]},{"type":"text","value":" oldNinjas "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" Object"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"freeze"}]},{"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","string"]},"children":[{"type":"text","value":"'Ninja1'"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","string"]},"children":[{"type":"text","value":"'Ninja2'"}]},{"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":" newNinja "},{"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":"'Ninja3'"}]},{"type":"text","value":"\n\n"},{"type":"element","tagName":"span","properties":{"className":["token","keyword"]},"children":[{"type":"text","value":"const"}]},{"type":"text","value":" totalNinjas "},{"type":"element","tagName":"span","properties":{"className":["token","operator"]},"children":[{"type":"text","value":"="}]},{"type":"text","value":" "},{"type":"element","tagName":"span","properties":{"className":["token","constant"]},"children":[{"type":"text","value":"R"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"."}]},{"type":"element","tagName":"span","properties":{"className":["token","function"]},"children":[{"type":"text","value":"append"}]},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":"("}]},{"type":"text","value":"newNinja"},{"type":"element","tagName":"span","properties":{"className":["token","punctuation"]},"children":[{"type":"text","value":","}]},{"type":"text","value":" oldNinjas"},{"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":"text","value":"totalNinjas"},{"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":"// result --> [ \"Ninja1\", \"Ninja2\", \"Ninja3\"]"}]},{"type":"text","value":"\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":"text","value":"oldNinjas"},{"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":"// result --> [ \"Ninja1\", \"Ninja2\"]"}]},{"type":"text","value":"\n"}]}]}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Esto es un ejemplo de como podemos cumplir con el principio de inmutabalidad necesario en la programación funcional."}]},{"type":"text","value":"\n"},{"type":"element","tagName":"p","properties":{},"children":[{"type":"text","value":"Creo que por el momento es suficiente para un único post, continuaremos con los siguientes conceptos en proximos capítulos, cuadaaaos y un abrazooooooo"}]},{"type":"text","value":"\n"},{"type":"comment","value":"kg-card-end: markdown"}],"data":{"quirksMode":false}},"tableOfContents":[{"id":"javascriptfuncional","heading":"Javascript funcional","items":[{"id":"inmutabilidad","heading":"Inmutabilidad"}]}]},"featureImageSharp":{"base":"Capture-5.jpeg","publicURL":"/static/28e76839a7fb382fbbe244b857f2980c/Capture-5.jpeg","imageMeta":{"width":628,"height":263},"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAIABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAMG/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAABz9giD//EABcQAQADAAAAAAAAAAAAAAAAAAADERL/2gAIAQEAAQUCS4t//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAFxAAAwEAAAAAAAAAAAAAAAAAAAEQEv/aAAgBAQAGPwIWJ//EABkQAAIDAQAAAAAAAAAAAAAAAAERACFREP/aAAgBAQABPyGERsI0r3n/2gAMAwEAAgADAAAAEHAP/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPxA//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPxA//8QAGhABAAIDAQAAAAAAAAAAAAAAASExABARUf/aAAgBAQABPxDERjkbBCDxvX//2Q==","aspectRatio":2.3972602739726026,"src":"/static/28e76839a7fb382fbbe244b857f2980c/fc145/Capture-5.jpg","srcSet":"/static/28e76839a7fb382fbbe244b857f2980c/477ba/Capture-5.jpg 175w,\n/static/28e76839a7fb382fbbe244b857f2980c/06776/Capture-5.jpg 350w,\n/static/28e76839a7fb382fbbe244b857f2980c/fc145/Capture-5.jpg 628w","srcWebp":"/static/28e76839a7fb382fbbe244b857f2980c/09ccc/Capture-5.webp","srcSetWebp":"/static/28e76839a7fb382fbbe244b857f2980c/9fca7/Capture-5.webp 175w,\n/static/28e76839a7fb382fbbe244b857f2980c/37a4e/Capture-5.webp 350w,\n/static/28e76839a7fb382fbbe244b857f2980c/09ccc/Capture-5.webp 628w","sizes":"(max-width: 628px) 100vw, 628px"}}}}}]}},"pageContext":{"slug":"javascript-funcional-ii","prev":"kubernetes-i-intro-e-instalacion","next":"js-algoritmos-y-estructurdas","tag":"funcional","limit":3,"skip":0,"primaryTagCount":3,"collectionPaths":{}}},
    "staticQueryHashes": ["1272700106","1676991999","2138873178","2546165603","2681841279","2938721187","293880488","3052966952","4156497161"]}