Estos paradigmas existen porque resuelven los problemas a los que se enfrentan los programadores y tienen sus propias reglas e instrucciones para ayudarte a escribir mejor código.

Cada paradigma te ayuda a resolver un problema específico. Por eso es útil tener una descripción general de cada uno de ellos. Aquí vamos a cubrir la programación funcional.

Al final de este artículo, hay algunos recursos que puedes utilizar para ir más allá si te ha gustado esta introducción.

También hay un glosario en GitHub que te ayudará a decodificar toda esta jerga que utiliza la programación funcional.

Por último, encontrarás un lugar en el cual ensuciarte las manos con ejemplos prácticos y un repositorio de GitHub con recursos que puedes utilizar para aprender más. Así que, vamos a por ello.

Paradigmas de programación declarativos vs imperativos

Un ejemplo de estos paradigmas de los que hablé al principio, es la programación orientada a objetos. Otro es la programación funcional.

¿Entonces que es exactamente la programación funcional?

La programación funcional es un sub-paradigma del paradigma de programación declarativa, con sus propias reglas a seguir al escribir código.

¿Qué es el paradigma de función declarativa?

Si estás codificando en un lenguaje que sigue el paradigma declarativo, escribe código que especifique lo que quieres hacer, sin decir cómo.

Un ejemplo muy simple de esto es SQL o HTML:

SELECT * FROM clientes

<div></div>

En los ejemplos de código anteriores, no estás implementando SELECT o cómo imprimir un div. Simplemente le estás diciendo a la computadora qué hacer, sin el cómo.

De este paradigma, existen sub-paradigmas como la Programación funcional. Más de esto, en seguida.

¿Qué es el paradigma de programación imperativa?

Si estás codificando en un lenguaje que sigue el paradigma imperativo / procedimental, escribes código que le dice cómo hacer algo.

Por ejemplo, si haces algo como lo siguiente:

for (let i = 0; i < arr.length; i++) {
     incrementar += arr[i];
}

Le estás diciendo a la computadora exactamente lo que debe hacer. Itera a través del arreglo llamado arr, y luego incrementar cada uno de los elementos del arreglo.

Programación declarativa vs imperativa

Puedes escribir JavaScript en el paradigma declarativo o el paradigma imperativo. Esto es lo que la gente quiere decir cuando dice que es un lenguaje de paradigmas múltiples. Es solo que el código funcional sigue el paradigma declarativo.

Si te ayuda a recordar, un ejemplo de un comando declarativo sería pedirle a la computadora que te prepare una taza de té (no me importa cómo lo hagas, solo tráeme mi taza de té).

Mientras que imperativamente, tendrías que decir:

• Ve a la cocina.
• Si hay una tetera en la habitación y tiene suficiente agua para una taza de té, enciende la tetera.
• Si hay una tetera en la habitación y no tiene suficiente agua para una taza de té, llena la tetera con agua suficiente para una de taza de té y enciende la tetera.
• Y así sucesivamente.

¿Entonces que es programación funcional?

¿Qué significa esto para código funcional?

Debido a que es un sub-paradigma del paradigma declarativo, esto afecta la forma en que escribes código funcional. Generalmente conduce a menos código, porque JavaScript ya tiene muchas de las funciones integradas que normalmente necesitas. Esta es una de las razones por las que a la gente le gusta el código funcional.

También te permite abstraer mucho (no tienes que entender en profundidad cómo se hace algo), simplemente llamas a una función que lo hace por ti.

¿Y cuáles son las reglas que llevan a código funcional?

Programación funcional puede ser explicada simplemente siguiendo estas dos reglas en tu código.

1. Diseña tu software a partir de funciones puras y aisladas
2. Evitar mutabilidad y efectos secundarios

Veamos que se trata eso.

1. Diseña tu software a partir de funciones puras y aisladas

Empecemos por el principio,

Código funcional utiliza bastante algunas cosas:

Funciones puras

La misma entrada siempre da la misma salida (idempotencia) y no tiene efectos secundarios.

Una función idempotente es aquella que, cuando vuelve a aplicar los resultados a esa función nuevamente, no produce un resultado diferente.

