Funciones

Funciones Fundamental

Tip

Las funciones son bloques de código reutilizables que nos permiten organizar y estructurar nuestro código.

Declaración y expresión Básico

Declaración de función

// Declaración de función
function saludar(nombre) {
  return "Hola " + nombre;
}

// Llamada a la función
saludar("María"); // "Hola María"

Expresión de función

// Expresión de función
const saludar = function(nombre) {
  return "Hola " + nombre;
};

// Función anónima
const suma = function(a, b) { return a + b; };

Funciones flecha Moderno

Tip

Las funciones flecha proporcionan una sintaxis más concisa y manejan el this de manera diferente.

// Función flecha básica
const sumar = (a, b) => a + b;

// Con bloque de código
const saludar = nombre => {
  const mensaje = "Hola " + nombre;
  return mensaje;
};

// Sin parámetros
const saludo = () => "Hola Mundo";

// Un solo parámetro
const cuadrado = x => x * x;

Parámetros por defecto y rest Avanzado

Parámetros por defecto

function saludar(nombre = "Usuario") {
  return "Hola " + nombre;
}

saludar(); // "Hola Usuario"
saludar("María"); // "Hola María"

Parámetros rest

function sumar(...numeros) {
  return numeros.reduce((total, num) => total + num, 0);
}

sumar(1, 2, 3, 4); // 10

Parámetros opcionales

function configurar(opciones) {
  // Si opciones es undefined o null, se usa un objeto vacío
  const config = opciones ?? {};

  // Acceso seguro a propiedades que podrían no existir
  const puerto = config?.puerto ?? 8080;
  const host = config?.host ?? 'localhost';

  return { puerto, host };
}

// Ejemplos de uso
console.log(configurar()); // { puerto: 8080, host: 'localhost' }
console.log(configurar({ puerto: 3000 })); // { puerto: 3000, host: 'localhost' }
console.log(configurar({ host: '127.0.0.1' })); // { puerto: 8080, host: '127.0.0.1' }

Closures Avanzado

Caution

Los closures son un concepto avanzado pero muy poderoso en JavaScript.

function crearContador() {
  let contador = 0;
  return {
      incrementar: () => ++contador,
      obtenerValor: () => contador
  };
}

const contador = crearContador();
contador.incrementar(); // 1
contador.incrementar(); // 2
contador.obtenerValor(); // 2

IIFE (Immediately Invoked Function Expression) Avanzado

Tip

Las IIFE son útiles para crear un scope aislado y ejecutar código inmediatamente.

(function() {
  const mensaje = "Este código se ejecuta inmediatamente";
  console.log(mensaje);
})();

// Versión con arrow function
(() => {
  const config = {
      api: "https://api.ejemplo.com",
      version: "1.0"
  };
  // Hacer algo con la configuración
})();

Mejores prácticas Recomendado

Nombres descriptivos

// ❌ Malo
function fn(x, y) {
  return x + y;
}

// ✅ Bueno
function sumarNumeros(numero1, numero2) {
  return numero1 + numero2;
}

Una función, una tarea

// ❌ Malo
function procesarUsuario(usuario) {
  validarDatos(usuario);
  guardarEnDB(usuario);
  enviarEmail(usuario);
}

// ✅ Bueno
function validarUsuario(usuario) {
  return usuario.nombre && usuario.email;
}

function guardarUsuario(usuario) {
  return db.usuarios.save(usuario);
}

function notificarUsuario(usuario) {
  return enviarEmail(usuario.email, 'Bienvenido');
}

Argumentos claros

// ❌ Malo
function configurar(x, y, z) {
  // ¿Qué significan x, y, z?
}

// ✅ Bueno
function configurarAplicacion({
  puerto = 8080,
  entorno = 'desarrollo',
  debug = false
} = {}) {
  // Configuración con parámetros nombrados
}

Evitar efectos secundarios

// ❌ Malo
let total = 0;
function sumar(numero) {
  total += numero; // Modifica variable externa
}

// ✅ Bueno
function sumar(total, numero) {
  return total + numero; // Sin efectos secundarios
}

Manejo de errores

function dividir(a, b) {
  if (b === 0) {
      throw new Error("No se puede dividir por cero");
  }
  return a / b;
}