Funciones en JavaScript para Muggles

Última actualización: 01 - 11 - 2023

¿Qué es una función?

Son líneas de código que realizan tareas específicas dentro un programa. También es el algoritmo encargado de darle vida o funcionalidad a cualquier elemento con el que interactue un usuario a través de la interfaz del software. Las funciones son las responsables de la ejecución interna de cualquier comando que estemos desarrollando y tienen la misión de cumplir única y exclusivamente la acción que se le asigne.

Creación de funciones. Funciones por declaración y funciones por expresión

Cómo crear una función en JavaScript es uno de los pasos más importantes para el flujo de nuestro algoritmo. Existen varias formas de definirlas o escribirlas pero entender las diferencia entre una función declarativa y una función expresiva nos puede ayudar a desarrollar de mejor manera.

Sintaxis de una función por declaración

Las funciones declarativas comienzan con la palabra reservada function y luego el nombre de la función. Este nombre puede DEBE ser el que mejor se adapte a la tarea que va a realizar esa función; el nombre de la función sigue las mismas reglas para nombrar variables y luego es seguido por sus respectivos parentesis () donde se colocarán los parámetros (si los requiere) y corchetes {} donde irá la lógica o el algoritmo que realizará la función.

//Ejemplo de una función declarativa

let punto1 = 10;
let punto2 = 15;

function sumarPuntos(){
  console.log(punto1 + punto2);
  //El resultado es 25
}

Más adelante veremos qué son los parámetros de una función.😁

Sintaxis de una función por expresión

Las funciones expresivas funcionan exactamente igual que una función declarativa, la diferencia está en la forma en la que se define y en su hoisting.* Para crear una función expresiva se debe declarar una variable que va a contener esa función, luego se escribe la función siguiendo las mismas reglas que una función declarativa.

*El hoisting, de una forma muy simplificada, es la traducción literal de izar y se entiende que las variables y las funciones declarativas son movidas al inicio del algoritmo. JavaScript trabaja con una "lectura" de arriba hacia abajo de todo el archivo y no importa desde cual punto del algoritmo se encuentre, la ejecución de esa función siempre estará disponible en todo el ciclo de vida del programa.

//Ejemplo de una función expresiva

let escuela = "Hogwarts";

let bienvenida = darBienvenida(){
  console.log("Bienvenidos a " + escuela);
  //Bienvenidos a Hogwarts
}

Ahora que sabemos lo más básico acerca de las funciones de JavaScript vamos a aprender cómo llamar estas funciones. Los ejemplos de ahora en adelante pueden ser declarativos o expresivos, lo que me venga en gana para el guión de este artículo y su temática. 🤣

Invocando o llamando a las funciones

Para hacer uso de una función solo debemos escribir el nombre que le hayamos puesto a la función seguido de sus parentesis.

//Ejemplo de invocación de una función

function lanzarHechizo(){
  console.log("Lumos");
}

//Invocando la función
lanzarHechizo();

//Ejemplo con una función expresiva

let encantamiento = function encantar(){
  console.log("Wingardium leviosÁ leviosa");
}

//Invocando la función expresiva
encantamiento();

Parámetros y argumentos de una función

Los parámetros son datos que se le pasan a una función que para este realice un proceso con la información que se le está proporcionando. Estos datos pueden ser de cualquier tipo (variables, un objeto e incluso otras funciones) según la necesidad que tenga el algoritmo.

Para pasar datos a una función debemos crearla y luego determinar con cuántos y cuáles parámetros debe tomar para realizar su misión.

function funcionConParametros(parametro1, variableComoParametro){
  //Lógica de la función
}

Ahora un ejemplo más concreto. Supongamos que queremos realizar un hechizo utilizando una función, para ello podemos declarar una función y pasarle un parámetro que contenga el hechizo que queremos realizar.

let hechizo = "Accio";

function lanzarHechizo(hechizo){
  console.log(`Hechizo realizado: ${hechizo}`);
}

lanzarHechizo(hechizo);

//Si cambiamos el valor de la variable hechizo se modificará el hechizo realizado

Parámetros por defecto de una función en JavaScript

Una de las características que nos dio las actualizaciones del lenguaje a partir del ES6 es la capacidad de pasar parámetros con valores predeterminados.

function lanzarHechizo(hechizo = "Accio"){
  console.log(`Hechizo realizado: ${hechizo}`);
}

lanzarHechizo();

//Ahora el hechizo a lanzar por defecto es Accio pero si escribimos un argumento el resultado del hechizo lanzado 
 es por el que estipulamos

¡HEY! ¿Y qué son los argumentos de una función?🤔

