Las funciones encapsulan bloques de código para ejecutarlos bajo demanda. En JavaScript, una función es un objeto que puede definirse de múltiples maneras.
Definición de Funciones
Declaración de Función
Se utiliza la palabra clave function seguida de un nombre y parámetros opcionales:
function nombreFuncion(parametro1, parametro2) {
// Cuerpo de la función
}
El nombre debe seguir las reglas de identificadores de JavaScript (letras, dígitos, guiones bajos, signos de dólar, sin empezar con dígitos). Los paréntesis son obligatorios, incluso si no hay parámetros.
Expresión de Función
Una función anónima se asigna a una variable:
const miFuncion = function(x, y) {
return x + y;
};
Aquí, miFuncion es la variable que almacena la función, no su nombre.
Constructor Function
Las funciones pueden crearse con new Function, aunque es menos común:
const calcular = new Function('a', 'b', 'return a * b');
Todos los argumentos, incluidos los parámetros y el cuerpo, deben ser cadenas de texto. Todas las funciones son instancias del objeto Function y, por lo tanto, son objetos.
Invocación de Funciones
Invocación Básica
miFuncion();
miFuncion.call();
Como Método de un Objeto
const usuario = {
nombre: 'Ana',
saludar: function() {
console.log('¡Hola, ' + this.nombre + '!');
}
};
usuario.saludar();
Función de Invocación Inmediata (IIFE)
(function() {
console.log('Ejecutada inmediatamente');
})();
Invocación con Constructor
function Vehiculo(tipo) {
this.tipo = tipo;
}
const auto = new Vehiculo('coche');
Asignación a Eventos
document.getElementById('boton').addEventListener('click', function() {
alert('¡Clic detectado!');
});
Funciones Temporizadoras
let contador = 0;
setInterval(() => {
contador++;
console.log(contador);
}, 1000);
Parámetros de Funciones
Los parámetros son valores placeholder definidos durante la declaración; los argumentos son los valores reales pasados al invocar.
function multiplicar(factor1, factor2) {
return factor1 * factor2;
}
const resultado = multiplicar(5, 3); // 15
Si se pasan más argumentos que parámetros, los extras se ignoran. Si faltan argumentos, los parámetros restantes son undefined, lo que puede llevar a resultados inesperados en operaciones.
Valor de Retorno
La palabra clave return devuelve un valor y detiene la ejecución de la función. Si no se incluye return, la función devuelve undefined.
function obtenerArea(ancho, alto) {
return ancho * alto;
}
const area = obtenerArea(4, 6); // 24
Parámetros Ocultos
Cada función tiene acceso implícito a this y arguments.
Objeto arguments
Es un objeto similar a un array que contiene todos los argumentos pasados. No es un array real, pero permite iteración y acceso por índice.
function sumarTodos() {
let total = 0;
for (let i = 0; i < arguments.length; i++) {
total += arguments[i];
}
return total;
}
sumarTodos(1, 2, 3); // 6
Contexto this
El valor de this depende de cómo se invoque la función:
- En invocaciones directas, apunta al objeto global (window en navegadores).
- Como método de un objeto, apunta a ese objeto.
- Con
new, apunta a la instancia creada. - En eventos, apunta al elemento que dispara el evento.
- Con
calloapply, se puede establecer explícitamente.
Ámbito (Scope)
El ámbito determina la visibilidad de variables. Existen el ámbito global y los ámbitos locales (por función o bloque en ES6).
Ámbito Global
Las variables declaradas globalmente son propiedades del objeto window en navegadores. Las funciones declaradas globalmente son métodos de window.
Ámbito Local
Las variables declaradas dentro de una función son locales y solo accesibles dentro de ella.
let globalVar = 'Soy global';
function prueba() {
let localVar = 'Soy local';
console.log(globalVar); // Accesible
}
console.log(localVar); // Error: no definida
Elevación (Hoisting)
Las declaraciones de variables con var y las declaraciones de funciones se elevan al inicio de su ámbito, pero no su asignación.
console.log(x); // undefined
var x = 10;
mostrar(); // Funciona por elevación
function mostrar() {
console.log('Elevada');
}
Las expresiones de funciones no se elevan, ya que solo se eleva la variable, no la asignación de la función.
Closures
Un closure ocurre cuando una función interna accede a variables de una función externa, incluso después de que la función externa haya finalizado.
function crearSaludo(mensaje) {
return function(nombre) {
console.log(mensaje + ', ' + nombre + '!');
};
}
const saludarHola = crearSaludo('Hola');
saludarHola('María'); // "Hola, María!"
Los closures prolongan el ciclo de vida de variables locales y permiten el encapsulamiento de datos.