Tema 9 · Control de Flujo

Funciones y Funciones Flecha (Arrow)

Aprende a estructurar código modular y reutilizable: declaración de funciones, parámetros con valores por defecto y funciones flecha modernas (() => {}).

Bucles: for, while y do...while Alcance (Scope) y Hoisting

¿Qué es una Función?

Una función es un bloque de instrucciones reutilizable diseñado para realizar una tarea específica. Recibe entradas (denominadas parámetros), procesa una lógica interna y opcionalmente devuelve un resultado mediante la instrucción return.

Evolución de Sintaxis: Clásica vs Funciones Flecha

Tipo Sintaxis Características
Declaración Tradicional function sumar(a, b) { return a + b; } Tiene su propio contexto de this y cuenta con elevación (hoisting completo).
Función Flecha (Arrow Function) const sumar = (a, b) => a + b; Sintaxis más limpia y concisa. Si tiene una sola expresión, el return y las llaves {} son implícitos. Hereda el this léxico de su entorno exterior.

Parámetros por Defecto (Default Parameters)

En ES6 puedes asignar valores predeterminados directamente en la lista de parámetros. Si el llamador no envía ese argumento, se utilizará el valor por defecto: 

const saludar = (nombre = "Estudiante") => `¡Hola, ${nombre}!`;

console.log(saludar());         // "¡Hola, Estudiante!"
console.log(saludar("Carlos")); // "¡Hola, Carlos!"

⚡ Comparación de Funciones en Acción

Prueba una calculadora de descuentos programada con funciones flecha de retorno implícito:

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Funciones Flecha en JS</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; background: #f8fafc; }
    .card-fn { max-width: 480px; background: white; border: 1px solid #cbd5e1; border-radius: 8px; padding: 22px; }
    input { width: 100%; box-sizing: border-box; padding: 8px 10px; margin: 6px 0 12px 0; border: 1px solid #cbd5e1; border-radius: 6px; }
    .total-box { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; padding: 14px; border-radius: 6px; font-weight: bold; font-size: 1.1rem; }
  </style>
</head>
<body>

  <div class="card-fn">
    <h3 style="margin-top: 0; color: #0f172a;">Calculadora con Arrow Functions</h3>

    <label for="precio">Precio Original ($ USD):</label>
    <input type="number" id="precio" value="100">

    <label for="descuento">Porcentaje de Descuento (%):</label>
    <input type="number" id="descuento" value="20">

    <button onclick="calcular()" style="background: #0284c7; color: white; border: none; padding: 9px 16px; border-radius: 6px; cursor: pointer; font-weight: bold; width: 100%;">
      Calcular con Función Flecha
    </button>

    <div id="resultado-calculo" style="margin-top: 15px;"></div>

    <script>
      // Función Flecha concisa con retorno implícito:
      const calcularPrecioFinal = (precio, descPorcentaje = 0) => 
        precio - (precio * (descPorcentaje / 100));

      function calcular() {
        const precio = Number(document.getElementById('precio').value);
        const desc = Number(document.getElementById('descuento').value);

        const total = calcularPrecioFinal(precio, desc);

        document.getElementById('resultado-calculo').innerHTML = `
          <div class="total-box">
            Precio Final a Pagar: $${total.toFixed(2)} USD
          </div>
        `;
      }

      calcular();
    </script>
  </div>

</body>
</html>
Pruébalo tú mismo » Se abre en una nueva pestaña con ejecución en vivo
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Manual Completo de JavaScript ES6+ y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

📖 Cuaderno Full-Stack Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.