Los argumentos son los datos que le vamos a proporcionar a la función, si tiene parámetros, cuando esta es invocada. Si no te ha quedado claro ya vamos a ver la diferencia entre parámetros y argumentos. Tomemos el mismo ejemplo de arriba:

//Ahora no se va a crear una variable

function lanzarHechizo(hechizo){//Aquí van los parámetros
  console.log(`Hechizo realizado: ${hechizo}`);
}

lanzarHechizo("Accio");//Aquí van los argumentos

//Ahora si cambiamos el valor del argumento el hechizo realizado cambia

Ahora tu nivel de entendimiento de las funciones ha aumentado. ¡50 puntos para la casa a la que pertenezcas! 😆. Veamos otros tipos de funciones.

Funciones anónimas

¿Qué es una función anónima en JavaScript?

Como bien describe el título de esta sección, son funciones que no poseen un nombre y estas son invocadas a través de una variable como si fuesen una función expresiva.

const conjurar = function (nombreConjuro){
  console.log(nombreConjuro);
}

conjurar("Revelio");

Funciones de Callback

¿Qué es una función de callback en JavaScript?

Los callbacks son funciones que se pasan por parámetro a otra función y son ejecutadas una vez la función que la ejecutó haya finalizado su proceso. Un ejemplo de esto son los eventos (como un click o un mouseover) pero haremos un ejemplo más sencillo.

function maldicionImperdonable(victima, maldicionDeCallback){
  console.log(`Maldición ${maldicionDeCallback()} lanzada a ${victima}`)
}

maldicionImperdonable("Potter", <--- 1er parámetro
  function maldicionDeCallback(){ <--- 2do parámetro
    return "Avada Kevadra";
  }); <--- Cierre de los parámetros de la función maldicionImperdonable

Es la primera vez en este artículo que vemos la palabra return🤔; hasta ahora sólo se han mostrado ejemplos con mensajes en la consola. Si se dan cuenta el objeto consola tiene un método log que es parecido a ejecutar una función pero las diferencias entre un método y una función, a simple vista, son las siguientes:

• Los métodos son precedidos por un punto

Por eso los métodos de un array o de un objeto no son llamados funciones como tal.

• Las funciones actúan según la lógica o el algoritmo que diseñemos

Los métodos ya poseen una lógica predefinida para cumplir su tarea.

Funciones que retornan valores

Las funciones casi siempre nos tienen que retornar un valor que son los datos que la función ha procesado para luego ser utilizados en otra parte de nuestro programa. Por eso se utiliza la palabra return al final de las funciones. Codeemos un poco más.

function transformar(objeto,transformacion){
  return `${objeto} transformado en ${transformacion}`;
}

//Cuando se usa un return se debe utilizar una variable para manipular el dato que nos devuelve

const resultadoTransformacion = transformar("Gato","Vasija");

alert(resultadoTransformacion);

//Esta vez se utilizó el dato para mostrar una alerta en pantalla con el resultado

Estos valores pueden ser utilizados de formas más complejas, ya sean para operaciones matemáticas, mostrar información en pantalla manipulando el DOM o para pasar un dato procesado a otra función. Todo va a depender de la complejidad o de los requisitos del algoritmo.

Las funciones de flecha (Arrow Functions) en JavaScript

¿Cómo hacer una función de flecha en JavaScript?

Este tipo de funciones realizan la misma tarea que una función convencional, su sintaxis es un poco diferente ya que no usa la palabra reservada function, en su lugar utiliza los signos de igualdad y mayor que formando una flecha (=>) para determinar que es una función.

Otra diferencia de las arrow functions es que no es afectada por el hoisting por lo que es determinante el uso que le vayas a dar a este tipo de función dentro de tu algoritmo.

La tercera característica de una función de flecha es que pueden ser resumidas en una sola línea de código siempre y cuando su lógica sea retornar un valor. Veamos en código todas estas cualidades.

//Sintaxis de una arrow function

let patronus = (nivelFelicidad) => {
  return "Expecto Patronum";
}
console.log(patronus(9));

//Como esta función solo retorna un texto se puede simplificar

let patronus = nivelFelicidad => "Expecto Patronum";
console.log(patronus(9));

//Si la función tuviese un algoritmo más complejo esta simplificación no se podría hacer

//Ya que hay un argumento con el número 9 hagamos esa tarea con un condicional 

const patronus = (nivelFelicidad) => {

  let huir = ( ) => "¡¡CORRE!!";

  if(nivelFelicidad >= 5){
    return "Expecto Patronum";
  } else {
    return huir();
  }

}
console.log(patronus(9));

Si este post te ha gustado o ayudado a comprender mejor las funciones de JavaScript hazmelo saber a través de mis redes sociales, compartelo y dime qué te ha parecido. 🙂