Function Expression

Si una función es un valor como cualquier otro, ¿por qué no guardarla en una variable? Se puede, y tiene nombre propio: function expression.

Hasta ahora hemos creado funciones declarándolas con la palabra clave function. Pero existen dos formas más de crear funciones en JavaScript: la function expression y la arrow function. Hoy toca la primera.

¿Qué es una function expression?#

Una function expression es una función que se asigna a una variable. Compárala con la declaración de función que ya conoces:

// esto es una function expressionconst sum = function (a, b) {  return a + b}

// esto es una declaración de funciónfunction sum(a, b) {  return a + b}

Fíjate en un detalle: en la function expression, la function no lleva nombre. Cuando una función no tiene nombre se le llama función anónima. Eso sí, la hemos asignado a una variable que sí tiene nombre, y por eso podremos utilizarla más adelante.

Como la función está guardada en la variable sum, la llamamos usando el nombre de la variable:

sum(1, 2) // -> 3

De momento se comporta casi igual que una función declarada. Sin embargo, hay una diferencia muy importante entre ambas que debes conocer: el hoisting.

Hoisting#

Hoisting es el término que describe cómo JavaScript parece mover las declaraciones de funciones al principio del código, de forma que puedes usarlas incluso antes de declararlas. Mira el orden de estas líneas:

sum(1, 2) // -> 3function sum(a, b) {  return a + b}

Primero usamos la función y luego la declaramos. ¡Y funciona! ¿Cómo puede ser? ¿No debería darnos un error, ya que la función todavía no existe?

Lo que ocurre es que JavaScript asigna en memoria las declaraciones de funciones durante la fase de compilación, antes de ejecutar nada. Por eso, cuando el código llega a la primera línea, la función ya está ahí esperando.

Esa es la explicación técnica. Si te ayuda, piensa que es como si JavaScript moviese las declaraciones de funciones al principio del código.

¿Y qué pasa con las function expression?#

Pues que no se les aplica el hoisting. Si repetimos el mismo experimento con una function expression, el resultado es muy distinto:

sum(1, 2) // ❌ ReferenceError: Cannot access 'sum' before initializationconst sum = function (a, b) {  return a + b}

Tiene sentido si lo piensas: la función es el valor de una constante, y una constante no se puede usar antes de darle su valor. Así que con las function expression el orden sí importa: primero se crean y después se llaman.