Funciones declarativas vs Funciones de expresiones en JavaScript

Cuando desarrollamos scripts en JavaScript, prácticamente todo gira en torno a funciones. Las usamos para modularizar, reutilizar código y mantener nuestros programas organizados. Sin embargo, aunque a simple vista todas las funciones parecen iguales, no todas se comportan de la misma forma.

Durante mucho tiempo, en mi caso, usé funciones sin prestar demasiada atención a cómo estaban declaradas… hasta que empezaron a aparecer errores extraños como TypeError: undefined is not a function. Ahí fue cuando entendí que no se trata solo de sintaxis, sino de cómo el motor de JavaScript interpreta y ejecuta nuestro código.

En este artículo voy a explicarte, de forma clara y con ejemplos reales, la diferencia entre funciones declarativas y funciones de expresión en JavaScript, por qué se comportan distinto y cuándo conviene usar cada una.

¿Qué son las funciones en JavaScript y por qué existen distintas formas de declararlas?

Una función en JavaScript no es más que un bloque de código reutilizable que se ejecuta cuando lo invocamos. Hasta ahí, nada nuevo. Lo interesante es que JavaScript, al ser un lenguaje dinámico, permite definir funciones de distintas maneras, y cada una tiene implicaciones en el orden de ejecución, el ámbito y la depuración.

Las dos formas principales son:

• Funciones declarativas
• Funciones de expresión

Aunque ambas son válidas, el motor de JavaScript no las trata igual, y esa diferencia es clave para evitar errores.

Normalmente cuando desarrollamos nuestros scripts JavaScript empleamos funciones para todo y de esta forma modularizar los más posible nuestros programas; aunque la API JavaScript cuenta con otro componente muy parecido a las funciones típicas que conocemos en JavaScript llamadas funciones declarativas, este otro componente se conoce como funciones de expresión en JavaScript.

Funciones declarativas en JavaScript

Sintaxis básica de una función declarativa

La forma más conocida y “clásica” de declarar una función es esta:

function sumar(a, b) {
 return a + b;
}

Esta sintaxis es común en muchos lenguajes de programación, por eso suele ser la primera que aprendemos.

Cómo funcionan internamente las funciones declarativas

Cuando el motor de JavaScript procesa tu código, las funciones declarativas se cargan completamente al inicio del scope (global o de función).

Eso significa que puedes hacer esto sin problemas:

console.log(sumar(2, 3));
function sumar(a, b) {
 return a + b;
}

Y el resultado será:

5

En la práctica, el motor interpreta el código como si la función estuviera definida antes de ejecutarse cualquier otra línea.

Por qué puedes llamar una función declarativa antes de definirla (hoisting)

Este comportamiento se debe al hoisting. En términos sencillos, el motor “mueve” las declaraciones de funciones al inicio del contexto de ejecución.

En otras palabras:

la función existe desde el primer momento, aunque en el código la escribas más abajo.

Este detalle marca una diferencia enorme frente a las expresiones de función.

Las funciones de expresiones en JavaScript

Seguramente lo habrás notado en otros Blogs o foros de ayuda al buscar cualquier tutorial o ayuda de como usar algún componente de JavaScript la siguiente forma de declarar una función:

var sumar = function (a,b) {return a+b;}

Y esta otra la cual es la más conocida y usada (en parte debe ser debido a que es la sintaxis básica usada en cualquier lenguaje de programación) llamadas funciones declarativas:

function sumar (a,b) {return a+b;}

Ambas declaraciones de funciones que obviamente sintácticamente no son iguales hace que el compilador de JavaScript lo trate de manera distinta; hagamos unas pruebas más sus resultados:

console.log(suma(2,3));
var sumar = function (a,b) {return a+b;}

Da como resultado:

TypeError: undefined is not a function

Y esta otra más conocida:

console.log(suma(2,3));
function sumar(a,b) {return a+b;}

Da como resultado:

5

En resumen, una función de expresión consiste en asignar una función a una variable:

var sumar = function (a, b) {
 return a + b;
};

También puede escribirse con const o let, o usando funciones flecha:

const sumar = (a, b) => a + b;

Aquí la función pasa a comportarse como cualquier otro valor en JavaScript.

Funciones anónimas, con nombre y funciones flecha

Las expresiones de función pueden ser:

• Anónimas (las más comunes)
• Con nombre (útiles para depuración)
• Funciones flecha, que son expresiones por definición

