Funciones de JavaScript. Parte 7 Curso de JavaScript de Principiante a Avanzado en 10 publicaciones de blog

Esta es la parte 7 de la serie de publicaciones del blog sobre JavaScript que te llevará de principiante a avanzado. Al final de esta serie, conocerás todos los conceptos básicos que necesitas saber para comenzar a programar en JavaScript. Sin más preámbulos, comencemos con el séptimo tutorial.

Funciones de JavaScript – tabla de contenido:

1. Tipos de funciones de JavaScript
2. Funciones puras en JavaScript

Hasta ahora hemos visto aspectos bastante importantes de JavaScript junto con algunas de las mejores prácticas de codificación más comunes que deberíamos seguir. Estas llamadas prácticas están ahí por una razón y, a medida que las usamos, nos ahorrarán muchos errores y frustraciones que de otro modo enfrentaríamos. Una de las mejores prácticas que hemos visto fue seguir el principio DRY, que básicamente decía: No te repitas. Una forma en que aplicamos este principio fue usar bucles en nuestro programa, más específicamente “bucles for” que nos ahorraron mucho tiempo y código. En este tutorial veremos otro bloque de construcción importante en la programación, y se llama “funciones”.

Tipos de funciones de JavaScript

Las funciones son extremadamente comunes en la programación, y esto incluye JavaScript también. De hecho, son tan comunes que algunos frameworks de JavaScript como React, se construyeron aprovechando las funciones de JavaScript como un bloque de construcción fundamental para crear el front end de los sitios web. Y lo hicieron por una buena razón. Las funciones de JavaScript proporcionan una alta flexibilidad, al tiempo que ofrecen un código altamente predecible y modular. Y eso resulta en un código mucho más claro con menos repeticiones y muchos menos errores. Una de las primeras cosas que debes saber sobre las funciones es que hay dos tipos principales de funciones. Son “funciones puras” y “funciones impuras”. Hablando en términos generales, querrás usar funciones puras donde puedas, tanto como sea posible. Las funciones puras ofrecen múltiples ventajas que las hacen mucho más fáciles de trabajar en comparación con las funciones impuras. Veamos primero las funciones puras de JavaScript y luego profundicemos en las funciones impuras también.

Funciones puras en JavaScript

Las funciones puras son esencialmente funciones que siguen ciertas reglas. Y debido a que siguen esas reglas, son altamente predecibles, más fáciles de depurar en un sistema más grande, modulares junto con algunas otras ventajas.

Una función pura recibe alguna entrada y devuelve alguna salida. No modifica las entradas directamente ni interactúa con el entorno de ninguna otra manera. Dicho esto, no te envía alertas, no te da una declaración mientras hace algo más, ni interactúa con su entorno de ninguna otra manera.

De esta manera, cuando trabajas con una función pura, sabes que no importa dónde estés ejecutando tu código o cuándo lo estés ejecutando, siempre que des las mismas entradas, obtendrás las mismas salidas. Veamos eso con algunos ejemplos.

// duplica el número inicial
function double(num){
    return num * 2;
}

// triplica el número inicial
function triple(num){
    return num * 3;
}

// añade 100 al número inicial
function add100(num){
    return num + 100;
}

// suma dos números
function addTwoNums(num1, num2){
    const sum = num1 + num2;
    return sum;
}

// multiplica dos números
function multiplyTwoNums(num1, num2){
    const total = num1 * num2;
    return total;
}

Todas las funciones de JavaScript anteriores son funciones puras. Al observar más de cerca, es posible que hayas visto el patrón que usamos al crear funciones puras. El primer paso es que escribimos la palabra clave “function” para decirle a JavaScript que queremos definir una función.

A continuación, le damos a la función un nombre, preferiblemente este nombre debe ser corto, pero lo suficientemente descriptivo para que alguien que venga a entender lo que hace la función. Por ejemplo, si estamos añadiendo 100 a un número, podemos nombrar la función como “add100”, si estamos duplicando un número, podemos nombrar la función como “double” y así sucesivamente.

