Funciones

3.1 Declaración de funciones

Las funciones son uno de los bloques fundamentales en JavaScript. Te permiten organizar el código, reutilizar la lógica y crear estructuras más complejas. Veamos tres formas principales de declarar y usar funciones: declaración de funciones, expresiones de funciones y funciones flecha.

Declaración de función — es una manera de crear una función con nombre que se puede llamar más tarde. Estas funciones se «elevan» (hoisted) al inicio de su ámbito, lo que permite llamarlas antes de su declaración en el código.

Sintaxis:

    
      function name (arguments) {
        // cuerpo de la función
      }
    
  

Ejemplo de uso:

    
      // Declaración de función
      function greet(name) {
        return `Hello, ${name}!`;
      }

      // Llamada a la función
      console.log(greet('Alice')); // Mostrará: Hello, Alice!
    
  

3.2 Expresiones de funciones

Las expresiones de funciones crean funciones anónimas (sin nombre) y pueden asignarse a una variable. Estas funciones no se «elevan», por lo que solo pueden llamarse después de su declaración.

Sintaxis:

    
      const name = function (arguments) {
        // cuerpo de la función
      }
    
  

Ejemplo de uso:

    
      // Expresión de función

      const greet = function(name) {
        return `Hello, ${name}!`;
      };

      // Llamada a la función
      console.log(greet('Bob')); // Mostrará: Hello, Bob!
    
  

3.3 Funciones flecha

Funciones flecha (arrow functions) — es una forma concisa de declarar funciones que también mantiene el contexto this del ámbito padre. Las funciones flecha no tienen su propio this, por lo que son especialmente útiles en manejadores de eventos y métodos de arreglos.

Sintaxis:

    
      const name = (arguments) => {
        // cuerpo de la función
      }
    
  

Si la función toma un solo parámetro, se pueden omitir los paréntesis. Si la función devuelve una sola expresión, se pueden omitir las llaves y la palabra clave return.

Ejemplo 1: Forma completa

    
      // Función flecha

      const greet = (name) => {
        return `Hello, ${name}!`;
      };

      // Llamada a la función
      console.log(greet('Charlie')); // Mostrará: Hello, Charlie!
    
  

Ejemplo 2: Forma abreviada

    
      // Función flecha con un parámetro y una expresión
      const greet = name => `Hello, ${name}!`;

      // Llamada a la función
      console.log(greet('Dana')); // Mostrará: Hello, Dana!
    
  

3.4 Comparación de formas de declarar funciones

Elevación (hoisting):

• Declaración de funciones: las funciones se elevan, lo que permite llamarlas antes de la declaración
• Expresiones de funciones y Funciones flecha: no se elevan, solo se pueden llamar después de la declaración

Contexto this:

• Declaración de funciones y Expresiones de funciones: tienen su propio contexto this
• Funciones flecha: no tienen su propio this, el contexto se hereda del ámbito padre

Facilidad de escritura:

• Funciones flecha: son más concisas y a menudo se utilizan para funciones cortas y callbacks