Funciones de JavaScript

Introducción a las funciones de JavaScript

Una función es un bloque de código reutilizable que realiza una tarea específica. En lugar de repetir las mismas instrucciones en todos lados, las escribes una vez, les das un nombre y las ejecutas cuando las necesitas llamando a la función. Las funciones son uno de los elementos fundamentales de JavaScript: permiten organizar el código, evitar duplicaciones y construir programas complejos a partir de piezas pequeñas y comprobables.

Este capítulo cubre cómo definir funciones, cómo pasarles datos mediante parámetros, cómo obtener datos de vuelta con return, y las tres formas principales que verás en código real: declaraciones de función, expresiones de función y arrow functions. También explica el hoisting y el scope, dos comportamientos que suelen sorprender a los principiantes.

Definir una función

Sintaxis básica de una función

Una declaración de función utiliza la palabra clave function, seguida de un nombre, una lista de parámetros separados por comas entre paréntesis y un cuerpo de instrucciones entre llaves. El cuerpo se ejecuta solo cuando la función es llamada, es decir, cuando se escribe el nombre de la función seguido de paréntesis.

function greet() {
    console.log("Hello, World!");
}

greet(); // call the function → Outputs: Hello, World!

Definir una función no hace nada por sí solo; no se imprime nada hasta que se ejecuta greet().

Hoisting de funciones

Las declaraciones de función son objeto de hoisting: el motor las registra antes de que se ejecute ningún código, por lo que puedes llamar a una declaración incluso en una línea anterior a donde está escrita.

Esto no se aplica a las expresiones de función ni a las arrow functions (tratadas más adelante): estas solo están disponibles después de que se ejecuta la línea que las asigna. Llamarlas antes lanza un ReferenceError o TypeError. Si quieres saber más sobre por qué ocurre esto, consulta variable scope.

Parámetros y argumentos de funciones

Un parámetro es un nombre que figura en la definición de la función; un argumento es el valor real que pasas al llamarla. Dentro del cuerpo, los parámetros se comportan como variables locales.

Pasar parámetros

Si llamas a una función con menos argumentos que parámetros, los que faltan serán undefined en lugar de producir un error:

Parámetros predeterminados

Para evitar undefined, ES6 permite asignar un valor predeterminado a un parámetro, que se usa solo cuando no se pasa ningún argumento (o se pasa undefined).

Parámetros rest

Un parámetro rest (escrito ...name) recoge cualquier número de argumentos restantes en un array real, de modo que una función puede aceptar una cantidad variable de entradas. Debe ser el último parámetro.

Los parámetros rest comparten la sintaxis con el operador spread, pero realizan la tarea opuesta. Consulta rest parameters and spread syntax para obtener una visión completa.

La sentencia return

Una función puede devolver un valor a quien la llamó con return. El valor devuelto puede almacenarse en una variable o usarse directamente en una expresión.

return también detiene la función de inmediato: cualquier código después de ella se omite. Una función sin return (o con un return; vacío) devuelve undefined.

Funciones anónimas y expresiones de función

Expresiones de función

Una expresión de función almacena una función en una variable. A diferencia de una declaración, la función se crea cuando la ejecución alcanza esa línea, por lo que no está sujeta a hoisting: solo puedes llamarla después.

Funciones anónimas

La función anterior no tenía nombre: eso es una función anónima. Son habituales como argumentos de otras funciones, por ejemplo, callbacks pasados a métodos de array como forEach o a setTimeout. (Consulta introduction to callbacks.)

Arrow functions en ES6

Sintaxis de las arrow functions

ES6 introdujo las arrow functions, una sintaxis concisa para las expresiones de función. Cuando el cuerpo es una sola expresión, puedes omitir las llaves y la palabra clave return: el valor de la expresión se devuelve automáticamente.

Las arrow functions no tienen su propio this

Las arrow functions no vinculan su propio this; lo heredan del scope circundante. Esto las hace ideales como callbacks dentro de métodos de objeto, donde una función normal perdería el this del objeto.

Para obtener más información sobre cómo se resuelve this dentro de los métodos, lee object methods, this.

Elegir la forma adecuada

• Declaración de función (function foo() {}) — sujeta a hoisting, ideal para utilidades con nombre de nivel superior que pueden llamarse desde cualquier lugar.
• Expresión de función (const foo = function() {}) — se crea en el lugar donde aparece; útil cuando quieres asignar o pasar una función de forma condicional.
• Arrow function (const foo = () => {}) — sintaxis más corta, sin this propio; preferida para callbacks breves.

Las funciones también son la base de patrones más avanzados como las closures y la recursión.

Conclusión

Las funciones te permiten encapsular lógica una vez y reutilizarla en cualquier lugar. Has visto cómo definirlas, pasar argumentos (incluidos valores predeterminados y parámetros rest), devolver resultados y las diferencias entre declaraciones, expresiones y arrow functions, junto con los comportamientos de hoisting y this que las distinguen. Dominar estas formas es un paso fundamental hacia la escritura de JavaScript limpio y mantenible.

Práctica