Por ejemplo:

const saludar = function saludar(nombre) {
 console.log("Hola " + nombre);
};

El nombre interno ayuda a identificar la función en la traza de errores, algo que he agradecido más de una vez al depurar código complejo.

Por qué las expresiones de función no se pueden usar antes de definirse

Aquí aparece uno de los errores más comunes.

console.log(sumar(2, 3));
var sumar = function (a, b) {
 return a + b;
};

Resultado:

TypeError: undefined is not a function

Este error lo he visto (y cometido) muchas veces. El motivo es que solo se hoistea la variable, no la función asignada a ella. En el momento de la llamada, sumar existe… pero vale undefined.

Hoisting en JavaScript explicado de forma clara (con ejemplos reales)

Qué hace realmente el motor de JavaScript al ejecutar tu código

El motor de JavaScript ejecuta el código en dos fases:

1. Fase de creación: declara variables y funciones
2. Fase de ejecución: asigna valores y ejecuta instrucciones

Las funciones declarativas se registran completas en la primera fase.

Las expresiones de función no.

¿Cual es la diferencia entre las dos secciones de código anteriores?

Ambas formas que vimos anteriormente son declaraciones válidas de una función en JavaScript pero con un formato diferente y por ende con un comportamiento diferente:

Entonces podemos referencia una función mediante una variable o empleando directamente el nombre de la función; lo interesante no es su sintaxis que difiere de una a otra si no cómo lo interpreta el compilador de JavaScript lo cual intentaré explicar mediante la siguiente sección de código:

console.log(suma(2,3));
function sumar(a,b) {return a+b;}

La pasada expresión de la función llamada "suma" el compilador de JavaScript lo convierte en:

function sumar(a,b) {return a+b;}
console.log(suma(2,3));

Es decir; el compilador coloca las definiciones de las funciones y ubica la función al principio del código; en otras palabras, el compilador de JavaScript convierte la declaración vista anteriormente en un ámbito global a todo el programa al contrario que solo corresponde a una sección definida del programa.

Por qué aparece el error “TypeError: undefined is not a function”

Este error suele indicar exactamente eso:

estás intentando ejecutar algo que aún no es una función, aunque la variable exista.

Entender este punto ahorra horas de frustración.

Funciones declarativas vs funciones de expresión: diferencias clave

Disponibilidad y orden de ejecución

• Declarativas: disponibles desde el inicio del scope
• Expresiones: disponibles solo después de su definición

Sintaxis y legibilidad del código

Las declarativas suelen ser más explícitas y fáciles de seguir en archivos grandes. Las expresiones, en cambio, brillan cuando se usan como valores.

Depuración, stack trace y mantenimiento

Las funciones con nombre aparecen mejor en la pila de llamadas. En proyectos grandes, esto marca una diferencia real al depurar errores.

¿Cuándo usar funciones declarativas y cuándo usar expresiones?

Casos ideales para funciones declarativas

• Funciones principales del sistema
  • Lógica reutilizable.
  • Código que debe estar disponible siempre.
  • Personalmente, las uso como base estructural del proyecto.
• Casos donde una expresión de función es la mejor opción
  • Callbacks.
  • Funciones condicionales.
  • Funciones pasadas como argumento

Callbacks, funciones condicionales e IIFE

Las expresiones permiten patrones avanzados como las IIFE o funciones que solo existen bajo ciertas condiciones, algo imposible con declaraciones clásicas.

Errores comunes al trabajar con funciones en JavaScript

• Llamar funciones antes de tiempo
  • Confundir funciones flecha con declaraciones
• Malentender el hoisting con var, let y const
  • La mayoría de estos errores no son de sintaxis, sino de modelo mental.

Preguntas frecuentes sobre funciones declarativas y expresiones en JavaScript

• ¿Las funciones flecha tienen hoisting?
  • No. Son expresiones y siguen las mismas reglas.
• ¿Qué tipo de función es mejor?
  • Depende del contexto. No hay una única respuesta correcta.

Conclusión: qué tipo de función deberías usar en tu código JavaScript

La diferencia entre funciones declarativas y expresiones en JavaScript no es solo cómo se escriben, sino cómo y cuándo existen en memoria.

Desde mi experiencia, entender esto cambia por completo la forma de escribir y depurar código. Usa declaraciones para estructura y expresiones para flexibilidad, y evitarás muchos errores clásicos.