/// Algunos ejemplos que utiliza Math.abs(retorna el valor absoluto de un numero)
Math.abs('-1');     // 1
Math.abs(-1);       // 1
Math.abs(null);     // 0


Math.abs(Math.abs(Math.abs('-1')));           // Sigue retornando 1
Math.abs(Math.abs(Math.abs(Math.abs('-1')))); // Sigue retornando 1

Los efectos secundarios son cuando tu código interactúa con (lee o escribe) un estado mutable externo.

El estado mutable externo es literalmente cualquier cosa fuera de la función que cambiaría los datos en tu programa. ¿Establecer una función? ¿Establecer un booleano en un objeto? ¿Eliminar propiedades de un objeto? Todos los cambios de estado fuera de tu función.

function estaDisponible(){
	disponible = true;
}

Funciones aisladas

No dependen del estado del programa, que incluye variables globales que están sujetas a cambios.

Discutiremos esto más a fondo, pero todo lo que necesites debe pasarse a la función como argumento. Esto hace que tus dependencias (cosas que la función necesita para hacer su trabajo) sean mucho más claras de ver y más detectables.

¿Ok, porque hacemos así las cosas?

Sé que esto parecen muchas restricciones que hacen que tu código sea innecesariamente difícil. Pero no son restricciones, son pautas que intentan evitar que caigas en patrones que comúnmente conducen a errores.

Cuando no estás cambiando la ejecución de tu código, dividir tu código con if's basado en el estado del  booleano, siendo establecido por múltiples lugares en tu código, hace que el código sea más predecible y es más fácil razonar sobre lo que está sucediendo.

Cuando sigas el paradigma funcional, encontrarás que el orden de ejecución de tu código no importa tanto.

Esto tiene bastantes beneficios: uno es, por ejemplo, que para replicar un error no es necesario saber exactamente cuál era el estado de cada booleano y objeto antes de ejecutar sus funciones. Siempre que tengas una pila de llamadas (sabes qué función se está ejecutando / se ha ejecutado antes), se pueden replicar los errores y resolverlos más fácilmente.

Reusabilidad mediante funciones de orden superior

Las funciones que se pueden asignar a una variable, pasar a otra función o devolver desde otra función como cualquier otro valor normal, se denominan funciones de primera clase.

En JavaScript, todas las funciones son funciones de primera clase. Funciones que tienen un estado de primera clase nos permiten crear funciones de orden superior.

Una función de orden superior es una función que toma una función como argumento, devuelve una función o ¡ambas cosas! Puedes usar funciones de orden superior para dejar de repetir código.

Algo así:

// Ejemplo no funcional
const edad = [12,32,32,53]
for (var i=0; i < edad.length; i++) {
    edadFinal += edad[i];
}

// Ejemplo funcional
const edad = [12,32,32,53]
const edadTotal = edad.reduce( function(primerEdad, segundaEdad){
    return primerEdad + segundaEdad;
})

Las funciones de arreglos incluidas en JavaScript .map, .reduce y .filter aceptan una función. Son excelentes ejemplos de funciones de orden superior, ya que iteran sobre un arreglo y llaman a la función que recibieron para cada elemento del arreglo.

Así que podrías hacer lo siguiente:

// Ejemplos de cada uno
const arreglo = [1, 2, 3];

const arregloMap = arreglo.map(function(elemento){
    return elemento + 1;
});
// arregloMap es [2, 3, 4]

const reducido = arreglo.reduce(function(primero, segundo){
	return primero + segundo;
});
// reducido es 6

const filtrarArreglo = arreglo.filter(function(elemento){
    return elemento !== 1;
});
// filtrarArreglo is [2, 3]

Pasar los resultados de funciones a otras funciones, o incluso pasar las funciones en sí, es extremadamente común en el código funcional. Incluí esta breve explicación debido a la frecuencia con la que se usa.

Estas funciones también se utilizan a menudo porque no cambian la función subyacente (no cambian el estado), sino que operan con una copia del arreglo.

2. Evitar la mutabilidad y los efectos secundarios.

La segunda regla es evitar la mutabilidad - ya lo mencionamos brevemente antes, cuando hablamos de limitar los cambios al estado mutable externo - y sus efectos secundarios.