Una vez que hemos nombrado la función adecuadamente, el siguiente paso es darle algunas entradas. Proporcionamos las entradas dentro de paréntesis y si tenemos múltiples entradas las separamos con una coma. Justo como hicimos en la función “multiplyTwoNums”. (Además, como nota al margen, los números comúnmente se denominan “nums” en programación, así que cuando estamos nombrando una función podemos usar ese conocimiento común para tener nombres de funciones cortos pero descriptivos.)

Las entradas que proporcionamos a la función también se denominan comúnmente “parámetros”, cuando creamos las funciones de JavaScript decidimos cuántos parámetros tendrá la función. Cuando decidimos usar la función, proporcionamos esos parámetros con “valores”. Esos valores que proporcionamos al usar la función también se denominan comúnmente “argumentos”. Así que cuando proporcionamos una entrada para la función, este proceso también se denomina “pasar argumentos” a una función. Veamos algunos ejemplos de eso.

// primero definamos la función que toma un número 
// y lo multiplica por 10
function multiplyBy10(num1){
    return num1 * 10;
}

// ahora llamemos a esa función
// guardemos el resultado en una constante
// y mostremos los resultados
const bigNum = multiplyBy10(3);
alert(bigNum);
// num1 aquí es el parámetro.
// pasamos el valor 3 como argumento a la función.
// guardamos los resultados de la función
// en una constante llamada bigNum.
// mostramos la constante llamada bigNum al usuario.

Como viste en el código anterior, incluso cuando queremos mostrar algo al usuario, mantenemos la función separada de la función de alerta. Si tuviéramos que mostrar los resultados al usuario dentro de la función, esto requeriría que la función interactuara con otras partes de la computadora y haría que nuestra función fuera impura. Así que, hablando en términos generales, queremos usar las funciones para darles entrada y esperar un valor devuelto. Cuando obtenemos ese valor devuelto, entonces podemos mostrarlo o realizar otras funciones de JavaScript con él dependiendo de nuestras necesidades, pero el punto es mantener separadas las preocupaciones de mostrar los resultados y calcular los resultados.

Así que hasta ahora hemos visto que podemos usar la palabra clave “function” para comenzar a declarar la función, luego nombramos la función adecuadamente, luego abrimos y cerramos paréntesis y le decimos a la función los parámetros que requerirá, luego abrimos llaves y le decimos a la función lo que queremos que haga, una vez que llegamos a un resultado, devolvemos ese resultado con la palabra clave “return”. Y luego cerramos las llaves. Todos estos pasos son necesarios para definir una función pura. Ahora que tenemos una función, podemos usar una función en otras partes de nuestro programa. Usar una función se denomina comúnmente “llamar a una función”.

Llamar a una función es mucho más simple que declarar la función. Para llamar a una función, podemos usar su nombre, abrir paréntesis, pasarle algunos argumentos y cerrar los paréntesis. Cuando hacemos esto, la función nos devolverá el valor de retorno que definimos. Dependiendo de lo que queramos hacer con ese valor devuelto, podemos asignarlo a una variable o constante, podemos realizar incluso más cálculos con él, podemos enviarlo a otras computadoras, o podemos mostrar directamente los resultados también. Veamos algunos ejemplos de eso.

