Funciones en JavaScript: Definición, Invocación y Conceptos Clave

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 call o apply, 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.

Etiquetas: JavaScript funciones closures Scope Hoisting

Publicado el 6-17 01:45