Declaración de funciones

Las funciones son bloques de código reutilizables que permiten encapsular lógica en un programa. Entender cómo declarar funciones, pasar parámetros y gestionar el ámbito de las variables es esencial en cualquier lenguaje de programación.

Existen varias formas de declarar funciones en JavaScript, cada una con sus propias características y usos. A continuación se describen las más comunes.

Funciones declarativas

Las funciones declarativas son aquellas que se definen utilizando la palabra clave function seguida de un nombre. Estas funciones son hoisted, es decir, pueden ser invocadas antes de su declaración en el código.

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

console.log(suma(2, 3)); // 5

Funciones expresivas

Las funciones expresivas son aquellas que se asignan a una variable o constante. Estas funciones no se elevan (no son hoisted), por lo que deben declararse antes de ser utilizadas.

const resta = function (a, b) {
  return a - b;
};

console.log(resta(5, 2)); // 3

Funciones anónimas

Las funciones anónimas son aquellas que no tienen un nombre y se utilizan a menudo como argumentos para otras funciones o en contextos como callbacks.

setTimeout(function () {
  console.log("Esto se ejecuta después de 1 segundo");
}, 1000);

Funciones arrow

Las funciones arrow son una forma concisa de escribir funciones introducidas en ECMAScript 6 (ES6). Utilizan la sintaxis () => {} en lugar de la palabra clave function. Además de simplificar la escritura del código, tienen una característica clave que las distingue de las funciones tradicionales: no tienen su propio contexto de this. Esto significa que, cuando se utiliza this dentro de una función arrow, este hace referencia al contexto léxico donde la función fue definida, en lugar de crear un nuevo contexto. Esto es útil cuando se trabaja con funciones que manejan eventos o promesas, ya que evita la necesidad de usar métodos como .bind() para preservar el valor de this.

const persona = {
  nombre: "Ana",
  saludar: function() {
    setTimeout(() => {
      console.log(`Hola, ${this.nombre}`);
    }, 1000);
  }
};

persona.saludar(); // Hola, Ana

En este ejemplo, el uso de una función arrow dentro de setTimeout permite que this.nombre se refiera correctamente a la propiedad nombre del objeto persona, algo que no sucedería con una función tradicional debido al cambio de contexto en setTimeout.