// comencemos con una función que toma dos argumentos
// los multiplica y devuelve el resultado.
// podemos devolver directamente el resultado,
// o podemos crear temporalmente una constante 
// y devolver esa constante también.
function multiplyTwoNums(num1, num2) {
    const total = num1 * num2;
    return total;
}
function multiplyTwoNumsSecondVersion(num1, num2){
    return num1 * num2;
// las dos funciones anteriores nos darán el mismo resultado
const result1 = multiplyTwoNums(3, 5);
const result2 = multiplyTwoNumsSecondVersion(3, 5);
// podemos verificar la igualdad de los resultados de las funciones 
// con otra función
function checkEquality(number1, number2){
    return number1 === number2;
// si los resultados de ambas funciones son los mismos,
// la función checkEquality devolverá "true" 
// como un tipo de dato booleano
const isEqual = checkEquality(result1, result2);
// ahora podemos usar ese valor booleano para mostrar un mensaje
if (isEqual){
    alert("¡Ambos dan el mismo resultado!");
} else {
   alert("¡No son lo mismo!");
}

Ejecutar el código anterior en Chrome Snippets nos daría el siguiente resultado:

Hasta ahora hemos trabajado con funciones puras, y esto es generalmente lo que buscamos codificar la mayor parte del tiempo. Pero eso no significa que solo trabajarás con funciones puras. Una vez que tengas una comprensión de las funciones puras, las funciones impuras son relativamente más fáciles. Cuando definimos una función, o declaramos una función, después de usar el nombre de la función, en realidad no tenemos que pasarle ningún parámetro. En ese caso, dejaremos los paréntesis vacíos, tampoco tenemos que devolver algo de la función.

Aún más, dado que podemos escribir cualquier código dentro de las llaves de una función, podemos interactuar con el mundo exterior, enviar y recibir datos, modificar datos existentes, mostrar alertas, y así sucesivamente. Hacer todo esto no está prohibido, y agregar declaraciones console.log durante el proceso de desarrollo del código puede ser realmente útil. Por eso no nos alejamos directamente de las funciones impuras, pero dado que pueden causar mucha fricción y errores en el código, incluyendo hacer que tu código sea más difícil de probar, buscaremos separar tareas en funciones puras de JavaScript tanto como sea posible. Incluso cuando usamos para hacer que nuestras funciones sean impuras al agregar alertas o declaraciones console.log, generalmente queremos eliminarlas de nuestro código ya sea borrándolas o comentándolas.

Veamos algunos ejemplos de eso.

// saludar al usuario con una función impura
// no toma argumentos y no devuelve nada
// también interactúa con el mundo exterior al 
// mostrar una alerta
function greet(){
    alert("¡Hola Usuario!");
}
// nota que los resultados no se mostrarán 
// a menos que llamemos a la función
greet();
// hacer algunos cálculos y registrarlos en la consola
function squareNum(num1){
    const result = num1 * num1;
    console.log(result);
}

// esto mostrará el resultado en la consola de JavaScript que tenemos abajo
// La consola que acabamos de usar es muy utilizada en programación
// incluyendo en JavaScript.
// las declaraciones console.log pueden ser realmente útiles 
// para decirte qué está sucediendo dentro de tu programa
// de esta manera, si algo inesperado sucede 
// puedes ver exactamente dónde y cuándo sucede
squareNum(7);
function multiplyTwoNums(num1, num2){
    console.log("El primer número es " + num1);
    console.log("El segundo número es " + num2);
    const result = num1 * num2;
    console.log("La multiplicación resultante es " + result);
}

// llamemos a la función anterior con dos números que elegimos
// y verifiquemos nuestra consola de JavaScript para los registros
multiplyTwoNums(5, 7);

Ejecutar el código anterior daría como resultado lo siguiente:

Como puedes ver en la salida, tenemos la declaración de alerta mostrando desde dentro de la primera función que ejecutamos. Tenemos el número resultante de 49 registrado en la consola de JavaScript. Justo después de eso, tenemos una salida más detallada en la consola sobre la tercera función. Hacer declaraciones console.log es bastante común en programación, dependiendo del lenguaje de programación que uses, el nombre exacto puede cambiar, pero la idea sigue siendo la misma. Con las declaraciones console.log, podemos echar un vistazo dentro de nuestro programa y entender mejor nuestro código. Esta es especialmente una herramienta útil cuando algo sale mal en tu programa y tratas de averiguar dónde exactamente cometiste un error.

En el próximo tutorial veremos otro tema importante en JavaScript llamado objetos. Antes de pasar al siguiente tutorial, es una buena idea revisar esta parte una vez más para que los conceptos se asienten. También recomiendo encarecidamente escribir los ejemplos en los que trabajamos y experimentarlos de primera mano. Cuando estés listo, continuaremos con los objetos en JavaScript en el próximo tutorial.