Funciones en JavaScript: las bases

En JavaScript todo es un objeto y, el más usado de todos, seguramente sean las funciones. Vamos a ver qué son y todo lo que necesitas saber para usarlas correctamente.

Las primeras veces que interactué con JavaScript recuerdo que no fueron buenas experiencias. Comparado con otros lenguajes, tenía cosas muy raras. Especiales. Uno de mis problemas principales es que no profundicé suficiente en la teoría sobre las funciones. No cometas el mismo error.

Qué son y cómo... ¿funcionan? las funciones

Tanto en JavaScript como en cualquier otro lenguaje, una función es un trocito de código independiente o semi-independiente, que se puede ejecutar en un momento dado y que sirve para obtener un resultado.

Las funciones aceptan parámetros de entrada y, si tu quieres, puedes aprovechar y establecer los parámetros de salida. Lo más importante de una función es que te permiten reaprovechar código.

Cuando veas que estás repitiendo código de forma repetida en varios puntos, eso es un síntoma claro de que necesitas añadir alguna función por ahí. Tu futuro "yo" te lo agradecerá.

Sintaxis

La forma básica de una función es esta:

function nombreFuncion(parametro1, parametro2, ..., parametroN) {
    // código de la función
    return resultado
}

Puedes tener tanto parámetros de entrada como quieras y, el valor devuelto, a parte de ser opcional, puede ser cualquier tipo de objeto (incluso otra función).

Ejemplo chorra, una función que sume los números en un array:

function sumaNumeros(arrayNumeros) {
  let acumulador = 0
  for (let index = 0; index < arrayNumeros.length; index++) {
    const numeroActual = arrayNumeros[index]
    acumulador += numeroActual
  }

  return acumulador
}

// así usamos la función
const resultado = sumaNumeros([1, 2, 3])
console.log(resultado) // 6

Hemos usado el bucle for, pero puedes usar otros tipos de bucles según tus necesidades.

En algunas ocasiones vamos a necesitar establecer valores por defecto en los parámetros de entrada de la función:

function nombreFuncion(parametro1, parametro2 = "valor por defecto") {
  // código función
}

Si hacemos la asignación de valor en el propio parámetro, ese es el valor que tendrá en caso de que cuando llamemos la función no indiquemos su valor. Si no hacemos esto, por defecto cualquier variable es undefined.

El valor por defecto puede ser cualquier tipo de objeto.

Tipos de funciones

Una particularidad de JavaScript es que se pueden declarar funciones de diversas maneras. Esto puede causas confusión, pero aunque no lo parezca, todo son funciones. Según el tipo, la función tendrá unas particularidades diferentes.

Funciones declarativas

Estas son las funciones clásicas, como en el ejemplo anterior de sumar números. Son funciones que se declaran con la palabra reservada function.

Estas funciones las puedes llamar tanto antes como después de declararlas, van a funcionar igual gracias al hoisting, que es un mecanismo de JavaScript con el cual la declaración de variables y funciones se mueven a la zona superior de su alcance. En este post te explico las formas de declarar de variables en JavaScript y verás el hoisting en acción.

Funciones expresivas

Son funciones que almacenamos en una variable:

// función con nombre
const miVariable = function nombreFuncion() {
  // código
}

// función anónima
const miVariable = function () {
  // código
}

// llamada
const resultado = miVariable()

Como puedes ver puedes hacerlo de dos formas. La diferencia entre darle un nombre o no a la función expresiva es que, si ocurre algún error durante la interpretación del código, será más fácil rastrearlo si la función tiene un nombre.

En cualquiera de los dos casos, para llamar a la función usaremos el nombre de la variable que hayamos usado.

Funciones flecha

Las funciones flecha son una forma corta de escribir functiones expresivas:

const miFuncion = (par1, par2, ..., parN) => {
  // código
}

En este tipo de declaración de funciones podemos ahorrarnos, en algunos casos, los paréntesis de los parámetros, cuando solo haya uno, aunque la verdad es que soy partidario de ponerlos siempre.

const miFuncion = (nombre) => {
  return `Hola ${nombre}`
}

Lo que quizás sea más útil es poner la función en una sola línea y ahorrarnos tanto las llaves como el return:

const miFuncion = (nombre) => `Hola ${nombre}`

Si no ponemos las llaves, el return será implícito, evaluando la expresión que pongamos. Con las funciones flecha podemos escribir algunas funciones de forma más limpia.

Funciones IIFE

Una función IIFE es una expresión de función ejecutada immediatamente, por sus siglas en inglés (Immediately Invoked Function Expression). Son funciones que se invocan ellas mismas:

;(function () {
  // código
})()

Si te fijas, tenemos un operador de grupo "()", la función y finalmente la invocación "()". Pueden ser con nombres, anónimas como en el ejemplo o funciones flecha.

Estas funciones no son accesibles desde fuera de su bloque de código. Si guardamos una IIFE en una variable, el valor que se almacena es su valor de retorno, no la función.

Por este motivo, podemos usar una IIFE cuando queremos ejecutar un trozo de código que sirva solo para inicializar una parte de los datos de una aplicación al inicio de la misma, ejecutando un código que ya no vamos a necesitar luego.

Otro caso de uso es cuando queremos ejecutar una función asíncrona en entornos donde no podemos ejecutar un await de alto nivel:

const funcionAsincrona = async () => {
  // código
}

(async () => {
  const variable await funcionAsincrona()
})()

Mira este artículo sobre la asincronía en JavaScript para ver cómo funciona. Hay algún caso de uso más que puedes consultar en MDN.

Conclusiones

Hemos visto qué son las funciones en JavaScript, cómo usarlas y los diferentes tipos y formas de declararlas. Las funciones se usan constantemente, por lo tanto es importante entender sus diferentes expresiones en JavaScript para que podamos entender el código de otros y escoger correctamente cuando nos toque crearlas.

La fuente principal de este post ha sido este genial post de freeCodeCamp.