Pero aquí lo explicaremos mejor. Básicamente, todo se reduce a esto: ¡no cambies las cosas! Una vez que lo haz hecho, es inmutable (No cambiará más).

var edades = [12,32,32,53]
edades[1] = 12;  // no!
edades = [];     // no!
edades.push("2") // no!

Si algo tiene que cambiar en tu estructura de datos, haz los cambios en una copia.

const edades = [12,32,32,53]
const edadesNuevas = edades.map(function (edad){
    if (edad == 12) { return 20; }
    else { return edad; }
})

¿Vez que hice una copia con mis cambios necesarios?

Este elemento se repite una y otra vez. ¡No cambies el estado!

Si seguimos esa regla, haremos un uso intensivo de const para saber que las cosas no cambiarán. Pero tenemos que ir más allá. ¿Qué tal lo siguiente?

const objetoCambiante = {
    cambia: 10
}

objetoCambiante.cambia = 10;  // no!
delete obj.cambia      // no!

Las propiedades de objetoCambiante deberían estar completamente bloqueadas. const solo te protegerá de inicializar la misma variable.

const obj = Object.freeze({
    noCambia: 'Locked' }) // La función "freeze" aplica la inmutabilidad.

obj.noCambia = 0      // No cambia el objeto!
delete obj.noCambia   // No cambia el objeto!
obj.agregarProp = "Te la creiste!" // No cambia el objeto!

Si no podemos cambiar el estado global de las variables, entonces debemos asegurarnos de:

• Declarar los argumentos de la función: cualquier cálculo dentro de una función depende solo de los argumentos y no de ningún objeto o variable global.
• No modificar una variable u objeto: creamos nuevas variables y objetos y los devolvemos si es necesario, desde una función.

Haz que tu código sea referencialmente transparente

Cuando sigues la regla de nunca cambiar de estado, tu código se vuelve referencialmente transparente. Es decir, tus llamadas a funciones se pueden reemplazar con los valores que representan, sin afectar el resultado.

Como un ejemplo simple de verificar si tu código es referencialmente transparente, mira el siguiente fragmento de código:

const conoceAutor = function(){
    return 'Hola Kealan'
}

Deberías poder simplemente intercambiar esa llamada a la función con la cadena que devuelve y no tener problemas.

La programación funcional con expresiones referencialmente transparentes te hace comenzar a pensar en tu código de manera diferente si estás acostumbrado a la orientación a objetos.

¿Pero, por qué?

Porque en lugar de objetos y estados mutables en tu código, comienzas a tener funciones puras, sin cambios de estado. Entiendes claramente lo que esperas que devuelva tu función (ya que nunca cambia, cuando normalmente podría devolver diferentes tipos de datos dependiendo del estado fuera de la función).

Puede ayudarte a comprender mejor el flujo, comprender lo que está haciendo una función con solo escanearla y ser más riguroso con las responsabilidades de cada función para crear mejores sistemas desacoplados.

Puedes aprender más acerca de transparencia referencial aquí.

No hagas iteraciones

Con suerte, si has prestado atención hasta ahora, verás que no estamos cambiando el estado. Así que para aclarar, abandonaremos los bucles for :

for(let i = 0; i < arr.length; i++) {
    total += arr[i];
}

Porque estamos cambiando el estado de una variable. Utiliza en vez, la función de orden superior map.

Más características de la programación funcional

Espero que hasta este punto tengas una buena descripción de lo que es y no es el código funcional. Pero hay algunos conceptos finales que se usan mucho en el código funcional y que tenemos que cubrir.

En todo el código funcional que he leído, estos conceptos y herramientas son los que más se utilizan, y tenemos que cubrirlos para obtener nuestro conocimiento fundamental.

Así que, aquí vamos.

Recursión en programación funcional

Es posible que en JavaScript una función se llame a sí misma.

Lo que siempre hemos podido hacer:

function recurrir(){
    recurrir();
}

El problema con esto, es que no es útil. Se ejecutará eventualmente hasta que bloquee tu navegador. Pero la idea de recursividad es una función que se llama a sí misma desde dentro. Veamos un ejemplo más útil:

