¿Cómo funcionan las funciones de JavaScript?

Las funciones de JavaScript son un aspecto fundamental del lenguaje y permiten a los desarrolladores escribir código modular, reutilizable y organizado. Comprender cómo funcionan las funciones de JavaScript es esencial tanto para programadores novatos como experimentados.

¿Necesita un repaso? Veamos cómo explican las funciones de JavaScript en MDM Web Docs “Una función en JavaScript es similar a un procedimiento: un conjunto de declaraciones que realiza una tarea o calcula un valor, pero para que un procedimiento califique como una función, debe tomar alguna entrada y devolver una salida donde exista alguna relación obvia entre las entrada y la salida. Para utilizar una función, debe definirla en algún lugar del ámbito desde el que desea llamarla”.

Este artículo explora los conceptos, tipos y mecanismos centrales detrás de las funciones de JavaScript.

¿Qué es una función de JavaScript?

Explicando con más detalle, una función en JavaScript es un bloque de código diseñado para realizar una tarea particular. Las funciones se ejecutan cuando se invocan (llaman). Las funciones de JavaScript son ciudadanas de primera clase, lo que significa que pueden tratarse como cualquier otra variable, pasarse como argumentos a otras funciones y devolverse desde otras funciones.

Definiendo una función

Hay varias formas de definir funciones en JavaScript:

Declaración de función:

function greet(name) { 
return `Hello, ${name}!`; 
}

Expresión de función:

const greet = function(name) {
   return `Hello, ${name}!`;
};

Función de flecha (ES6+):

const greet = (name) => `Hello, ${name}!`;

Función anónima

setTimeout(function() {
   console.log('This runs after 1 second');
}, 1000);

Invocar funciones

Para ejecutar una función, es necesario invocarla. Esto se hace agregando paréntesis al nombre de la función y, opcionalmente, pasando argumentos:

greet('Alice'); // Outputs: Hello, Alice!

Parámetros y argumentos

Las funciones pueden tomar parámetros, que se especifican cuando se define la función, y argumentos, que son los valores reales que se pasan a la función cuando se invoca.

function sum(a, b) {
   return a + b;
}
sum(2, 3); // Outputs: 5

Valores de retorno

Las funciones pueden devolver valores utilizando la declaración de devolución. Si no se utiliza ninguna declaración de devolución, la función devuelve indefinido de forma predeterminada.

function multiply(a, b) {
   return a * b;
}
let result = multiply(4, 5); // result is 20

Alcance y cierres

El alcance determina la accesibilidad de las variables. JavaScript tiene alcance de función, lo que significa que las variables declaradas dentro de una función no son accesibles fuera de ella.

function example() {
   let x = 10;
   console.log(x); // 10
}
console.log(x); // ReferenceError: x is not defined

Los cierres ocurren cuando una función retiene el acceso a su alcance léxico, incluso cuando la función se ejecuta fuera de ese alcance.

function outerFunction() {
   let outerVariable = 'I am outside!';
   
   function innerFunction() {
       console.log(outerVariable);
   }
   
   return innerFunction;
}
const inner = outerFunction();
inner(); // Outputs: I am outside!

Funciones de orden superior

Las funciones que toman otras funciones como argumentos o las devuelven como salida se denominan funciones de orden superior. Esta es una característica poderosa de JavaScript que permite paradigmas de programación funcionales.

function higherOrderFunction(callback) {
   callback();
}
function sayHello() {
   console.log('Hello!');
}
higherOrderFunction(sayHello); // Outputs: Hello!

Expresiones de funciones invocadas inmediatamente (IIFE)

Un IIFE es una función que se ejecuta inmediatamente después de su definición. Este patrón se utiliza a menudo para crear un nuevo ámbito y evitar contaminar el espacio de nombres global.

(function() {
   console.log('This function runs immediately!');
})();

Funciones asincrónicas

Con la llegada de ES6, JavaScript introdujo promesas y async/await para manejar operaciones asincrónicas con mayor elegancia.

Usando promesas:

function fetchData() {
   return new Promise((resolve, reject) => {
       setTimeout(() => {
           resolve('Data fetched');
       }, 2000);
   });
}
fetchData().then(data => console.log(data)); // Outputs: Data fetched after 2 seconds

Usando asíncrono/espera:

async function fetchData() {
   const data = await new Promise((resolve) => {
       setTimeout(() => {
           resolve('Data fetched');
       }, 2000);
   });
   console.log(data);
}
fetchData(); // Outputs: Data fetched after 2 seconds

Las funciones de JavaScript son versátiles y potentes y proporcionan los componentes básicos para crear aplicaciones complejas. Al dominar las funciones, los desarrolladores pueden escribir código limpio, fácil de mantener y eficiente. 

Ya sea que se trate de utilidades simples u operaciones asincrónicas complejas, comprender cómo funcionan las funciones es clave para aprovechar todo el potencial de JavaScript.

Te recomendamos en video