¿Qué son las funciones?

Fragmentos de código en bloques reutilizables


Si estás aprendiendo a programar y aún no sabes lo que es una función, quizás te interese repasar antes el apartado de fundamentos de programación donde explico ¿Qué es una función?.

Por otro lado, si ya conoces el concepto de función en programación, quizás te interese profundizar un poco en como se utilizan en el mundo de Javascript. Las funciones son uno de los tipos de datos más importantes, ya que estamos continuamente utilizándolas a lo largo de nuestro código.

Y no, no me he equivocado ni he escrito mal el texto anterior. En Javascript, las funciones pueden ser tipos de datos como un número o una cadena de texto .

typeof function () {}; // 'function'

Como puedes ver, si le pedimos a Javascript que nos diga el tipo de dato de función, nos devuelve function, por lo tanto es un tipo de dato reconocido. Vamos a analizar como podemos utilizar las funciones en Javascript, ya que hay varias formas diferentes:

Formas de crear funciones

Hay varias formas principales de crear funciones en Javascript, aunque probablemente sólo conozcas alguna de ellas:

Ejemplo Descripción
1️⃣ function nombre(p1, p2...) { } Mediante declaración (la más usada por principiantes)
2️⃣ let nombre = function(p1, p2...) { } Mediante expresión (la más habitual en programadores con experiencia)
3️⃣ new Function(p1, p2..., code); Mediante un constructor de objeto (no recomendada)

Vamos a explicar cada una de estas formas a continuación, para saber cómo utilizarlas y cuando es interesante utilizarlas.

Funciones por declaración

Probablemente, la forma más popular de estas tres, y a la que estaremos acostumbrados si venimos de otros lenguajes de programación, es la primera, a la creación de funciones por declaración. Esta forma permite declarar una función que existirá a lo largo de todo el código:

function saludar() {
  return "Hola";
}

saludar();      // 'Hola'
typeof saludar; // 'function'

De hecho, podríamos ejecutar la función saludar() incluso antes de haberla creado y funcionaría correctamente, ya que Javascript primero busca las declaraciones de funciones y luego procesa el resto del código.

Funciones por expresión

Sin embargo, en Javascript es muy habitual encontrarse códigos donde los programadores «guardan funciones» dentro de variables, para posteriormente «ejecutar dichas variables». Se trata de un enfoque diferente, creación de funciones por expresión, que fundamentalmente, hacen exactamente lo mismo (con algunos matices diferentes):

const saludo = function saludar() {
  return "Hola";
};

saludo(); // 'Hola'

Con este nuevo enfoque, estamos creando una función en el interior de una variable, lo que nos permitirá posteriormente ejecutar la variable (como si fuera una función, que de hecho lo es, porque es lo que contiene).

Observa también que el nombre de la función (saludar) pasa a ser inútil, ya que si intentamos ejecutar saludar() nos dirá que no existe y si intentamos ejecutar saludo() funciona correctamente. ¿Qué ha pasado? Ahora el nombre de la variable pasa a ser el «nombre de la función», mientras que el anterior nombre de la función desaparece y se omite, creando un concepto llamado funciones anónimas (o funciones lambda), que retomaremos más adelante.

La diferencia fundamental entre las funciones por declaración y las funciones por expresión es que estas últimas sólo están disponibles a partir de la inicialización de la variable. Si «ejecutamos la variable» antes de declararla, nos dará un error.

Funciones como objetos

Como curiosidad, debes saber que se pueden declarar funciones como si fueran objetos. Sin embargo, es un enfoque que no se suele utilizar en el mundo real, ya que es incómodo, poco práctico y muy verboso:

const saludar = new Function("return 'Hola';");

saludar(); // 'Hola'

Simplemente es interesante saberlo para darse cuenta que en Javascript todo pueden ser objetos

¿Quién soy yo?

Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.

Puedes encontrar más sobre mi en Manz.dev