Funciones JavaScript. Parte 7 Curso de JavaScript de principiante a avanzado en 10 publicaciones de blog

Funciones JavaScript – tabla de contenidos:

1. Funciones de JavaScript: información básica
2. Funciones puras

Hasta ahora, hemos visto aspectos bastante importantes de JavaScript junto con algunas de las mejores prácticas de codificación más comunes que debemos seguir. Estas supuestas prácticas están ahí por una razón y, a medida que las usamos, nos ahorrarán muchos errores y frustraciones que enfrentaríamos de otra manera. 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 "para bucles" nos ahorró mucho tiempo y código. En este tutorial veremos otro bloque de construcción importante en la programación, y se llama "funciones".

Funciones de JavaScript: información básica

Las funciones son extremadamente comunes en la programación, y esto también incluye JavaScript. De hecho, son tan comunes que algunos marcos de JavaScript, como React, se crearon para aprovechar las funciones de JavaScript como un componente fundamental para crear el front-end de los sitios web. Y lo hicieron por una buena razón. Las funciones de JavaScript proporcionan una gran flexibilidad, al mismo tiempo que proporcionan un código modular y altamente predecible. Y eso da como resultado un código mucho más claro con menos repeticiones y muchos menos errores. Una de las primeras cosas que debe saber acerca de las funciones es que hay dos tipos principales de funciones. Son a saber, "funciones puras" y "funciones impuras". En términos generales, querremos usar funciones puras donde podamos, tanto como sea posible. Las funciones puras brindan múltiples ventajas que las hacen mucho más fáciles de trabajar en comparación con las funciones impuras. Veamos primero las funciones de JavaScript puras y luego profundicemos en las funciones impuras también.

Funciones puras

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 y algunas otras ventajas.

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

De esta manera, cuando trabaja con una función pura, sabe que no importa dónde esté ejecutando su código o cuándo esté ejecutando su código, siempre que proporcione las mismas entradas, obtendrá las mismas salidas. Veámoslo con algunos ejemplos.

// double the initial number
function double(num){
    return num * 2;
}

// triple the initial number
function triple(num){
    return num * 3;
}

// add 100 to the initial number
function add100(num){
    return num + 100;
}

// add two numbers
function addTwoNums(num1, num2){
    const sum = num1 + num2;
    return sum;
}

// multiply two numbers
function multiplyTwoNums(num1, num2){
    const total = num1 * num2;
    return total;
}

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

A continuación, le damos un nombre a la función, preferiblemente este nombre debe ser corto, pero lo suficientemente descriptivo para que alguien que viene entienda lo que está haciendo la función. Por ejemplo, si estamos sumando 100 a un número, podemos nombrar la función como “sumar100”, si estamos duplicando un número, podemos nombrar la función como “doble” y así sucesivamente.