function recurrir(inicio, fin){
    if (inicio == fin) {
        console.log(fin)
        return;
    } else {
        console.log(inicio)
        return recurrir(inicio+1, fin)
    }
}

recurrir(1, 10);
// 1, 2, 3, 4, 5, 6, 7, 8, 9, 10

Este fragmento de código contará desde el argumento inicio hasta el argumento fin. Y lo hace volviendo a llamar a su propia función.

Así que el orden se verá algo así:

Agregue un debugger dentro de los bloques if para seguir esto, por si no te hace mucho sentido. La recursividad es una herramienta que puedes utilizar para iterar en la programación funcional.

¿Qué hace que el primer ejemplo y el segundo ejemplo sean diferentes? El segundo tiene lo que llamamos "un caso base". Un caso base permite que la función deje de llamarse a sí misma infinitamente. Cuando inicio es igual fin, podemos dejar de recurrir. Como sabemos, hemos contado hasta el final de nuestro ciclo.

Pero cada llamada de las funciones vuelve a llamar a su propia función y se suma al argumento de la función.

El ejemplo de código que acabo de incluir para el ejemplo de conteo, no es una función pura. ¿Por qué?

¡Porque console es un estado! Y le hemos registrado strings.

Esta ha sido una breve introducción a la recursividad, pero siéntete libre de ir aquí para obtener más información.

¿Por qué utilizar la recursividad?

Recursividad nos permite dejar de mutar las variables del estado, para empezar.

También hay ciertas estructuras de datos (estructuras de árbol) que son más eficientes cuando se resuelven con recursividad. Por lo general, requieren menos código, por lo que a algunos desarrolladores les gusta lo fácil que es leer la recursividad.

"Currying" en programación funcional

"Currying" es otra herramienta muy utilizada en código funcional. La aridad de una función se refiere a cuántos argumentos recibe.

// Veamos aridad
function aridad2(arg1, arg2){}             // Función tiene una aridad de 2
function aridad0(){}                       // Función tiene una aridad de 0
function aridad2(arg1, arg2, arg3, arg4){} // Función tiene una aridad de 4

Hacer currying a una función convierte esta función que tiene una aridad de más de 1 en 1. Lo hace devolviendo una función interna para tomar el siguiente argumento. He aquí un ejemplo:

function suma(primerNum, segundoNum){
	return primerNum + segundoNum;
}

// "Haciendo curry" a esta función

function currySuma(primerNum){
	return function(segundoNum){
            return primerNum + segundoNum;
    }
}

Esencialmente, reestructura una función para que tome un argumento, pero luego devuelve otra función para tomar el siguiente argumento, tantas veces como sea necesario.

¿Para que usar currying?

El gran beneficio del currying es cuando necesitas reutilizar la misma función varias veces, pero solo cambiar uno (o menos) de los parámetros. Entonces puedes guardar la primera llamada a la función, algo como esto:

function currySuma(primerNum){
	return function(segundoNum){
            return primerNum + segundoNum;
    }
}

let suma10 = currySuma(10);
suma10(2); // Returns 12

let suma20 = currySuma(20);
suma20(2); // Returns 22

Currying también puede hacer que tu código sea más fácil de refactorizar. No tienes que cambiar varios lugares donde estás pasando los argumentos de la función incorrectos, solo el lugar, donde enlazaste la primera llamada a la función al argumento incorrecto.

También es útil si no puedes proporcionar todos los argumentos a una función a la vez. Puede devolver la primera función para llamar a la función interna cuando tengas todos los argumentos más adelante.

Aplicación parcial en programación funcional

De manera similar, la aplicación parcial significa que aplicas algunos argumentos a una función a la vez y devuelve otra función que se aplica a más argumentos. Este es el mejor ejemplo que encontré en los documentos de MDN:

const modulo = {
  altura: 42,
  calcularAltura: function(altura) {
    return this.altura + altura;
  }
};

const aisladoCalcularAltura = modulo.calcularAltura;
console.log(aisladoCalcularAltura(32)); // La función se invoca desde el scope global
// salidas: NaN
// Salida NaN porque this.altura resulta undefined (en el scope de window) 
// undefined + 32 lo que retorna NaN

