Funciones

Aprende a declarar y usar funciones en JavaScript: declarativas, expresiones, arrow functions, parámetros, valores por defecto y ámbito.

Las funciones son bloques de código reutilizables con un nombre. En vez de repetir la misma lógica diez veces, la encapsulas en una función y la llamas cuando la necesitas. Son la unidad básica de organización en JavaScript.


Declaración de función

La forma clásica. El nombre de la función describe qué hace:

function saludar(nombre) {
  return `Hola, ${nombre}!`;
}

const resultado = saludar('Ana'); // 'Hola, Ana!'

Las funciones declaradas con function se elevan (hoisting): puedes llamarlas antes de declararlas en el código.

// Esto funciona:
const x = duplicar(5); // 10

function duplicar(n) {
  return n * 2;
}

Expresión de función

La función se asigna a una variable. No se eleva — debes declararla antes de usarla:

const saludar = function(nombre) {
  return `Hola, ${nombre}!`;
};

saludar('Luis'); // 'Hola, Luis!'

Arrow functions (funciones flecha)

La sintaxis moderna y más concisa. Es la forma más usada en JavaScript actual:

const saludar = (nombre) => {
  return `Hola, ${nombre}!`;
};

Si el cuerpo es una sola expresión, puedes omitir las llaves y el return:

const saludar = (nombre) => `Hola, ${nombre}!`;
const duplicar = (n) => n * 2;
const sumar = (a, b) => a + b;

// Con un solo parámetro, los paréntesis son opcionales:
const doble = n => n * 2;

Parámetros y argumentos

Los parámetros son los nombres en la declaración. Los argumentos son los valores que pasas al llamarla:

function sumar(a, b) {  // a y b son parámetros
  return a + b;
}

sumar(3, 4); // 3 y 4 son argumentos

Valores por defecto

Si no se pasa un argumento, usa el valor por defecto:

function saludar(nombre = 'Invitado', hora = 'día') {
  return `Buenos ${hora}, ${nombre}!`;
}

saludar();              // 'Buenos día, Invitado!'
saludar('Ana');         // 'Buenos día, Ana!'
saludar('Luis', 'tardes'); // 'Buenos tardes, Luis!'

Rest parameters — número variable de argumentos

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

sumarTodo(1, 2, 3);       // 6
sumarTodo(1, 2, 3, 4, 5); // 15

Return

Las funciones devuelven undefined si no tienen return. El return sale de la función inmediatamente:

function esPar(n) {
  if (n % 2 === 0) return true;
  return false;
  console.log('esto nunca se ejecuta'); // código muerto
}

// Simplificado:
const esPar = n => n % 2 === 0;

Ámbito (scope)

Las variables declaradas dentro de una función son locales — no existen fuera:

function calcular() {
  const resultado = 42;
  return resultado;
}

console.log(resultado); // ReferenceError: resultado no está definida

Las funciones sí pueden acceder a variables del ámbito exterior:

const multiplicador = 3;

function triplicar(n) {
  return n * multiplicador; // accede a la variable exterior
}

triplicar(5); // 15

Funciones como valores (primera clase)

En JavaScript, las funciones son ciudadanos de primera clase: se pueden asignar a variables, pasar como argumentos y devolver desde otras funciones.

Funciones como argumentos (callbacks)

function ejecutar(fn) {
  fn(); // ejecuta la función que recibe
}

ejecutar(() => console.log('¡Hola desde un callback!'));
const numeros = [3, 1, 4, 1, 5, 9];

const ordenados = numeros.sort((a, b) => a - b);
// [1, 1, 3, 4, 5, 9]

Funciones que devuelven funciones

function crearMultiplicador(factor) {
  return (numero) => numero * factor;
}

const triple  = crearMultiplicador(3);
const cuadruple = crearMultiplicador(4);

triple(5);    // 15
cuadruple(5); // 20

Cuándo usar cada tipo

SituaciónTipo de función
Función nombrada reutilizableDeclaración function
Callback o función anónimaArrow function
Método de objetoDeclaración o expresión (no arrow, por el this)
Función que devuelve funciónArrow function

En la siguiente lección vemos los arrays: la estructura de datos más usada en JavaScript, con todos sus métodos esenciales.