Una vez que nombramos la función apropiadamente, el siguiente paso es darle algunas entradas. Proporcionamos las entradas entre paréntesis y, si tenemos varias entradas, las separamos con una coma. Tal como lo hicimos en la función "multiplyTwoNums". (Además, como nota al margen, los números se conocen comúnmente como "nums" para abreviar en programación, por lo que si estamos nombrando una función, podemos usar ese conocimiento común para tener nombres de función breves 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 cuando usamos la función también se conocen comúnmente como "argumentos". Entonces, cuando proporcionamos una entrada para la función, este proceso también se conoce como "pasar argumentos" a una función. Veamos algunos ejemplos de eso.

// first let's define the function that takes a number 
// and multiplies it by 10
function multiplyBy10(num1){
    return num1 * 10;
}

// now let's call that function
// save the result into a constant
// and display the results
const bigNum = multiplyBy10(3);
alert(bigNum);
// num1 is here is the parameter.
// we passed the value 3 as an argument to the function.
// we saved the results of the function
// to a constant called bigNum.
// we displayed the constant called bigNum to the user.

Como vio en el código anterior, incluso cuando queremos mostrarle 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 interactúe con otras partes de la computadora y haría que nuestra función fuera impura. Entonces, en general, queremos usar las funciones para darles entrada y esperar un valor devuelto. Cuando obtenemos ese valor devuelto, podemos mostrarlo o realizar otras funciones de JavaScript con él según nuestras necesidades, pero el punto es mantener las preocupaciones de mostrar los resultados y calcular los resultados por separado.

Entonces, hasta ahora hemos visto que podemos usar la palabra clave "función" para comenzar a declarar la función, luego nombramos la función apropiadamente, luego abrimos y cerramos paréntesis y le decimos a la función los parámetros que requerirá, luego abrimos llaves y decirle 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 fueron necesarios para definir una función pura. Ahora que tenemos una función, podemos usar una función en otras partes de nuestro programa. El uso de una función se conoce comúnmente como "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 hagamos 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 una constante, podemos realizar aún más cálculos con él, podemos enviarlo a otras computadoras o también podemos mostrar directamente los resultados. Veamos algunos ejemplos de eso.

// let's start with a function that takes two arguments
// multiplies them and return the result.
// we can either directly return the result,
// or we can temporarily create a constant 
// and return that constant as well.
function multiplyTwoNums(num1, num2) {
    const total = num1 * num2;
    return total;
function multiplyTwoNumsSecondVersion(num1, num2){
    return num1 * num2;
// two functions above will give us the exact same result
const result1 = multiplyTwoNums(3, 5);
const result2 = multiplyTwoNumsSecondVersion(3, 5);
// we can check the equality of the function results 
// with another function
function checkEquality(number1, number2){
    return number1 === number2;
// if the results of both functions are the same,
// the checkEquality function will return "true" 
// as a boolean data type
const isEqual = checkEquality(result1, result2);
// now we can use that boolean value to display a message
if (isEqual){
    alert("Both give the same result!");
} else {
   alert("They are not the same thing!");
}

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

Hasta ahora hemos trabajado con funciones puras, y esto suele ser lo que pretendemos codificar la mayor parte del tiempo. Pero eso no quiere decir que solo trabajarás con funciones puras. Una vez que tenga 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.

Más aún, dado que podemos escribir cualquier código dentro de los paréntesis de una función, podemos interactuar con el mundo exterior, enviar y recibir datos, modificar datos existentes, mostrar alertas, etc. No está prohibido hacer todo esto, y agregar declaraciones de console.log durante el proceso de desarrollo del código puede ser realmente útil. Es por eso que no nos mantenemos alejados directamente de las funciones impuras, pero dado que pueden causar mucha fricción y errores en el código, incluso hacer que su código sea más difícil de probar, intentaremos separar las tareas en funciones de javascript puras tanto como sea posible. Incluso cuando solemos hacer que nuestras funciones sean impuras agregando sentencias alert o console.log, por lo general queremos eliminarlas de nuestro código, ya sea borrándolas o comentándolas.

Veamos algunos ejemplos de eso.

// greet user with an impure function
// it takes no arguments and gives no return
// it also interacts with the outside world by 
// displaying an alert
function greet(){
    alert("Hello User!");
}
// note that the results will not show 
// unless we call the function
greet();
// make some calculations and console log them
function squareNum(num1){
    const result = num1 * num1;
    console.log(result);
}

// this will show the result in the JavaScript console we have below
// The console we just used is highly used in programming
// including in JavaScript.
// console.log statements can be really helpful 
// in telling you what is happening inside your program
// this way if something unexpected happens 
// you can see exactly where and when it happens
squareNum(7);
function multiplyTwoNums(num1, num1){
    console.log("First number is " + num1);
    console.log("Second number is " + num2);
    const result = num1 * num2;
    console.log("The resulting multiplication is " + result);
}

// lets call the function above with two numbers we choose
// and check our JavaScript console for console logs
multiplyTwoNums(5, 7);

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

Como puede ver en la salida, tenemos la declaración de alerta que se muestra desde dentro de la primera función que ejecutamos. Tenemos el número resultante de 49 desconectados en la consola de JavaScript. Inmediatamente después de eso, tenemos una salida más detallada en la consola sobre la tercera función. Hacer declaraciones de console.log es bastante común en la programación, dependiendo del lenguaje de programación que use, el nombre exacto puede cambiar, pero la idea sigue siendo la misma. Con las declaraciones de console.log, podemos echar un vistazo a nuestro programa y entender mejor nuestro código. Esta es una herramienta especialmente útil cuando algo sale mal en su programa e intenta averiguar dónde cometió exactamente el 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 asimilen. También recomiendo escribir los ejemplos en los que trabajamos y experimentarlos de primera mano. Cuando esté listo, continuaremos con los objetos en JavaScript en el próximo tutorial.

Autor: Robert Whitney

Experto en JavaScript e instructor que entrena a los departamentos de TI. Su objetivo principal es aumentar la productividad del equipo enseñando a otros cómo cooperar de manera efectiva mientras codifican.

Ver todas las publicaciones

Curso de JavaScript de principiante a avanzado en 10 publicaciones de blog:

1. ¿Cómo empezar a codificar en JavaScript?
2. Conceptos básicos de JavaScript
3. Variables y diferentes tipos de datos en JavaScript
4. Snippets y estructuras de control
5. Bucles while y bucles for
6. matriz Java
7. Funciones JavaScript
8. Objetos JavaScript
9. Métodos de JavaScript y más
10. Resumen del curso de JavaScript