const unidoCalcularAltura = aisladoCalcularAltura.bind(modulo);
console.log(unidoCalcularAltura(32));
// Salida esperada: 74

bind es el mejor ejemplo de aplicación parcial. ¿Por qué?

Porque devolvemos una función interna que se asigna a unidoCalcularAltura que se llama, con este alcance configurado correctamente y un nuevo argumento pasado más tarde. No asignamos todos los argumentos a la vez, sino que devolvimos una función para aceptar el resto de los argumentos.

¿Por qué utilizar aplicación parcial?

Puedes usar la aplicación parcial siempre que no puedas pasar todos sus argumentos a la vez, pero que puedas devolver funciones de orden superior para lidiar con el resto de los argumentos.

Composición de funciones en programación funcional

El tema final que creo que es fundamental para el código funcional es la composición de funciones.

La composición de funciones nos permite tomar dos o más funciones y convertirlas en una función que hace exactamente lo que hacen las dos funciones (o más).

// Si tenemos esta dos funciones

function suma10(num) {
	return num + 10;
}
function suma100(num) {
    return num + 100;
}

// Podemos componer estas dos a lo siguiente =>
function compuesta(num){
	return suma10(suma100(num));
}

compuesta(1) // Retorna 111

Puedes llevar esto más allá y crear funciones para componer cualquier número de funciones de aridad múltiples juntas si lo necesitas según sea el caso.

¿Por qué usar composición de funciones?

La composición te permite estructurar tu código a partir de funciones reutilizables, para dejar de repetirte a ti mismo. Puedes comenzar a tratar las funciones como pequeños bloques de construcción que puedes combinar para lograr un resultado más complicado.

Estos luego se convierten en las "unidades" o el poder de cálculo en tus programas. Son muchas funciones pequeñas que funcionan genéricamente, todas compuestas en funciones más grandes para hacer el trabajo "real".

Es una forma poderosa de diseñar tu código y evita que crees funciones enormes copiadas y pegadas con pequeñas diferencias entre ellas.

También puede ayudarte a probar cuando tu código no está estrechamente acoplado. Y hace que tu código sea más reutilizable. Puedes simplemente cambiar la composición de tus funciones o agregar funciones más pequeñas a la composición, en lugar de tener todo el código copiado y pegado en todo el código base (para cuando necesites que haga algo similar pero no exactamente igual que otra función) .

El siguiente ejemplo es trivial para ayudarte a comprender, pero espero que veas el poder de la composición de funciones.

/// Este es un ejemplo donde tenemos que copiar y pegar
function suma50(num) {
	return num + 50;
}

// Ok. Ahora necesitamos sumar 30. Pero, TAMBIEN todavia necesitamos sumar 50 en otro lugar 
// Entonces necesitamos una función
function suma30(num){
	return num + 30;
}

// Pff, las cosas vuelven a cambiar
function sumar20(num){
	return num + 20;
}

// Cada vez que necesitamos cambiar la función aunque sea un poco, necesitamos una función nueva.

//Usemos composición

// Nuestra pequeña, función pura reutilizable
function sumar10(num){
	return num + 10;
}

function suma50Compuesta(num){
	return sumar10(sumar10(sumar10(sumar10(sumar10(num)))));
}

function suma30Compuesta(num){
	return sumar10(sumar10(sumar10(num)));
}

function suma20Compuesta(num){
	return sumar10(sumar10(num));
}

¿Ves cómo compusimos nuevas funciones a partir de funciones puras más pequeñas?

Conclusión

Este artículo cubrió mucho. Pero espero que haya explicado el código funcional de manera simple, junto con algunos de los patrones repetidos que verás una y otra vez, en código funcional e incluso no funcional.

El código funcional no es necesariamente el mejor, y tampoco lo es el código orientado a objetos. El código funcional se usa generalmente para problemas más matemáticos como el análisis de datos. También es muy útil para sistemas en tiempo real de alta disponibilidad, como cosas escritas en Erlang (un lenguaje funcional). Pero realmente depende de un problema a otro.

Como aprender más

Puedes comenzar aquí, con la introducción de freeCodeCamp a programación funcional con JavaScript.

