{"id":3562,"date":"2018-04-24T20:28:59","date_gmt":"2018-04-25T02:28:59","guid":{"rendered":"http:\/\/pensemosweb.com.mx\/index.php\/2018\/04\/25\/introduccion-programacion-funcional\/"},"modified":"2024-04-14T16:42:58","modified_gmt":"2024-04-14T22:42:58","slug":"introduccion-programacion-funcional","status":"publish","type":"post","link":"https:\/\/pensemosweb.com\/en\/introduccion-programacion-funcional\/","title":{"rendered":"Introduction to functional programming"},"content":{"rendered":"<h2 class=\"wp-block-heading\">Origin<\/h2>\n\n\n\n<p>El origen de la programaci\u00f3n funcional data del a\u00f1o 1936, cuando un matem\u00e1tico llamado <strong>Alonzo Church<\/strong> necesitaba resolver un problema complejo, del cual no hablaremos aqu\u00ed, pero Alonzo cre\u00f3 una soluci\u00f3n, el <a href=\"https:\/\/es.wikipedia.org\/wiki\/C%C3%A1lculo_lambda\" target=\"_blank\" rel=\"noreferrer noopener\">lambda calculus<\/a>. De esta forma naci\u00f3 la programaci\u00f3n funcional, incluso mucho antes de la primera computadora digital programable y de los primeros programas escritos en ensamblador.<\/p>\n\n\n\n<p>La programaci\u00f3n funcional es mucho m\u00e1s antigua que la programaci\u00f3n estructurada y la programaci\u00f3n orientada a objetos. Te recomiendo tambi\u00e9n revisar esta informaci\u00f3n sobre el <a href=\"https:\/\/pensemosweb.com\/en\/paradigma-programacion-javascript\/#Paradigma_de_programacion_funcional\">paradigma de programaci\u00f3n funcional<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"sinefectoscolaterales\"><em>Sin efectos <\/em>colaterales<\/h2>\n\n\n\n<p>Todo lo que necesitas saber sobre <strong>functional programming<\/strong> es que <strong>&#8220;No tiene efectos colaterales<\/strong>&#8220;, es decir, que sus elementos (funciones) son inmutables. <\/p>\n\n\n\n<p>Lo anterior significa que una funci\u00f3n no se mete en lo absoluto con datos que existen fuera de ella, si puede utilizar los datos enviados como par\u00e1metros, pero no debe modificarlos, todos los datos deben ser inmutables, \u00bfPor qu\u00e9?, pues porque as\u00ed hacemos las cosas m\u00e1s simples y con menos errores, m\u00e1s adelante tenemos un ejemplo. A este comportamiento se le llama<strong> puro<\/strong>.<\/p>\n\n\n\n<p><strong>No side effects <\/strong>nos permite entender todas las dem\u00e1s caracter\u00edsticas de la programaci\u00f3n funcional, por mencionar algunas principales:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Funciones puras<\/li>\n\n\n\n<li>Inmutabilidad<\/li>\n\n\n\n<li>Funciones de alto nivel<\/li>\n\n\n\n<li>Funciones currificadas<\/li>\n\n\n\n<li>Recursividad<\/li>\n\n\n\n<li>Menos errores de programaci\u00f3n porque no realiza efectos colaterales.<\/li>\n<\/ul>\n\n\n\n<p>Toda funci\u00f3n teniendo ciertos par\u00e1metros, cuando se ejecuta, obtendremos un resultado basado en esos par\u00e1metros, y si volvemos a utilizar los mismos parametros, entonces la funci\u00f3n regresara el mismo valor. Esto es debido a que una funci\u00f3n no depende de m\u00e1s datos externos que puedan ser modificados, as\u00ed tendremos m\u00e1s seguridad y nuestro c\u00f3digo se vuelve m\u00e1s entendible. <\/p>\n\n\n\n<p><a rel=\"noopener noreferrer\" href=\"https:\/\/pensemosweb.com\/en\/introduccion-javascript\/\" target=\"__blank\">Javascript es un lenguaje de programaci\u00f3n muy potente y multiparadigma<\/a>, soporta el <a href=\"https:\/\/pensemosweb.com\/en\/paradigma-programacion-javascript\/#Paradigma_de_programacion_funcional\">paradigma funcional<\/a> y lo utilizaremos para nuestros ejemplos. <\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"funcinespuraseinmutabilidad\">Funciones puras e inmutabilidad<\/h2>\n\n\n\n<p>Bueno, realmente ya explicamos de manera indirecta que es una funci\u00f3n pura en los p\u00e1rrafos anteriores, pero veamos una definici\u00f3n formal. Una <strong>funci\u00f3n pura <\/strong>es la que cumple con estas dos caracter\u00edsticas:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Siempre obtendremos el mismo resultado dado los mismos par\u00e1metros de entrada.<\/li>\n\n\n\n<li>No tiene ning\u00fan efecto colateral observable, no modifica el estado de los datos externos, por lo que todos los datos deben ser <strong>inmutables<\/strong>.<\/li>\n<\/ol>\n\n\n\n<p>Un ejemplo de como cambiar el nombre de una objeto persona usando primero una funci\u00f3n con efector colaterales:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"function cambiarNombre(nombre) {  persona.nombre = nombre;}const jaime = { nombre: 'Jaime', edad: 30 };cambiarNombre('Juan')console.log(jaime); \/\/ { nombre: 'Juan', edad: 30 }\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #C792EA\">functions<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #82AAFF\">cambiarNombre<\/span><span style=\"color: #89DDFF\">(<\/span><span style=\"color: #BABED8; font-style: italic\">name<\/span><span style=\"color: #89DDFF\">)<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #BABED8\">person<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">name<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">name<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #C792EA\">const<\/span><span style=\"color: #BABED8\"> James <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">name<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #C3E88D\">Jaime<\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">edad<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F78C6C\">30<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">};<\/span><\/span>\n<span class=\"line\"><span style=\"color: #82AAFF\">cambiarNombre<\/span><span style=\"color: #BABED8\">(<\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #C3E88D\">Juan<\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #BABED8\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">console<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">log<\/span><span style=\"color: #BABED8\">(jaime)<\/span><span style=\"color: #89DDFF\">;<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #464B5D; font-style: italic\">\/\/ { nombre: &#39;Juan&#39;, edad: 30 }<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>En la anterior funci\u00f3n notamos que se cambia objeto <code>James<\/code>, el cual supongamos que es parte del estado de nuestra aplicaci\u00f3n, pero puede haber otras funciones que utilicen este objeto, por lo que se puede generar problemas si alguien m\u00e1s espera que la propiedad <code>name<\/code> del objeto siga siendo <code>'jaime'<\/code>.<\/p>\n\n\n\n<p>Ahora veamos la versi\u00f3n funcional de la funci\u00f3n:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"function cambiarNombre(nombre, persona) {  return {    nombre: nombre,    edad: persona.edad  }}const jaime = { nombre: 'Jaime', edad: 30 };const juan = cambiarNombre('Juan', jaime);console.log(jaime); \/\/ { nombre: 'Jaime', edad: 30 }console.log(juan); \/\/ { nombre: 'Juan', edad: 30 }\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #C792EA\">functions<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #82AAFF\">cambiarNombre<\/span><span style=\"color: #89DDFF\">(<\/span><span style=\"color: #BABED8; font-style: italic\">name<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #BABED8; font-style: italic\">person<\/span><span style=\"color: #89DDFF\">)<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #89DDFF; font-style: italic\">return<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">    name<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">name<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">    edad<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">person<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">edad<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #89DDFF\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #C792EA\">const<\/span><span style=\"color: #BABED8\"> James <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">name<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #C3E88D\">Jaime<\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">edad<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F78C6C\">30<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">};<\/span><\/span>\n<span class=\"line\"><span style=\"color: #C792EA\">const<\/span><span style=\"color: #BABED8\"> juan <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #82AAFF\">cambiarNombre<\/span><span style=\"color: #BABED8\">(<\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #C3E88D\">Juan<\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> jaime)<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">console<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">log<\/span><span style=\"color: #BABED8\">(jaime)<\/span><span style=\"color: #89DDFF\">;<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #464B5D; font-style: italic\">\/\/ { nombre: &#39;Jaime&#39;, edad: 30 }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">console<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">log<\/span><span style=\"color: #BABED8\">(juan)<\/span><span style=\"color: #89DDFF\">;<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #464B5D; font-style: italic\">\/\/ { nombre: &#39;Juan&#39;, edad: 30 }<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>En la versi\u00f3n funcional, <code>cambiarNombre<\/code> no modifica el objeto <code>James<\/code>, m\u00e1s bien crea un nuevo objeto con la misma edad que <code>James<\/code> y con la propiedad <code>name<\/code> equal to <code>'Juan'<\/code>, con esto evitamos efectos colaterales por si el objeto <code>James<\/code> es utilizado por otra funci\u00f3n u otro programador.<\/p>\n\n\n\n<p>Con esta funci\u00f3n sin efecto colateral, nos damos cuenta de que los datos se manejan sin ser modificados, es decir, <strong>inmutables<\/strong>, los par\u00e1metros <code>person<\/code> and <code>name<\/code> nunca fueron cambiados.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"funcionesdealtonivelycurrificadas\">Funciones de alto nivel y currificadas<\/h2>\n\n\n\n<p>Una funci\u00f3n de alto nivel es una funci\u00f3n que implementa al menos una de las opciones siguientes:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Recibir como par\u00e1metro una o m\u00e1s funciones<\/li>\n\n\n\n<li>Regresar como resultado una funci\u00f3n<\/li>\n<\/ul>\n\n\n\n<p>Un ejemplo muy com\u00fan usado en nuestro navegador web es agregar escuchadores de eventos:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;button id=&quot;boton&quot;&gt;Soy un bot\u00f3n&lt;\/button&gt;const boton = document.querySelector('#boton');boton.addEventListener('click', function () {  alert('Click sobre el boton');});\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">button<\/span><span style=\"color: #89DDFF\"> <\/span><span style=\"color: #C792EA\">id<\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">boton<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">&gt;<\/span><span style=\"color: #BABED8\">Soy un bot\u00f3n<\/span><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">button<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #C792EA\">const<\/span><span style=\"color: #BABED8\"> boton <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #BABED8\"> document<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">querySelector<\/span><span style=\"color: #BABED8\">(<\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #C3E88D\">#boton<\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #BABED8\">)<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">boton<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">addEventListener<\/span><span style=\"color: #BABED8\">(<\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #C3E88D\">click<\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #C792EA\">functions<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">()<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #82AAFF\">alert<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #C3E88D\">Click sobre el boton<\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #F07178\">)<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #BABED8\">)<\/span><span style=\"color: #89DDFF\">;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>En el c\u00f3digo pasamos como segundo par\u00e1metro del m\u00e9todo <code>addEventListener<\/code> una<strong> <em>funci\u00f3n an\u00f3nima<\/em><\/strong> (sin nombre) que mostrar\u00e1 un alerta al dar <code>click<\/code> sobre un bot\u00f3n con <code>id<\/code> igual a &#8216;bot\u00f3n&#8217;. Dado que pasamos por par\u00e1metro una funci\u00f3n, entonces se dice que es una funci\u00f3n de alto nivel.<\/p>\n\n\n\n<p>Otro ejemplo de funci\u00f3n de alto nivel lo podemos observar en los m\u00e9todos de arreglos en Javascript, el c\u00f3digo de abajo toma un arreglo de n\u00fameros y crea otro arreglo con los valores aumentados al doble.<\/p>\n\n\n\n<p class=\"codepen\" data-height=\"400\" data-theme-id=\"default\" data-default-tab=\"js\" data-user=\"jaime_cervantes_ve\" data-slug-hash=\"xxxeaMP\" style=\"height: 400px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Funciones de alto nivel\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/jaime_cervantes_ve\/pen\/xxxeaMP\">\n  Funciones de alto nivel<\/a> by Jaime Cervantes Velasco (<a href=\"https:\/\/codepen.io\/jaime_cervantes_ve\">@jaime_cervantes_ve<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n<p><\/p>\n\n\n\n<p>The function <code>map<\/code> retorna un nuevo arreglo, no cambia el arreglo <code>original<\/code>, por lo que decimos que no existe un efecto colateral.<\/p>\n\n\n\n<p>Las <strong>funciones currificadas <\/strong>son funciones de alto nivel que como resultado <strong>regresan otra funci\u00f3n<\/strong>, de tal manera que el acto de currificar es convertir una funci\u00f3n de m\u00e1s de un par\u00e1metro en dos o m\u00e1s funciones que reciben parcialmente esos par\u00e1metros en dos o m\u00e1s invocaciones currificadas.<\/p>\n\n\n\n<p class=\"codepen\" data-height=\"200\" data-theme-id=\"default\" data-default-tab=\"js\" data-user=\"jaime_cervantes_ve\" data-slug-hash=\"erJXgd\" style=\"height: 200px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Funciones de alto nivel y  funciones currificadas\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/jaime_cervantes_ve\/pen\/erJXgd\">\n  Funciones de alto nivel y  funciones currificadas<\/a> by Jaime Cervantes Velasco (<a href=\"https:\/\/codepen.io\/jaime_cervantes_ve\">@jaime_cervantes_ve<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n<p><\/p>\n\n\n\n<p>Las <strong>funciones flecha o arrow functions<\/strong> nos permiten acceder al contexto de los par\u00e1metros, es por eso que seguimos teniendo acceso al par\u00e1metro <code><strong>to<\/strong><\/code> de la primera invocaci\u00f3n de <strong><code>summaryCurry<\/code><\/strong>. De esta manera cuando se les define un valor, una <code>arrow function<\/code> puede ver ese valor. Para lograr lo mismo sin funciones flecha se debe utilizar la variable <strong><code>arguments<\/code> <\/strong>que existe como variable local dentro de todas las funciones en JavaScript. Para mantener las cosas simples, de momento no veremos como hacerlo con <code><strong>arguments<\/strong><\/code>.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"funcinrecursiva\">Funci\u00f3n recursiva<\/h2>\n\n\n\n<p>Para crear una <strong>funci\u00f3n recursiva<\/strong>, primero se define un <strong>caso base<\/strong>, luego a trav\u00e9s de la divisi\u00f3n del problema en pedazos m\u00e1s peque\u00f1os se encuentra un patr\u00f3n, este patr\u00f3n llamado <strong>caso recursivo<\/strong> se repite muchas veces, es aqu\u00ed donde la funci\u00f3n se llama as\u00ed misma y acumula los resultados, la ejecuci\u00f3n se detiene hasta llegar a su caso base. <\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>El caso base<\/strong>, el cual permite detener la ejecuci\u00f3n de subsecuentes invocaciones de la funci\u00f3n recursiva.<\/li>\n\n\n\n<li><strong>El caso recursivo<\/strong>, el cual permite que una funci\u00f3n se llame a s\u00ed misma hasta llegar al caso base.<\/li>\n<\/ol>\n\n\n\n<p>El factorial de un n\u00famero positivo es la multiplicaci\u00f3n de ese n\u00famero por el n\u00famero inmediato menor y as\u00ed sucesivamente hasta llegar al n\u00famero <code>1<\/code>, su notaci\u00f3n es <code>n!<\/code>, donde <code>n<\/code> es un n\u00famero positivo. Por ejemplo el factorial de <code>5<\/code> is <code>120<\/code>, <code>5! = 5 x 4 x 3 x 2 x 1 = 120<\/code>.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"\/\/ caso base:1! = 1 = 1\/\/ caso recursivo, ejemplos:2! = 2 x 1 = 2 x 1!3! = 3 x 2 x 1 = 3 x 2!4! = 4 x 3 x 2 x 1 = 4 x 3!5! = 5 x 4 x 3 x 2 x 1 = 5 x 4!\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #464B5D; font-style: italic\">\/\/ caso base:<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F78C6C\">1<\/span><span style=\"color: #89DDFF\">!<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F78C6C\">1<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F78C6C\">1<\/span><\/span>\n<span class=\"line\"><span style=\"color: #464B5D; font-style: italic\">\/\/ caso recursivo, ejemplos:<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F78C6C\">2<\/span><span style=\"color: #89DDFF\">!<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F78C6C\">2<\/span><span style=\"color: #BABED8\"> x <\/span><span style=\"color: #F78C6C\">1<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F78C6C\">2<\/span><span style=\"color: #BABED8\"> x <\/span><span style=\"color: #F78C6C\">1<\/span><span style=\"color: #89DDFF\">!<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F78C6C\">3<\/span><span style=\"color: #89DDFF\">!<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F78C6C\">3<\/span><span style=\"color: #BABED8\"> x <\/span><span style=\"color: #F78C6C\">2<\/span><span style=\"color: #BABED8\"> x <\/span><span style=\"color: #F78C6C\">1<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F78C6C\">3<\/span><span style=\"color: #BABED8\"> x <\/span><span style=\"color: #F78C6C\">2<\/span><span style=\"color: #89DDFF\">!<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F78C6C\">4<\/span><span style=\"color: #89DDFF\">!<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F78C6C\">4<\/span><span style=\"color: #BABED8\"> x <\/span><span style=\"color: #F78C6C\">3<\/span><span style=\"color: #BABED8\"> x <\/span><span style=\"color: #F78C6C\">2<\/span><span style=\"color: #BABED8\"> x <\/span><span style=\"color: #F78C6C\">1<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F78C6C\">4<\/span><span style=\"color: #BABED8\"> x <\/span><span style=\"color: #F78C6C\">3<\/span><span style=\"color: #89DDFF\">!<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F78C6C\">5<\/span><span style=\"color: #89DDFF\">!<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F78C6C\">5<\/span><span style=\"color: #BABED8\"> x <\/span><span style=\"color: #F78C6C\">4<\/span><span style=\"color: #BABED8\"> x <\/span><span style=\"color: #F78C6C\">3<\/span><span style=\"color: #BABED8\"> x <\/span><span style=\"color: #F78C6C\">2<\/span><span style=\"color: #BABED8\"> x <\/span><span style=\"color: #F78C6C\">1<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F78C6C\">5<\/span><span style=\"color: #BABED8\"> x <\/span><span style=\"color: #F78C6C\">4<\/span><span style=\"color: #89DDFF\">!<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Con estos datos, podemos crear nuestra formula <code>factorial(n) = n * factorial(n-1)<\/code>, lo cual seria nuestro caso recursivo, pero debemos de a\u00f1adir nuestro caso base para que se detenga, cuando <code>n=1<\/code> debemos obtener como resultado <code><strong>1<\/strong><\/code>. <\/p>\n\n\n\n<p>Veamos como quedar\u00eda nuestra funci\u00f3n recursiva en javascript:<\/p>\n\n\n\n<p class=\"codepen\" data-height=\"286\" data-theme-id=\"default\" data-default-tab=\"js\" data-user=\"jaime_cervantes_ve\" data-slug-hash=\"bMpPZb\" style=\"height: 286px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Funciones recursivas\"> <span>See the Pen <a href=\"https:\/\/codepen.io\/jaime_cervantes_ve\/pen\/bMpPZb\"> Funciones recursivas<\/a> by Jaime Cervantes Velasco (<a href=\"https:\/\/codepen.io\/jaime_cervantes_ve\">@jaime_cervantes_ve<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span> <\/p> <script async=\"\" src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script>\n\n\n\n<p>Con esto cubrimos las cualidades principales de la programaci\u00f3n funcional, pero recuerda, lo m\u00e1s importante es que <strong><em>NO existen efectos colaterales<\/em><\/strong>.<\/p>","protected":false},"excerpt":{"rendered":"<p>La programaci\u00f3n funcional No tiene efectos colaterales. La ausencia de efectos es la esencia de la programaci\u00f3n funcional, esto significa que una funci\u00f3n no se mete en lo absoluto con datos que existen fuera de ella, todos los datos deben ser inmutables.<\/p>","protected":false},"author":2,"featured_media":3740,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"off","_et_pb_old_content":"<!-- wp:heading -->\n<h2 class=\"wp-block-heading\">Origen<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>El origen de la programaci\u00f3n funcional data del a\u00f1o 1936, cuando un matem\u00e1tico llamado <strong>Alonzo Church<\/strong> necesitaba resolver un problema complejo, del cual no hablaremos aqu\u00ed, pero Alonzo cre\u00f3 una soluci\u00f3n, el <a href=\"https:\/\/es.wikipedia.org\/wiki\/C%C3%A1lculo_lambda\" target=\"_blank\" rel=\"noreferrer noopener\">c\u00e1lculo lambda<\/a>. De esta forma naci\u00f3 la programaci\u00f3n funcional, incluso mucho antes de la primera computadora digital programable y de los primeros programas escritos en ensamblador.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>La programaci\u00f3n funcional es mucho m\u00e1s antigua que la programaci\u00f3n estructurada y la programaci\u00f3n orientada a objetos. Te recomiendo tambi\u00e9n revisar esta informaci\u00f3n sobre el <a href=\"https:\/\/www.pensemosweb.com\/paradigma-programacion-javascript\/#Paradigma_de_programacion_funcional\">paradigma de programaci\u00f3n funcional<\/a>.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 class=\"wp-block-heading\" id=\"sinefectoscolaterales\"><em>Sin efectos <\/em>colaterales<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Todo lo que necesitas saber sobre <strong>programaci\u00f3n funcional<\/strong> es que <strong>\"No tiene efectos colaterales<\/strong>\", es decir, que sus elementos (funciones) son inmutables. <\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Lo anterior significa que una funci\u00f3n no se mete en lo absoluto con datos que existen fuera de ella, si puede utilizar los datos enviados como par\u00e1metros, pero no debe modificarlos, todos los datos deben ser inmutables, \u00bfPor qu\u00e9?, pues porque as\u00ed hacemos las cosas m\u00e1s simples y con menos errores, m\u00e1s adelante tenemos un ejemplo. A este comportamiento se le llama<strong> puro<\/strong>.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Sin efectos colaterales <\/strong>nos permite entender todas las dem\u00e1s caracter\u00edsticas de la programaci\u00f3n funcional, por mencionar algunas principales:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul><!-- wp:list-item -->\n<li>Funciones puras<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>Inmutabilidad<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>Funciones de alto nivel<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>Funciones currificadas<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>Recursividad<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>Menos errores de programaci\u00f3n porque no realiza efectos colaterales.<\/li>\n<!-- \/wp:list-item --><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:paragraph -->\n<p>Toda funci\u00f3n teniendo ciertos par\u00e1metros, cuando se ejecuta, obtendremos un resultado basado en esos par\u00e1metros, y si volvemos a utilizar los mismos parametros, entonces la funci\u00f3n regresara el mismo valor. Esto es debido a que una funci\u00f3n no depende de m\u00e1s datos externos que puedan ser modificados, as\u00ed tendremos m\u00e1s seguridad y nuestro c\u00f3digo se vuelve m\u00e1s entendible. <\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><a rel=\"noopener noreferrer\" href=\"https:\/\/www.pensemosweb.com\/introduccion-javascript\/\" target=\"__blank\">Javascript es un lenguaje de programaci\u00f3n muy potente y multiparadigma<\/a>, soporta el <a href=\"https:\/\/www.pensemosweb.com\/paradigma-programacion-javascript\/#Paradigma_de_programacion_funcional\">paradigma funcional<\/a> y lo utilizaremos para nuestros ejemplos. <\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 class=\"wp-block-heading\" id=\"funcinespuraseinmutabilidad\">Funciones puras e inmutabilidad<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Bueno, realmente ya explicamos de manera indirecta que es una funci\u00f3n pura en los p\u00e1rrafos anteriores, pero veamos una definici\u00f3n formal. Una <strong>funci\u00f3n pura <\/strong>es la que cumple con estas dos caracter\u00edsticas:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><!-- wp:list-item -->\n<li>Siempre obtendremos el mismo resultado dado los mismos par\u00e1metros de entrada.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>No tiene ning\u00fan efecto colateral observable, no modifica el estado de los datos externos, por lo que todos los datos deben ser <strong>inmutables<\/strong>.<\/li>\n<!-- \/wp:list-item --><\/ol>\n<!-- \/wp:list -->\n\n<!-- wp:paragraph -->\n<p>Un ejemplo de como cambiar el nombre de una objeto persona usando primero una funci\u00f3n con efector colaterales:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:kevinbatdorf\/code-block-pro {\"code\":\"function cambiarNombre(nombre) {n  persona.nombre = nombre;n}nconst jaime = { nombre: 'Jaime', edad: 30 };ncambiarNombre('Juan')nconsole.log(jaime); \/\/ { nombre: 'Juan', edad: 30 }\",\"codeHTML\":\"u003cpre class=u0022shiki material-theme-oceanu0022 style=u0022background-color: #0F111Au0022 tabindex=u00220u0022u003eu003ccodeu003eu003cspan class=u0022lineu0022u003eu003cspan style=u0022color: #C792EAu0022u003efunctionu003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e u003c\/spanu003eu003cspan style=u0022color: #82AAFFu0022u003ecambiarNombreu003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e(u003c\/spanu003eu003cspan style=u0022color: #BABED8; font-style: italicu0022u003enombreu003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e)u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e{u003c\/spanu003eu003c\/spanu003enu003cspan class=u0022lineu0022u003eu003cspan style=u0022color: #F07178u0022u003e  u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003epersonau003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e.u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003enombreu003c\/spanu003eu003cspan style=u0022color: #F07178u0022u003e u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e=u003c\/spanu003eu003cspan style=u0022color: #F07178u0022u003e u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003enombreu003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e;u003c\/spanu003eu003c\/spanu003enu003cspan class=u0022lineu0022u003eu003cspan style=u0022color: #89DDFFu0022u003e}u003c\/spanu003eu003c\/spanu003enu003cspan class=u0022lineu0022u003eu003cspan style=u0022color: #C792EAu0022u003econstu003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e jaime u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e=u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e{u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e u003c\/spanu003eu003cspan style=u0022color: #F07178u0022u003enombreu003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e:u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026#39;u003c\/spanu003eu003cspan style=u0022color: #C3E88Du0022u003eJaimeu003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026#39;u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e,u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e u003c\/spanu003eu003cspan style=u0022color: #F07178u0022u003eedadu003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e:u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e u003c\/spanu003eu003cspan style=u0022color: #F78C6Cu0022u003e30u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e};u003c\/spanu003eu003c\/spanu003enu003cspan class=u0022lineu0022u003eu003cspan style=u0022color: #82AAFFu0022u003ecambiarNombreu003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e(u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026#39;u003c\/spanu003eu003cspan style=u0022color: #C3E88Du0022u003eJuanu003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026#39;u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e)u003c\/spanu003eu003c\/spanu003enu003cspan class=u0022lineu0022u003eu003cspan style=u0022color: #BABED8u0022u003econsoleu003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e.u003c\/spanu003eu003cspan style=u0022color: #82AAFFu0022u003elogu003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e(jaime)u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e;u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e u003c\/spanu003eu003cspan style=u0022color: #464B5D; font-style: italicu0022u003e\/\/ { nombre: u0026#39;Juanu0026#39;, edad: 30 }u003c\/spanu003eu003c\/spanu003eu003c\/codeu003eu003c\/preu003e\",\"language\":\"javascript\",\"theme\":\"material-ocean\",\"bgColor\":\"#0F111A\",\"textColor\":\"#babed8\",\"fontSize\":\".875rem\",\"fontFamily\":\"Code-Pro-JetBrains-Mono\",\"lineHeight\":\"1.25rem\",\"clampFonts\":false,\"lineNumbers\":false,\"headerType\":\"headlights\",\"disablePadding\":false,\"footerType\":\"none\",\"seeMoreType\":\"\",\"seeMoreString\":\"\",\"seeMoreTransition\":false,\"highlightingHover\":false,\"lineHighlightColor\":\"rgba(159, 170, 243, 0.2)\",\"copyButton\":true,\"copyButtonType\":\"heroicons\",\"useTabs\":false} -->\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"function cambiarNombre(nombre) {\n  persona.nombre = nombre;\n}\nconst jaime = { nombre: 'Jaime', edad: 30 };\ncambiarNombre('Juan')\nconsole.log(jaime); \/\/ { nombre: 'Juan', edad: 30 }\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #C792EA\">function<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #82AAFF\">cambiarNombre<\/span><span style=\"color: #89DDFF\">(<\/span><span style=\"color: #BABED8; font-style: italic\">nombre<\/span><span style=\"color: #89DDFF\">)<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #BABED8\">persona<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">nombre<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">nombre<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #C792EA\">const<\/span><span style=\"color: #BABED8\"> jaime <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">nombre<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #C3E88D\">Jaime<\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">edad<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F78C6C\">30<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">};<\/span><\/span>\n<span class=\"line\"><span style=\"color: #82AAFF\">cambiarNombre<\/span><span style=\"color: #BABED8\">(<\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #C3E88D\">Juan<\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #BABED8\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">console<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">log<\/span><span style=\"color: #BABED8\">(jaime)<\/span><span style=\"color: #89DDFF\">;<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #464B5D; font-style: italic\">\/\/ { nombre: &#39;Juan&#39;, edad: 30 }<\/span><\/span><\/code><\/pre><\/div>\n<!-- \/wp:kevinbatdorf\/code-block-pro -->\n\n<!-- wp:paragraph -->\n<p>En la anterior funci\u00f3n notamos que se cambia objeto <code>jaime<\/code>, el cual supongamos que es parte del estado de nuestra aplicaci\u00f3n, pero puede haber otras funciones que utilicen este objeto, por lo que se puede generar problemas si alguien m\u00e1s espera que la propiedad <code>nombre<\/code> del objeto siga siendo <code>'jaime'<\/code>.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Ahora veamos la versi\u00f3n funcional de la funci\u00f3n:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:kevinbatdorf\/code-block-pro {\"code\":\"function cambiarNombre(nombre, persona) {n  return {n    nombre: nombre,n    edad: persona.edadn  }n}nconst jaime = { nombre: 'Jaime', edad: 30 };nconst juan = cambiarNombre('Juan', jaime);nconsole.log(jaime); \/\/ { nombre: 'Jaime', edad: 30 }nconsole.log(juan); \/\/ { nombre: 'Juan', edad: 30 }\",\"codeHTML\":\"u003cpre class=u0022shiki material-theme-oceanu0022 style=u0022background-color: #0F111Au0022 tabindex=u00220u0022u003eu003ccodeu003eu003cspan class=u0022lineu0022u003eu003cspan style=u0022color: #C792EAu0022u003efunctionu003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e u003c\/spanu003eu003cspan style=u0022color: #82AAFFu0022u003ecambiarNombreu003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e(u003c\/spanu003eu003cspan style=u0022color: #BABED8; font-style: italicu0022u003enombreu003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e,u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e u003c\/spanu003eu003cspan style=u0022color: #BABED8; font-style: italicu0022u003epersonau003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e)u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e{u003c\/spanu003eu003c\/spanu003enu003cspan class=u0022lineu0022u003eu003cspan style=u0022color: #F07178u0022u003e  u003c\/spanu003eu003cspan style=u0022color: #89DDFF; font-style: italicu0022u003ereturnu003c\/spanu003eu003cspan style=u0022color: #F07178u0022u003e u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e{u003c\/spanu003eu003c\/spanu003enu003cspan class=u0022lineu0022u003eu003cspan style=u0022color: #F07178u0022u003e    nombreu003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e:u003c\/spanu003eu003cspan style=u0022color: #F07178u0022u003e u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003enombreu003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e,u003c\/spanu003eu003c\/spanu003enu003cspan class=u0022lineu0022u003eu003cspan style=u0022color: #F07178u0022u003e    edadu003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e:u003c\/spanu003eu003cspan style=u0022color: #F07178u0022u003e u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003epersonau003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e.u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003eedadu003c\/spanu003eu003c\/spanu003enu003cspan class=u0022lineu0022u003eu003cspan style=u0022color: #F07178u0022u003e  u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e}u003c\/spanu003eu003c\/spanu003enu003cspan class=u0022lineu0022u003eu003cspan style=u0022color: #89DDFFu0022u003e}u003c\/spanu003eu003c\/spanu003enu003cspan class=u0022lineu0022u003eu003cspan style=u0022color: #C792EAu0022u003econstu003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e jaime u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e=u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e{u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e u003c\/spanu003eu003cspan style=u0022color: #F07178u0022u003enombreu003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e:u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026#39;u003c\/spanu003eu003cspan style=u0022color: #C3E88Du0022u003eJaimeu003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026#39;u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e,u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e u003c\/spanu003eu003cspan style=u0022color: #F07178u0022u003eedadu003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e:u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e u003c\/spanu003eu003cspan style=u0022color: #F78C6Cu0022u003e30u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e};u003c\/spanu003eu003c\/spanu003enu003cspan class=u0022lineu0022u003eu003cspan style=u0022color: #C792EAu0022u003econstu003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e juan u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e=u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e u003c\/spanu003eu003cspan style=u0022color: #82AAFFu0022u003ecambiarNombreu003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e(u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026#39;u003c\/spanu003eu003cspan style=u0022color: #C3E88Du0022u003eJuanu003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026#39;u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e,u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e jaime)u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e;u003c\/spanu003eu003c\/spanu003enu003cspan class=u0022lineu0022u003eu003cspan style=u0022color: #BABED8u0022u003econsoleu003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e.u003c\/spanu003eu003cspan style=u0022color: #82AAFFu0022u003elogu003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e(jaime)u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e;u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e u003c\/spanu003eu003cspan style=u0022color: #464B5D; font-style: italicu0022u003e\/\/ { nombre: u0026#39;Jaimeu0026#39;, edad: 30 }u003c\/spanu003eu003c\/spanu003enu003cspan class=u0022lineu0022u003eu003cspan style=u0022color: #BABED8u0022u003econsoleu003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e.u003c\/spanu003eu003cspan style=u0022color: #82AAFFu0022u003elogu003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e(juan)u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e;u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e u003c\/spanu003eu003cspan style=u0022color: #464B5D; font-style: italicu0022u003e\/\/ { nombre: u0026#39;Juanu0026#39;, edad: 30 }u003c\/spanu003eu003c\/spanu003eu003c\/codeu003eu003c\/preu003e\",\"language\":\"javascript\",\"theme\":\"material-ocean\",\"bgColor\":\"#0F111A\",\"textColor\":\"#babed8\",\"fontSize\":\".875rem\",\"fontFamily\":\"Code-Pro-JetBrains-Mono\",\"lineHeight\":\"1.25rem\",\"clampFonts\":false,\"lineNumbers\":false,\"headerType\":\"headlights\",\"disablePadding\":false,\"footerType\":\"none\",\"seeMoreType\":\"\",\"seeMoreString\":\"\",\"seeMoreTransition\":false,\"highlightingHover\":false,\"lineHighlightColor\":\"rgba(159, 170, 243, 0.2)\",\"copyButton\":true,\"copyButtonType\":\"heroicons\",\"useTabs\":false} -->\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"function cambiarNombre(nombre, persona) {\n  return {\n    nombre: nombre,\n    edad: persona.edad\n  }\n}\nconst jaime = { nombre: 'Jaime', edad: 30 };\nconst juan = cambiarNombre('Juan', jaime);\nconsole.log(jaime); \/\/ { nombre: 'Jaime', edad: 30 }\nconsole.log(juan); \/\/ { nombre: 'Juan', edad: 30 }\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #C792EA\">function<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #82AAFF\">cambiarNombre<\/span><span style=\"color: #89DDFF\">(<\/span><span style=\"color: #BABED8; font-style: italic\">nombre<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #BABED8; font-style: italic\">persona<\/span><span style=\"color: #89DDFF\">)<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #89DDFF; font-style: italic\">return<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">    nombre<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">nombre<\/span><span style=\"color: #89DDFF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">    edad<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">persona<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">edad<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #89DDFF\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #C792EA\">const<\/span><span style=\"color: #BABED8\"> jaime <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">nombre<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #C3E88D\">Jaime<\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F07178\">edad<\/span><span style=\"color: #89DDFF\">:<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F78C6C\">30<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">};<\/span><\/span>\n<span class=\"line\"><span style=\"color: #C792EA\">const<\/span><span style=\"color: #BABED8\"> juan <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #82AAFF\">cambiarNombre<\/span><span style=\"color: #BABED8\">(<\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #C3E88D\">Juan<\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> jaime)<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">console<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">log<\/span><span style=\"color: #BABED8\">(jaime)<\/span><span style=\"color: #89DDFF\">;<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #464B5D; font-style: italic\">\/\/ { nombre: &#39;Jaime&#39;, edad: 30 }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">console<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">log<\/span><span style=\"color: #BABED8\">(juan)<\/span><span style=\"color: #89DDFF\">;<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #464B5D; font-style: italic\">\/\/ { nombre: &#39;Juan&#39;, edad: 30 }<\/span><\/span><\/code><\/pre><\/div>\n<!-- \/wp:kevinbatdorf\/code-block-pro -->\n\n<!-- wp:paragraph -->\n<p>En la versi\u00f3n funcional, <code>cambiarNombre<\/code> no modifica el objeto <code>jaime<\/code>, m\u00e1s bien crea un nuevo objeto con la misma edad que <code>jaime<\/code> y con la propiedad <code>nombre<\/code> igual a <code>'Juan'<\/code>, con esto evitamos efectos colaterales por si el objeto <code>jaime<\/code> es utilizado por otra funci\u00f3n u otro programador.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Con esta funci\u00f3n sin efecto colateral, nos damos cuenta de que los datos se manejan sin ser modificados, es decir, <strong>inmutables<\/strong>, los par\u00e1metros <code>persona<\/code> y <code>nombre<\/code> nunca fueron cambiados.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 class=\"wp-block-heading\" id=\"funcionesdealtonivelycurrificadas\">Funciones de alto nivel y currificadas<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Una funci\u00f3n de alto nivel es una funci\u00f3n que implementa al menos una de las opciones siguientes:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul><!-- wp:list-item -->\n<li>Recibir como par\u00e1metro una o m\u00e1s funciones<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li>Regresar como resultado una funci\u00f3n<\/li>\n<!-- \/wp:list-item --><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:paragraph -->\n<p>Un ejemplo muy com\u00fan usado en nuestro navegador web es agregar escuchadores de eventos:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:kevinbatdorf\/code-block-pro {\"code\":\"u0026lt;button id=u0022botonu0022u003eSoy un bot\u00f3nu0026lt;\/buttonu003enconst boton = document.querySelector('#boton');nboton.addEventListener('click', function () {n  alert('Click sobre el boton');n});\",\"codeHTML\":\"u003cpre class=u0022shiki material-theme-oceanu0022 style=u0022background-color: #0F111Au0022 tabindex=u00220u0022u003eu003ccodeu003eu003cspan class=u0022lineu0022u003eu003cspan style=u0022color: #89DDFFu0022u003eu0026lt;u003c\/spanu003eu003cspan style=u0022color: #F07178u0022u003ebuttonu003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e u003c\/spanu003eu003cspan style=u0022color: #C792EAu0022u003eidu003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e=u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026quot;u003c\/spanu003eu003cspan style=u0022color: #C3E88Du0022u003ebotonu003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026quot;u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026gt;u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003eSoy un bot\u00f3nu003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026lt;\/u003c\/spanu003eu003cspan style=u0022color: #F07178u0022u003ebuttonu003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026gt;u003c\/spanu003eu003c\/spanu003enu003cspan class=u0022lineu0022u003eu003cspan style=u0022color: #C792EAu0022u003econstu003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e boton u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e=u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e documentu003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e.u003c\/spanu003eu003cspan style=u0022color: #82AAFFu0022u003equerySelectoru003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e(u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026#39;u003c\/spanu003eu003cspan style=u0022color: #C3E88Du0022u003e#botonu003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026#39;u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e)u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e;u003c\/spanu003eu003c\/spanu003enu003cspan class=u0022lineu0022u003eu003cspan style=u0022color: #BABED8u0022u003ebotonu003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e.u003c\/spanu003eu003cspan style=u0022color: #82AAFFu0022u003eaddEventListeneru003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e(u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026#39;u003c\/spanu003eu003cspan style=u0022color: #C3E88Du0022u003eclicku003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026#39;u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e,u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e u003c\/spanu003eu003cspan style=u0022color: #C792EAu0022u003efunctionu003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e()u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e{u003c\/spanu003eu003c\/spanu003enu003cspan class=u0022lineu0022u003eu003cspan style=u0022color: #F07178u0022u003e  u003c\/spanu003eu003cspan style=u0022color: #82AAFFu0022u003ealertu003c\/spanu003eu003cspan style=u0022color: #F07178u0022u003e(u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026#39;u003c\/spanu003eu003cspan style=u0022color: #C3E88Du0022u003eClick sobre el botonu003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026#39;u003c\/spanu003eu003cspan style=u0022color: #F07178u0022u003e)u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e;u003c\/spanu003eu003c\/spanu003enu003cspan class=u0022lineu0022u003eu003cspan style=u0022color: #89DDFFu0022u003e}u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e)u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e;u003c\/spanu003eu003c\/spanu003eu003c\/codeu003eu003c\/preu003e\",\"language\":\"javascript\",\"theme\":\"material-ocean\",\"bgColor\":\"#0F111A\",\"textColor\":\"#babed8\",\"fontSize\":\".875rem\",\"fontFamily\":\"Code-Pro-JetBrains-Mono\",\"lineHeight\":\"1.25rem\",\"clampFonts\":false,\"lineNumbers\":false,\"headerType\":\"headlights\",\"disablePadding\":false,\"footerType\":\"none\",\"seeMoreType\":\"\",\"seeMoreString\":\"\",\"seeMoreTransition\":false,\"highlightingHover\":false,\"lineHighlightColor\":\"rgba(159, 170, 243, 0.2)\",\"copyButton\":true,\"copyButtonType\":\"heroicons\",\"useTabs\":false} -->\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;button id=&quot;boton&quot;&gt;Soy un bot\u00f3n&lt;\/button&gt;\nconst boton = document.querySelector('#boton');\nboton.addEventListener('click', function () {\n  alert('Click sobre el boton');\n});\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">button<\/span><span style=\"color: #89DDFF\"> <\/span><span style=\"color: #C792EA\">id<\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">boton<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">&gt;<\/span><span style=\"color: #BABED8\">Soy un bot\u00f3n<\/span><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">button<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #C792EA\">const<\/span><span style=\"color: #BABED8\"> boton <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #BABED8\"> document<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">querySelector<\/span><span style=\"color: #BABED8\">(<\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #C3E88D\">#boton<\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #BABED8\">)<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">boton<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">addEventListener<\/span><span style=\"color: #BABED8\">(<\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #C3E88D\">click<\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #C792EA\">function<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">()<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">  <\/span><span style=\"color: #82AAFF\">alert<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #C3E88D\">Click sobre el boton<\/span><span style=\"color: #89DDFF\">&#39;<\/span><span style=\"color: #F07178\">)<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #BABED8\">)<\/span><span style=\"color: #89DDFF\">;<\/span><\/span><\/code><\/pre><\/div>\n<!-- \/wp:kevinbatdorf\/code-block-pro -->\n\n<!-- wp:paragraph -->\n<p>En el c\u00f3digo pasamos como segundo par\u00e1metro del m\u00e9todo <code>addEventListener<\/code> una<strong> <em>funci\u00f3n an\u00f3nima<\/em><\/strong> (sin nombre) que mostrar\u00e1 un alerta al dar <code>click<\/code> sobre un bot\u00f3n con <code>id<\/code> igual a 'bot\u00f3n'. Dado que pasamos por par\u00e1metro una funci\u00f3n, entonces se dice que es una funci\u00f3n de alto nivel.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Otro ejemplo de funci\u00f3n de alto nivel lo podemos observar en los m\u00e9todos de arreglos en Javascript, el c\u00f3digo de abajo toma un arreglo de n\u00fameros y crea otro arreglo con los valores aumentados al doble.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:html -->\n<p class=\"codepen\" data-height=\"400\" data-theme-id=\"default\" data-default-tab=\"js\" data-user=\"jaime_cervantes_ve\" data-slug-hash=\"xxxeaMP\" style=\"height: 400px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Funciones de alto nivel\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/jaime_cervantes_ve\/pen\/xxxeaMP\">\n  Funciones de alto nivel<\/a> by Jaime Cervantes Velasco (<a href=\"https:\/\/codepen.io\/jaime_cervantes_ve\">@jaime_cervantes_ve<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script>\n<!-- \/wp:html -->\n\n<!-- wp:paragraph -->\n<p><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>La funci\u00f3n <code>map<\/code> retorna un nuevo arreglo, no cambia el arreglo <code>original<\/code>, por lo que decimos que no existe un efecto colateral.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Las <strong>funciones currificadas <\/strong>son funciones de alto nivel que como resultado <strong>regresan otra funci\u00f3n<\/strong>, de tal manera que el acto de currificar es convertir una funci\u00f3n de m\u00e1s de un par\u00e1metro en dos o m\u00e1s funciones que reciben parcialmente esos par\u00e1metros en dos o m\u00e1s invocaciones currificadas.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:html -->\n<p class=\"codepen\" data-height=\"200\" data-theme-id=\"default\" data-default-tab=\"js\" data-user=\"jaime_cervantes_ve\" data-slug-hash=\"erJXgd\" style=\"height: 200px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;\" data-pen-title=\"Funciones de alto nivel y  funciones currificadas\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/jaime_cervantes_ve\/pen\/erJXgd\">\n  Funciones de alto nivel y  funciones currificadas<\/a> by Jaime Cervantes Velasco (<a href=\"https:\/\/codepen.io\/jaime_cervantes_ve\">@jaime_cervantes_ve<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<script async=\"\" src=\"https:\/\/static.codepen.io\/assets\/embed\/ei.js\"><\/script>\n<!-- \/wp:html -->\n\n<!-- wp:paragraph -->\n<p><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Las <strong>funciones flecha o arrow functions<\/strong> nos permiten acceder al contexto de los par\u00e1metros, es por eso que seguimos teniendo acceso al par\u00e1metro <code><strong>a<\/strong><\/code> de la primera invocaci\u00f3n de <strong><code>summaryCurry<\/code><\/strong>. De esta manera cuando se les define un valor, una <code>arrow function<\/code> puede ver ese valor. Para lograr lo mismo sin funciones flecha se debe utilizar la variable <strong><code>arguments<\/code> <\/strong>que existe como variable local dentro de todas las funciones en JavaScript. Para mantener las cosas simples, de momento no veremos como hacerlo con <code><strong>arguments<\/strong><\/code>.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading -->\n<h2 class=\"wp-block-heading\" id=\"funcinrecursiva\">Funci\u00f3n recursiva<\/h2>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Para crear una <strong>funci\u00f3n recursiva<\/strong>, primero se define un <strong>caso base<\/strong>, luego a trav\u00e9s de la divisi\u00f3n del problema en pedazos m\u00e1s peque\u00f1os se encuentra un patr\u00f3n, este patr\u00f3n llamado <strong>caso recursivo<\/strong> se repite muchas veces, es aqu\u00ed donde la funci\u00f3n se llama as\u00ed misma y acumula los resultados, la ejecuci\u00f3n se detiene hasta llegar a su caso base. <\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list {\"ordered\":true} -->\n<ol><!-- wp:list-item -->\n<li><strong>El caso base<\/strong>, el cual permite detener la ejecuci\u00f3n de subsecuentes invocaciones de la funci\u00f3n recursiva.<\/li>\n<!-- \/wp:list-item -->\n\n<!-- wp:list-item -->\n<li><strong>El caso recursivo<\/strong>, el cual permite que una funci\u00f3n se llame a s\u00ed misma hasta llegar al caso base.<\/li>\n<!-- \/wp:list-item --><\/ol>\n<!-- \/wp:list -->\n\n<!-- wp:paragraph -->\n<p>El factorial de un n\u00famero positivo es la multiplicaci\u00f3n de ese n\u00famero por el n\u00famero inmediato menor y as\u00ed sucesivamente hasta llegar al n\u00famero <code>1<\/code>, su notaci\u00f3n es <code>n!<\/code>, donde <code>n<\/code> es un n\u00famero positivo. Por ejemplo el factorial de <code>5<\/code> es <code>120<\/code>, <code>5! = 5 x 4 x 3 x 2 x 1 = 120<\/code>.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:kevinbatdorf\/code-block-pro {\"code\":\"\/\/ caso base:n1! = 1 = 1n\/\/ caso recursivo, ejemplos:n2! = 2 x 1 = 2 x 1!n3! = 3 x 2 x 1 = 3 x 2!n4! = 4 x 3 x 2 x 1 = 4 x 3!n5! = 5 x 4 x 3 x 2 x 1 = 5 x 4!\",\"codeHTML\":\"u003cpre class=u0022shiki material-theme-oceanu0022 style=u0022background-color: #0F111Au0022 tabindex=u00220u0022u003eu003ccodeu003eu003cspan class=u0022lineu0022u003eu003cspan style=u0022color: #464B5D; font-style: italicu0022u003e\/\/ caso base:u003c\/spanu003eu003c\/spanu003enu003cspan class=u0022lineu0022u003eu003cspan style=u0022color: #F78C6Cu0022u003e1u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e!u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e=u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e u003c\/spanu003eu003cspan style=u0022color: #F78C6Cu0022u003e1u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e=u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e u003c\/spanu003eu003cspan style=u0022color: #F78C6Cu0022u003e1u003c\/spanu003eu003c\/spanu003enu003cspan class=u0022lineu0022u003eu003cspan style=u0022color: #464B5D; font-style: italicu0022u003e\/\/ caso recursivo, ejemplos:u003c\/spanu003eu003c\/spanu003enu003cspan class=u0022lineu0022u003eu003cspan style=u0022color: #F78C6Cu0022u003e2u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e!u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e=u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e u003c\/spanu003eu003cspan style=u0022color: #F78C6Cu0022u003e2u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e x u003c\/spanu003eu003cspan style=u0022color: #F78C6Cu0022u003e1u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e=u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e u003c\/spanu003eu003cspan style=u0022color: #F78C6Cu0022u003e2u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e x u003c\/spanu003eu003cspan style=u0022color: #F78C6Cu0022u003e1u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e!u003c\/spanu003eu003c\/spanu003enu003cspan class=u0022lineu0022u003eu003cspan style=u0022color: #F78C6Cu0022u003e3u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e!u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e=u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e u003c\/spanu003eu003cspan style=u0022color: #F78C6Cu0022u003e3u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e x u003c\/spanu003eu003cspan style=u0022color: #F78C6Cu0022u003e2u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e x u003c\/spanu003eu003cspan style=u0022color: #F78C6Cu0022u003e1u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e=u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e u003c\/spanu003eu003cspan style=u0022color: #F78C6Cu0022u003e3u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e x u003c\/spanu003eu003cspan style=u0022color: #F78C6Cu0022u003e2u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e!u003c\/spanu003eu003c\/spanu003enu003cspan class=u0022lineu0022u003eu003cspan style=u0022color: #F78C6Cu0022u003e4u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e!u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e=u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e u003c\/spanu003eu003cspan style=u0022color: #F78C6Cu0022u003e4u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e x u003c\/spanu003eu003cspan style=u0022color: #F78C6Cu0022u003e3u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e x u003c\/spanu003eu003cspan style=u0022color: #F78C6Cu0022u003e2u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e x u003c\/spanu003eu003cspan style=u0022color: #F78C6Cu0022u003e1u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e=u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e u003c\/spanu003eu003cspan style=u0022color: #F78C6Cu0022u003e4u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e x u003c\/spanu003eu003cspan style=u0022color: #F78C6Cu0022u003e3u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e!u003c\/spanu003eu003c\/spanu003enu003cspan class=u0022lineu0022u003eu003cspan style=u0022color: #F78C6Cu0022u003e5u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e!u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e=u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e u003c\/spanu003eu003cspan style=u0022color: #F78C6Cu0022u003e5u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e x u003c\/spanu003eu003cspan style=u0022color: #F78C6Cu0022u003e4u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e x u003c\/spanu003eu003cspan style=u0022color: #F78C6Cu0022u003e3u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e x u003c\/spanu003eu003cspan style=u0022color: #F78C6Cu0022u003e2u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e x u003c\/spanu003eu003cspan style=u0022color: #F78C6Cu0022u003e1u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e=u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e u003c\/spanu003eu003cspan style=u0022color: #F78C6Cu0022u003e5u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e x u003c\/spanu003eu003cspan style=u0022color: #F78C6Cu0022u003e4u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e!u003c\/spanu003eu003c\/spanu003eu003c\/codeu003eu003c\/preu003e\",\"language\":\"javascript\",\"theme\":\"material-ocean\",\"bgColor\":\"#0F111A\",\"textColor\":\"#babed8\",\"fontSize\":\".875rem\",\"fontFamily\":\"Code-Pro-JetBrains-Mono\",\"lineHeight\":\"1.25rem\",\"clampFonts\":false,\"lineNumbers\":false,\"headerType\":\"headlights\",\"disablePadding\":false,\"footerType\":\"none\",\"seeMoreType\":\"\",\"seeMoreString\":\"\",\"seeMoreTransition\":false,\"highlightingHover\":false,\"lineHighlightColor\":\"rgba(159, 170, 243, 0.2)\",\"copyButton\":true,\"copyButtonType\":\"heroicons\",\"useTabs\":false} -->\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"\/\/ caso base:\n1! = 1 = 1\n\/\/ caso recursivo, ejemplos:\n2! = 2 x 1 = 2 x 1!\n3! = 3 x 2 x 1 = 3 x 2!\n4! = 4 x 3 x 2 x 1 = 4 x 3!\n5! = 5 x 4 x 3 x 2 x 1 = 5 x 4!\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #464B5D; font-style: italic\">\/\/ caso base:<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F78C6C\">1<\/span><span style=\"color: #89DDFF\">!<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F78C6C\">1<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F78C6C\">1<\/span><\/span>\n<span class=\"line\"><span style=\"color: #464B5D; font-style: italic\">\/\/ caso recursivo, ejemplos:<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F78C6C\">2<\/span><span style=\"color: #89DDFF\">!<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F78C6C\">2<\/span><span style=\"color: #BABED8\"> x <\/span><span style=\"color: #F78C6C\">1<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F78C6C\">2<\/span><span style=\"color: #BABED8\"> x <\/span><span style=\"color: #F78C6C\">1<\/span><span style=\"color: #89DDFF\">!<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F78C6C\">3<\/span><span style=\"color: #89DDFF\">!<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F78C6C\">3<\/span><span style=\"color: #BABED8\"> x <\/span><span style=\"color: #F78C6C\">2<\/span><span style=\"color: #BABED8\"> x <\/span><span style=\"color: #F78C6C\">1<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F78C6C\">3<\/span><span style=\"color: #BABED8\"> x <\/span><span style=\"color: #F78C6C\">2<\/span><span style=\"color: #89DDFF\">!<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F78C6C\">4<\/span><span style=\"color: #89DDFF\">!<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F78C6C\">4<\/span><span style=\"color: #BABED8\"> x <\/span><span style=\"color: #F78C6C\">3<\/span><span style=\"color: #BABED8\"> x <\/span><span style=\"color: #F78C6C\">2<\/span><span style=\"color: #BABED8\"> x <\/span><span style=\"color: #F78C6C\">1<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F78C6C\">4<\/span><span style=\"color: #BABED8\"> x <\/span><span style=\"color: #F78C6C\">3<\/span><span style=\"color: #89DDFF\">!<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F78C6C\">5<\/span><span style=\"color: #89DDFF\">!<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F78C6C\">5<\/span><span style=\"color: #BABED8\"> x <\/span><span style=\"color: #F78C6C\">4<\/span><span style=\"color: #BABED8\"> x <\/span><span style=\"color: #F78C6C\">3<\/span><span style=\"color: #BABED8\"> x <\/span><span style=\"color: #F78C6C\">2<\/span><span style=\"color: #BABED8\"> x <\/span><span style=\"color: #F78C6C\">1<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F78C6C\">5<\/span><span style=\"color: #BABED8\"> x <\/span><span style=\"color: #F78C6C\">4<\/span><span style=\"color: #89DDFF\">!<\/span><\/span><\/code><\/pre><\/div>\n<!-- \/wp:kevinbatdorf\/code-block-pro -->\n\n<!-- wp:paragraph -->\n<p>Con estos datos, podemos crear nuestra formula <code>factorial(n) = n * factorial(n-1)<\/code>, lo cual seria nuestro caso recursivo, pero debemos de a\u00f1adir nuestro caso base para que se detenga, cuando <code>n=1<\/code> debemos obtener como resultado <code><strong>1<\/strong><\/code>. <\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Veamos como quedar\u00eda nuestra funci\u00f3n recursiva en javascript:<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:kevinbatdorf\/code-block-pro {\"code\":\"u003cp class=u0022codepenu0022 data-height=u0022286u0022 data-theme-id=u0022defaultu0022 data-default-tab=u0022jsu0022 data-user=u0022jaime_cervantes_veu0022 data-slug-hash=u0022bMpPZbu0022 style=u0022height: 286px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;u0022 data-pen-title=u0022Funciones recursivasu0022u003en  u003cspanu003eSee the Pen u003ca href=u0022https:\/\/codepen.io\/jaime_cervantes_ve\/pen\/bMpPZbu0022u003en  Funciones recursivasu003c\/au003e by Jaime Cervantes Velasco (u003ca href=u0022https:\/\/codepen.io\/jaime_cervantes_veu0022u003e@jaime_cervantes_veu003c\/au003e)n  on u003ca href=u0022https:\/\/codepen.iou0022u003eCodePenu003c\/au003e.u003c\/spanu003enu003c\/pu003enu003cscript async=u0022u0022 src=u0022https:\/\/static.codepen.io\/assets\/embed\/ei.jsu0022u003eu003c\/scriptu003e\",\"codeHTML\":\"u003cpre class=u0022shiki material-theme-oceanu0022 style=u0022background-color: #0F111Au0022 tabindex=u00220u0022u003eu003ccodeu003eu003cspan class=u0022lineu0022u003eu003cspan style=u0022color: #89DDFFu0022u003eu0026lt;u003c\/spanu003eu003cspan style=u0022color: #F07178u0022u003epu003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e u003c\/spanu003eu003cspan style=u0022color: #C792EAu0022u003eclassu003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e=u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026quot;u003c\/spanu003eu003cspan style=u0022color: #C3E88Du0022u003ecodepenu003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026quot;u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e u003c\/spanu003eu003cspan style=u0022color: #C792EAu0022u003edata-heightu003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e=u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026quot;u003c\/spanu003eu003cspan style=u0022color: #C3E88Du0022u003e286u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026quot;u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e u003c\/spanu003eu003cspan style=u0022color: #C792EAu0022u003edata-theme-idu003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e=u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026quot;u003c\/spanu003eu003cspan style=u0022color: #C3E88Du0022u003edefaultu003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026quot;u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e u003c\/spanu003eu003cspan style=u0022color: #C792EAu0022u003edata-default-tabu003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e=u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026quot;u003c\/spanu003eu003cspan style=u0022color: #C3E88Du0022u003ejsu003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026quot;u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e u003c\/spanu003eu003cspan style=u0022color: #C792EAu0022u003edata-useru003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e=u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026quot;u003c\/spanu003eu003cspan style=u0022color: #C3E88Du0022u003ejaime_cervantes_veu003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026quot;u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e u003c\/spanu003eu003cspan style=u0022color: #C792EAu0022u003edata-slug-hashu003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e=u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026quot;u003c\/spanu003eu003cspan style=u0022color: #C3E88Du0022u003ebMpPZbu003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026quot;u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e u003c\/spanu003eu003cspan style=u0022color: #C792EAu0022u003estyleu003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e=u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026quot;u003c\/spanu003eu003cspan style=u0022color: #C3E88Du0022u003eheight: 286px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026quot;u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e u003c\/spanu003eu003cspan style=u0022color: #C792EAu0022u003edata-pen-titleu003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e=u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026quot;u003c\/spanu003eu003cspan style=u0022color: #C3E88Du0022u003eFunciones recursivasu003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026quot;u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026gt;u003c\/spanu003eu003c\/spanu003enu003cspan class=u0022lineu0022u003eu003cspan style=u0022color: #BABED8u0022u003e  u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026lt;u003c\/spanu003eu003cspan style=u0022color: #F07178u0022u003espanu003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026gt;u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003eSee the Pen u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026lt;u003c\/spanu003eu003cspan style=u0022color: #F07178u0022u003eau003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e u003c\/spanu003eu003cspan style=u0022color: #C792EAu0022u003ehrefu003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e=u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026quot;u003c\/spanu003eu003cspan style=u0022color: #C3E88Du0022u003ehttps:\/\/codepen.io\/jaime_cervantes_ve\/pen\/bMpPZbu003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026quot;u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026gt;u003c\/spanu003eu003c\/spanu003enu003cspan class=u0022lineu0022u003eu003cspan style=u0022color: #BABED8u0022u003e  Funciones recursivasu003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026lt;\/u003c\/spanu003eu003cspan style=u0022color: #F07178u0022u003eau003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026gt;u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e by Jaime Cervantes Velasco (u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026lt;u003c\/spanu003eu003cspan style=u0022color: #F07178u0022u003eau003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e u003c\/spanu003eu003cspan style=u0022color: #C792EAu0022u003ehrefu003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e=u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026quot;u003c\/spanu003eu003cspan style=u0022color: #C3E88Du0022u003ehttps:\/\/codepen.io\/jaime_cervantes_veu003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026quot;u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026gt;u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e@jaime_cervantes_veu003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026lt;\/u003c\/spanu003eu003cspan style=u0022color: #F07178u0022u003eau003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026gt;u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e)u003c\/spanu003eu003c\/spanu003enu003cspan class=u0022lineu0022u003eu003cspan style=u0022color: #BABED8u0022u003e  on u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026lt;u003c\/spanu003eu003cspan style=u0022color: #F07178u0022u003eau003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e u003c\/spanu003eu003cspan style=u0022color: #C792EAu0022u003ehrefu003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e=u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026quot;u003c\/spanu003eu003cspan style=u0022color: #C3E88Du0022u003ehttps:\/\/codepen.iou003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026quot;u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026gt;u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003eCodePenu003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026lt;\/u003c\/spanu003eu003cspan style=u0022color: #F07178u0022u003eau003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026gt;u003c\/spanu003eu003cspan style=u0022color: #BABED8u0022u003e.u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026lt;\/u003c\/spanu003eu003cspan style=u0022color: #F07178u0022u003espanu003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026gt;u003c\/spanu003eu003c\/spanu003enu003cspan class=u0022lineu0022u003eu003cspan style=u0022color: #89DDFFu0022u003eu0026lt;\/u003c\/spanu003eu003cspan style=u0022color: #F07178u0022u003epu003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026gt;u003c\/spanu003eu003c\/spanu003enu003cspan class=u0022lineu0022u003eu003cspan style=u0022color: #89DDFFu0022u003eu0026lt;u003c\/spanu003eu003cspan style=u0022color: #F07178u0022u003escriptu003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e u003c\/spanu003eu003cspan style=u0022color: #C792EAu0022u003easyncu003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e=u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026quot;u0026quot;u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e u003c\/spanu003eu003cspan style=u0022color: #C792EAu0022u003esrcu003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003e=u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026quot;u003c\/spanu003eu003cspan style=u0022color: #C3E88Du0022u003ehttps:\/\/static.codepen.io\/assets\/embed\/ei.jsu003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026quot;u003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026gt;u0026lt;\/u003c\/spanu003eu003cspan style=u0022color: #F07178u0022u003escriptu003c\/spanu003eu003cspan style=u0022color: #89DDFFu0022u003eu0026gt;u003c\/spanu003eu003c\/spanu003eu003c\/codeu003eu003c\/preu003e\",\"language\":\"javascript\",\"theme\":\"material-ocean\",\"bgColor\":\"#0F111A\",\"textColor\":\"#babed8\",\"fontSize\":\".875rem\",\"fontFamily\":\"Code-Pro-JetBrains-Mono\",\"lineHeight\":\"1.25rem\",\"clampFonts\":false,\"lineNumbers\":false,\"headerType\":\"headlights\",\"disablePadding\":false,\"footerType\":\"none\",\"seeMoreType\":\"\",\"seeMoreString\":\"\",\"seeMoreTransition\":false,\"highlightingHover\":false,\"lineHighlightColor\":\"rgba(159, 170, 243, 0.2)\",\"copyButton\":true,\"copyButtonType\":\"heroicons\",\"useTabs\":false} -->\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"<p class=&quot;codepen&quot; data-height=&quot;286&quot; data-theme-id=&quot;default&quot; data-default-tab=&quot;js&quot; data-user=&quot;jaime_cervantes_ve&quot; data-slug-hash=&quot;bMpPZb&quot; style=&quot;height: 286px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;&quot; data-pen-title=&quot;Funciones recursivas&quot;&gt;\n  <span&gt;See the Pen <a href=&quot;https:\/\/codepen.io\/jaime_cervantes_ve\/pen\/bMpPZb&quot;&gt;\n  Funciones recursivas<\/a&gt; by Jaime Cervantes Velasco (<a href=&quot;https:\/\/codepen.io\/jaime_cervantes_ve&quot;&gt;@jaime_cervantes_ve<\/a&gt;)\n  on <a href=&quot;https:\/\/codepen.io&quot;&gt;CodePen<\/a&gt;.<\/span&gt;\n<\/p&gt;\n<script async=&quot;&quot; src=&quot;https:\/\/static.codepen.io\/assets\/embed\/ei.js&quot;&gt;<\/script&gt;\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">p<\/span><span style=\"color: #89DDFF\"> <\/span><span style=\"color: #C792EA\">class<\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">codepen<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\"> <\/span><span style=\"color: #C792EA\">data-height<\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">286<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\"> <\/span><span style=\"color: #C792EA\">data-theme-id<\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">default<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\"> <\/span><span style=\"color: #C792EA\">data-default-tab<\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">js<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\"> <\/span><span style=\"color: #C792EA\">data-user<\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">jaime_cervantes_ve<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\"> <\/span><span style=\"color: #C792EA\">data-slug-hash<\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">bMpPZb<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\"> <\/span><span style=\"color: #C792EA\">style<\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">height: 286px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\"> <\/span><span style=\"color: #C792EA\">data-pen-title<\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">Funciones recursivas<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">span<\/span><span style=\"color: #89DDFF\">&gt;<\/span><span style=\"color: #BABED8\">See the Pen <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">a<\/span><span style=\"color: #89DDFF\"> <\/span><span style=\"color: #C792EA\">href<\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">https:\/\/codepen.io\/jaime_cervantes_ve\/pen\/bMpPZb<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  Funciones recursivas<\/span><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">a<\/span><span style=\"color: #89DDFF\">&gt;<\/span><span style=\"color: #BABED8\"> by Jaime Cervantes Velasco (<\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">a<\/span><span style=\"color: #89DDFF\"> <\/span><span style=\"color: #C792EA\">href<\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">https:\/\/codepen.io\/jaime_cervantes_ve<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">&gt;<\/span><span style=\"color: #BABED8\">@jaime_cervantes_ve<\/span><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">a<\/span><span style=\"color: #89DDFF\">&gt;<\/span><span style=\"color: #BABED8\">)<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  on <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">a<\/span><span style=\"color: #89DDFF\"> <\/span><span style=\"color: #C792EA\">href<\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">https:\/\/codepen.io<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">&gt;<\/span><span style=\"color: #BABED8\">CodePen<\/span><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">a<\/span><span style=\"color: #89DDFF\">&gt;<\/span><span style=\"color: #BABED8\">.<\/span><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">span<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">p<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">script<\/span><span style=\"color: #89DDFF\"> <\/span><span style=\"color: #C792EA\">async<\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #89DDFF\">&quot;&quot;<\/span><span style=\"color: #89DDFF\"> <\/span><span style=\"color: #C792EA\">src<\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">https:\/\/static.codepen.io\/assets\/embed\/ei.js<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">&gt;&lt;\/<\/span><span style=\"color: #F07178\">script<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n<!-- \/wp:kevinbatdorf\/code-block-pro -->\n\n<!-- wp:paragraph -->\n<p><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Con esto cubrimos las cualidades principales de la programaci\u00f3n funcional, pero recuerda, lo m\u00e1s importante es que <strong><em>NO existen efectos colaterales<\/em><\/strong>.<\/p>\n<!-- \/wp:paragraph -->","_et_gb_content_width":"","footnotes":""},"categories":[28,33],"tags":[54,68],"class_list":["post-3562","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-intermedio","tag-javascript","tag-intermedio"],"_links":{"self":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts\/3562","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/comments?post=3562"}],"version-history":[{"count":7,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts\/3562\/revisions"}],"predecessor-version":[{"id":3902,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts\/3562\/revisions\/3902"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/media\/3740"}],"wp:attachment":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/media?parent=3562"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/categories?post=3562"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/tags?post=3562"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}