Aquí puedes encontrar librerías para practicar, y ser todo un pro en programación funcional.

Traducido del artículo de Kealan Parr - What is Functional Programming? A Beginner's JavaScript Guide

Si eres como yo entonces probablemente no entendiste recursión la primera vez que leíste acerca de ella.

Para mí, fue porque:

1. Recursión en sí misma, es un concepto difícil.
2. Algunos de los tutoriales y artículos que leí no eran muy claros.

Por alguna razón, la mayoría de los artículos que explicaban recursión usaban el ejemplo de números factoriales y la secuencia de Fibonacci. Lo que significaba que tenía que entender como los números de Fibonacci funcionaban para después hacer la conexión a recursión.

Pero, vamos a tomar otro camino en este artículo.

¿Qué es recursión?

En términos simples: recursión es cuando una función sigue llamándose a sí misma, hasta que ya no tiene que hacerlo.

¿Qué? Si, la función se sigue llamándose a sí misma, pero con una entrada más pequeña cada vez.

Piensa en recursión como una carrera en un circuito. Es como correr la misma pista una y otra vez, pero las vueltas se hacen más pequeñas cada vez. Eventualmente, correrás la vuelta más pequeña y se terminará la carrera.

Lo mismo con la recursión: La función sigue llamándose a sí misma, cada vez con una entrada menor hasta que eventualmente se detiene.

Pero, la función no decide por sí misma cuando parar. Nosotros le decimos cuando. Nosotros le damos a la función una condición conocida como caso base.

El caso base es la condición que le dice a la función cuando dejar de llamarse a sí misma. Es como decirle a la función cuál será la última vuelta de la carrera para que se detenga después de la última vuelta.

Ejemplos de recursión

Muy bien eso es recursión. Vamos a mirar algunos ejemplos para entender como funciona la recursión.

¿Recuerdas la primera vez que aprendiste acerca de los bucles (loops)? El primer ejemplo que hiciste probablemente fue un programa que hacia una regresiva. Vamos a hacer eso.

Primero, necesitamos entender que queremos que haga nuestro programa. Cuenta regresiva desde un número dado hasta el número más pequeño, restando 1 cada vez que pasa por el bucle.

Dado el número 5, esperamos que la salida sea algo así:

// 5
// 4
// 3
// 2
// 1

Muy bien, ¿Cómo podemos programar este programa con recursión?

let cuentaAtras = numero => {
    //base case
    if (numero === 0) {
        return;
    }
    console.log(numero);
    return cuentaAtras(numero - 1);
};
console.log(cuentaAtras(5)) // 5, 4, 3, 2, 1

¿Qué exactamente es lo que pasa aquí?

Si te diste cuenta, lo primero que hicimos fue definir el caso base. ¿Por qué? Porque la función primero que nada necesita saber cuándo dejará de llamarse a sí misma.

¿Nunca correrías una carrera sin saber primero que tan larga es, o si?

Si no le dices a la función cuándo detenerse, entonces sucederá algo llamado stackoverflow. La pila(stack) se va a llenar con funciones que se están llamando, pero que no regresan ni se quitan de la pila.

La parte de recursión sucede en la línea 7. Donde le decimos a la función que siga regresando, pero reduciendo sus entradas una cada vez que regresa.

Así que, efectivamente, esto es  lo que sucede:

1// La entrada actual es 5
2// Es 5 igual a 0 ?
3// No, Ok entonces imprime 5 en la consola.
4// Se llama asi misma de nuevo con el numero - 1 O 5 - 1;
5// La entrada principal es 4
6// Es 4 igual a 0 ?
7// No, Ok entonces imprime 4 en la consola.
8// Repite hasta que la entrada sea 0, y asi la función deja de llamarse a si misma.

Vale, eso tiene sentido. Vamos con otro ejemplo.

¿Sabes cómo podemos saber que un número es par usando el operador de residuo(%)? Entonces, si cualquier número % 2 == 0 entonces ese número es par o si cualquier número % 3 == 0 entonces ese número es impar.

Bueno, resulta que existe otro método.

Si continuamente restamos dos a un número hasta que el número más pequeño sea 0(cero) o 1(uno) entonces podemos saber si el número es par o impar.

Intentemos eso con recursión. Entonces, dado el número 6, nuestro programa debería devolver 'Par' porque 6-2-2-2 = 0. Dado 7, nuestro programa debería devolver 'impar' porque 7-2-2-2 = 1.

Veamos el código.

let parImpar = (numero) => {
    if (numero === 0) {
        return 'Par';
    } else if (numero === 1) {
        return 'Impar';
    } else {
        return parImpar(numero - 2);
    }
};
console.log(parImpar(20)) // Par
console.log(parImpar(75)) // Impar
console.log(parImpar(98)) // Par
console.log(parImpar(113)) // Impar

De nuevo, el primer paso fue decirle a la función cuándo dejar de llamarse a sí misma. Luego le dijimos qué hacer cuando se llama a sí misma.

Recursión es básicamente divide y conquista. Seguimos dividiendo el problema haciéndolo cada vez más pequeño.

Recursión vs Bucles

Cuando se trata de velocidad, un bucle se ejecuta mucho más rápido que una función recursiva. También es más fácil escribir un bucle que una función recursiva. Y cuando se trata de legibilidad, es más fácil saber qué sucede con un bucle que con una función recursiva.

Pero, las funciones recursivas son muy elegantes.

Entonces, ¿Cuál es la mejor opción? ¿Eficiencia o velocidad?

Esta es una frase del libro Eloquent Javascript.

Preocuparse por la eficiencia puede ser una distracción. Es otro factor más que complica el diseño del programa, y ​​cuando estás haciendo algo que ya es difícil, esa cosa extra de la que preocuparte puede ser paralizante. Por lo tanto, empieza siempre por escribir algo que sea correcto y fácil de entender. Si te preocupa que sea demasiado lento, que normalmente no lo es, ya que la mayoría del código simplemente no se ejecuta con la frecuencia suficiente para llevar una cantidad significativa de tiempo, puedes medirlo después y mejorarlo si es necesario.

En este punto te preguntarás, porque alguien elegiría escribir una función recursiva en vez de un bucle. Si los bucles son mucho más sencillos, ¿verdad?

Bueno, eso es cierto - pero hay algunos problemas que son más fáciles de resolver con recursión. Si deseas explorar uno de esos problemas, considera leer el capítulo 3 de Eloquent JavaScript.

Ahora que has descubierto un nuevo superpoder, pongámoslo en práctica.

Realiza los siguientes ejercicios utilizando recursión. Si crees que puedes asumir más, puedes resolver los famosos problemas factorial y secuencia de Fibonacci.

Ejercicios

Si te gustaría ponerte un reto, considera resolver los siguientes ejercicios.

1. Escribe un programa que invierta una cadena usando recursión. Dada la cadena "freeCodeCamp", el programa debería devolver "pmaCedoCeerf".
2. Escribe un programa que devuelva el número de veces que aparece una letra en una cadena. Tu programa debería recibir una cadena y la letra.
   let programa = (cadena, letra) => {...}
   Después, debe devolver el número de veces que la letra aparece en la cadena. Dado el texto "JavaScript" y la letra  "a", su programa debe devolver 2.‌‌‌‌
   Pista: Intenta averiguar cuándo quieres que la función deje de llamarse a sí misma y cómo devolver una versión más pequeña del problema cada vez que la función se llama a sí misma.

Eso es todo por ahora. Espero te haya servido para entender recursión un poco más.‌‌

Traducido del artículo de Joel P Mugalu - How to Understand Recursion in JavaScript

Para poder subir a tu repositorio remoto, te debes asegurar de hacer commit  a todos tus cambios al repositorio local.

La sintaxis de ese comando es la siguiente:

git push <nombre del repositorio> <nombre de la rama>

Existen diferentes opciones que puedes pasar a este comando, puedes aprender más acerca de estos en la documentación de Git o ejecuta git push --help.

Subir a un repositorio remoto y rama específica.

En orden para subir tu código, primero debes clonar un repositorio a tu máquina local.

# Una vez clonado el repositorio, estarás trabajando dentro de la rama por defecto (Por defecto es `main`)
git clone https://github.com/<git-usuario>/<nombre-repo> && cd <nombre-repo>
# Haz cambios y agrega tus archivos (repite el comando `git add` por cada archivo, o utiliza `git add .` para agregarlos todos)
git add <nombre-archivo>
# Ahora haz el commit de tu código
git commit -m "Agregué cambios a mi repo!"
# Sube los cambios en la rama 'main' a github
git push origin main

Para aprender más acerca de ramas:

• Git checkout
• Git branch

Subir a un repositorio remoto específico y todas las ramas que contiene.

Si quieres subir todos tus cambios al repositorio remoto con todo y sus ramas, puedes utilizar:

git push --all <NOMBRE-REMOTO>

el cual:

• --all es la bandera que señala que quieres subir todas las ramas al repositorio remoto.
• NOMBRE-REMOTO es el nombre del repositorio remoto al cual las quieres subir.

Subir a una rama específica con el parámetro force

Si quieres ignorar los cambios locales hechos al repositorio Git en Github(Lo cual hacen la mayoría de desarrolladores para dar una solución rápida al servidor de desarrollo) luego puedes usar el comando —force para subir ignorando esos cambios.

git push --force <NOMBRE-REMOTO> <RAMA-REMOTA>

En la cual:

• NOMBRE-REMOTO es el nombre del repositorio remoto al cual quieres subir los cambios.
• RAMA-REMOTA es el nombre de la rama remota a la cual quieres subir los cambios.

Subir ignorando el hook pre-push de Git

Por defecto git push disparará el interruptor --verify. Esto significa que git ejecutará cualquier script pre-push(antes de subirlo) del lado del cliente, que haya sido configurado. Si el script pre-push falla, también fallará el git push. ( Hooks Pre-Push son buenos para hacer cosas como, revisar si los mensajes al hacer commit están dentro del estándar de la empresa, ejecutar tests unitarios, etc...). Ocasionalmente podrías querer ignorar este comportamiento por defecto, por ejemplo: en el escenario donde quisieras subir tus cambios a una rama en particular para que otro colaborador la descargue, pero los cambios en tu trabajo en progreso rompen los tests unitarios. Para ignorar el hook, simplemente inserta tu comando push y añade la bandera  --no-verify

git push --no-verify

Traducido del artículo - The Git Push Command explained

Ejemplo de botón onclick

<button onclick="miFunc()">Haz click</button>

<script>
  function miFunc() {
    alert('Se ha dado clic al botón!');
  }
</script>

En el ejemplo de arriba, cuando un usuario haga clic en el botón, verá una alerta en el navegador que muestra Se ha dado clic al botón!

Agregando onclick dinámicamente

El evento onclick se puede añadir también mediante código a cualquier elemento utilizando el siguiente ejemplo:

<p id="foo">Haz clic en este elemento.</p>

<script>
  let p = document.getElementById("foo"); // Encuentra el elemento "p" en el sitio
  p.onclick = muestraAlerta; // Agrega función onclick al elemento
    
  function muestraAlerta(evento) {
    alert("Evento onclick ejecutado!");
  }
</script>

Nota

Es importante notar que utilizando onclick solamente podemos agregar una función de escucha (listener function) que espera que algo suceda para capturarlo. Si quisieras agregar más, puedes utilizar addEventListener(), la cual es preferida para agregar capturadores de eventos.

En el ejemplo de arriba, cuando un usuario da clic en el elemento p dentro del html, verán una alerta que muestra Evento onclick ejecutado!.

Prevenir la acción por defecto

Ahora, si añadimos onclick a enlaces (etiqueta a de HTML) podríamos querer evitar que suceda la acción por defecto(default):

<a href="https://guide.freecodecamp.org" onclick="miAlerta()">Guías</a>

<script>
  function miAlerta(evento) {
    event.preventDefault();
    alert("Se ah dado clic al enlace pero el sitio no ah sido abierto");
  }
</script>

En el ejemplo anterior hemos prevenido el comportamiento por defecto del elemento a (abre el sitio) usando event.preventDefault() dentro de nuestra funciónonclick  callback.

MDN

Traducido del artículo - Javascript Onclick Event Explained