Fundamentos de funciones

Las funciones en JavaScript son bloques de código reutilizables que realizan una tarea específica. Permiten organizar el código, mejorar su legibilidad y facilitar su mantenimiento. Una función se puede definir una vez y utilizar múltiples veces a lo largo del programa.

Para declarar una función, se utiliza la palabra clave function seguida del nombre de la función y paréntesis. A continuación, se incluyen las llaves {} que delimitan el bloque de código que conforma la función. Por ejemplo:

function greet() {
    console.log('Hello, world!');
}

En este ejemplo, hemos creado una función llamada greet que muestra en la consola el mensaje 'Hello, world!'. La llamada a la función se realiza escribiendo su nombre seguido de paréntesis:

greet(); // Output: Hello, world!

Además de las declaraciones de funciones, JavaScript permite crear expresiones de funciones. Una expresión de función es una función anónima asignada a una variable. Por ejemplo:

const multiply = function(a, b) {
    return a * b;
};

Aquí, hemos asignado una función anónima a la constante multiply. Esta función toma dos parámetros a y b, y devuelve su producto. La función se puede llamar utilizando la variable:

const result = multiply(3, 4); // result = 12

Con la introducción de ES6, se añadieron las funciones de expresión nombradas y las funciones anónimas. Estas permiten crear funciones sin nombre o con un nombre asignado dentro de una expresión. Por ejemplo:

const factorial = function fact(n) {
    if (n <= 1) return 1;
    else return n * fact(n - 1);
};

En este caso, la función fact se utiliza internamente para calcular el factorial, pero externamente se llama a través de la variable factorial.

Es importante destacar que las funciones en JavaScript son ciudadanos de primera clase, lo que significa que pueden ser tratadas como cualquier otra variable. Pueden ser asignadas a variables, pasadas como argumentos a otras funciones y retornadas desde funciones. Este concepto es fundamental en la programación funcional y permite técnicas avanzadas como funciones de orden superior.

Las funciones también pueden ser definidas utilizando la sintaxis de función flecha, que proporciona una forma más concisa de escribir funciones. Sin embargo, esta sintaxis se detallará en una sección posterior.

Finalmente, las funciones pueden interactuar con el ámbito léxico en el que fueron declaradas, accediendo a variables definidas fuera de ellas. Este comportamiento es la base para comprender conceptos avanzados como los closures, que se explorarán más adelante.

Parámetros y argumentos en funciones

Las funciones en JavaScript pueden recibir información a través de parámetros, que son variables definidas en la declaración de la función. Los argumentos son los valores reales que se pasan a la función cuando se invoca.

Por ejemplo, en la siguiente función, a y b son los parámetros:

function add(a, b) {
    return a + b;
}

Al llamar a la función y proporcionar valores, esos valores son los argumentos:

const sum = add(5, 3); // sum = 8

Parámetros predeterminados

A partir de ES6, es posible asignar valores predeterminados a los parámetros de las funciones. Esto permite que una función utilice un valor por defecto si no se proporciona un argumento o si este es undefined.

function greet(name = 'Guest') {
    console.log(`Hello, ${name}!`);
}

greet(); // Output: Hello, Guest!
greet('Alice'); // Output: Hello, Alice!

En este ejemplo, si no se proporciona un argumento para name, la función utiliza el valor predeterminado 'Guest'.

Parámetros rest

Los parámetros rest permiten representar un número indefinido de argumentos como un array. Se definen utilizando tres puntos (...) antes del nombre del parámetro.

function multiply(factor, ...numbers) {
    return numbers.map(n => n * factor);
}

const result = multiply(2, 1, 2, 3); // result = [2, 4, 6]

En este caso, numbers es un array que contiene todos los argumentos adicionales que se pasen a la función. Los parámetros rest deben ser el último parámetro en la declaración de la función.

Objeto arguments

Antes de la introducción de los parámetros rest, JavaScript proporcionaba el objeto **arguments**, que es similar a un array y contiene todos los argumentos pasados a la función.

function sumAll() {
    let total = 0;
    for (let i = 0; i < arguments.length; i++) {
        total += arguments[i];
    }
    return total;
}

const totalSum = sumAll(1, 2, 3, 4); // totalSum = 10

Aunque el objeto arguments sigue disponible, se recomienda utilizar los parámetros rest por su sintaxis más clara y porque son arrays reales, lo que permite utilizar métodos del prototipo de Array directamente.

Parámetros por valor y por referencia

En JavaScript, los tipos primitivos (números, cadenas, booleanos, null, undefined, BigInt y Symbol) se pasan a las funciones por valor, lo que significa que la función recibe una copia del valor original.

function changeValue(val) {
    val = 100;
}

let num = 50;
changeValue(num);
console.log(num); // Output: 50

En este ejemplo, el valor de num no cambia después de llamar a changeValue, ya que val es una copia de num.

Por otro lado, los tipos de objeto (objetos, arrays, funciones, etc.) se pasan por referencia, por lo que la función puede modificar el contenido del objeto original.

function modifyArray(arr) {
    arr.push(4);
}

const numbers = [1, 2, 3];
modifyArray(numbers);
console.log(numbers); // Output: [1, 2, 3, 4]

Aquí, el array numbers se modifica dentro de la función porque arr es una referencia al mismo objeto en memoria.

Desestructuración de parámetros

La desestructuración permite extraer valores de arrays u objetos y asignarlos a variables de manera más concisa. Se puede utilizar en los parámetros de una función para mejorar la legibilidad y acceder directamente a los valores necesarios.

Desestructuración de objetos

function displayUser({ name, age }) {
    console.log(`Name: ${name}, Age: ${age}`);
}

const user = { name: 'Bob', age: 30, city: 'New York' };
displayUser(user); // Output: Name: Bob, Age: 30

En este ejemplo, la función displayUser extrae las propiedades name y age del objeto user.

Desestructuración de arrays

function processCoordinates([x, y]) {
    console.log(`X: ${x}, Y: ${y}`);
}

const point = [10, 20];
processCoordinates(point); // Output: X: 10, Y: 20

La desestructuración de arrays en los parámetros permite acceder directamente a los elementos individuales.

Parámetros nombrados mediante objetos

Para funciones con muchos parámetros, es común utilizar un objeto como parámetro y aprovechar la desestructuración para simular parámetros nombrados.

function createUser({ name, age, email }) {
    return { name, age, email };
}

const newUser = createUser({ name: 'Carol', email: 'carol@example.com', age: 25 });

Esto mejora la legibilidad y facilita el mantenimiento, ya que el orden de los argumentos es menos relevante y es más claro qué valor corresponde a cada parámetro.

Parámetros rest combinados con desestructuración

Es posible combinar los parámetros rest con la desestructuración para capturar el resto de los elementos de un array o las propiedades de un objeto.

function showTeam(captain, ...players) {
    console.log(`Captain: ${captain}`);
    console.log(`Players: ${players.join(', ')}`);
}

showTeam('Alice', 'Bob', 'Charlie', 'David');
// Output:
// Captain: Alice
// Players: Bob, Charlie, David

En este ejemplo, captain recibe el primer argumento, y players es un array que contiene el resto de los argumentos.

Validación y control de argumentos

Es buena práctica validar los argumentos dentro de las funciones para asegurarse de que el código se comporta como se espera. Se pueden establecer comprobaciones para verificar el tipo y la existencia de los argumentos.

function divide(a, b) {
    if (typeof b === 'undefined' || b === 0) {
        throw new Error('The divisor "b" must be non-zero.');
    }
    return a / b;
}

try {
    const result = divide(10, 0);
} catch (error) {
    console.error(error.message); // Output: The divisor "b" must be non-zero.
}

En este caso, si b es 0 o no se proporciona, la función lanza una excepción para indicar un error.

Funciones con número variable de argumentos

Los parámetros rest permiten crear funciones que aceptan un número variable de argumentos sin necesidad de utilizar el objeto arguments.

function concatenateStrings(...strings) {
    return strings.join(' ');
}

const message = concatenateStrings('JavaScript', 'is', 'awesome!'); // message = 'JavaScript is awesome!'

Esta técnica es útil para funciones que necesitan procesar una cantidad variable de datos sin un límite específico.

Ámbito de los parámetros

Los parámetros de una función tienen ámbito local dentro de esa función. Es decir, solo son accesibles dentro de la función y no afectan a variables con el mismo nombre en ámbitos externos.

let value = 10;

function setValue(value) {
    value = 20;
    console.log(`Inside function: ${value}`); // Output: Inside function: 20
}

setValue(value);
console.log(`Outside function: ${value}`); // Output: Outside function: 10

Aunque el parámetro y la variable externa se llamen igual, son independientes gracias al ámbito léxico de JavaScript.

Retorno de valores en funciones

El retorno de valores en funciones es fundamental para obtener resultados y utilizarlos en otras partes del programa. En JavaScript, la palabra clave return se utiliza para finalizar la ejecución de una función y devolver un valor al lugar donde fue invocada.

Por ejemplo, una función que calcula el cuadrado de un número puede definirse así:

function square(num) {
    return num * num;
}

const result = square(5); // result = 25

En este caso, la función square devuelve el resultado de multiplicar num por sí mismo utilizando return. La variable result almacena el valor devuelto por la función.

Si una función no incluye una instrucción return, o si esta se ejecuta sin un valor explícito, la función devolverá **undefined** por defecto. Por ejemplo:

function greet(name) {
    console.log(`Hello, ${name}!`);
}

const message = greet('Alice'); // Output: Hello, Alice!
console.log(message); // Output: undefined

Aquí, la función greet no devuelve ningún valor, por lo que message tiene el valor undefined. Es importante tener en cuenta este comportamiento para evitar errores al utilizar el resultado de una función.

La instrucción return no solo devuelve un valor, sino que también termina la ejecución de la función inmediatamente. Esto es útil para crear condiciones de salida o evitar ejecuciones innecesarias. Por ejemplo:

function divide(a, b) {
    if (b === 0) {
        return 'Error: Division by zero';
    }
    return a / b;
}

const result1 = divide(10, 2); // result1 = 5
const result2 = divide(5, 0); // result2 = 'Error: Division by zero' 

En este ejemplo, si b es cero, la función devuelve un mensaje de error y termina su ejecución. De lo contrario, procede a realizar la división.

Las funciones en JavaScript pueden devolver cualquier tipo de dato: primitivos, como números o cadenas, u objetos, como arrays o funciones. Esto permite una gran flexibilidad en el diseño de las funciones. Para devolver múltiples valores, es común retornar un objeto o un array.

Por ejemplo, al devolver un objeto:

function getUserInfo(id) {
    // Simulación de búsqueda de usuario
    return {
        id: id,
        name: 'Bob',
        email: 'bob@example.com'
    };
}

const user = getUserInfo(1);
console.log(user.name); // Output: Bob

Al devolver un objeto, se pueden acceder a sus propiedades y obtener varios datos relacionados. También se pueden retornar arrays para devolver colecciones de valores:

function getEvenNumbers(limit) {
    const numbers = [];
    for (let i = 2; i <= limit; i += 2) {
        numbers.push(i);
    }
    return numbers;
}

const evens = getEvenNumbers(10); // evens = [2, 4, 6, 8, 10]

Aquí, la función devuelve un array con todos los números pares hasta el límite especificado.

Gracias a que las funciones son ciudadanos de primera clase en JavaScript, es posible que una función devuelva otra función. Por ejemplo:

function createMultiplier(factor) {
    return function(number) {
        return number * factor;
    };
}

const double = createMultiplier(2);
console.log(double(5)); // Output: 10

En este caso, createMultiplier devuelve una nueva función que multiplica un número por el factor dado. Esto es útil para crear funciones personalizadas y para conceptos avanzados como closures, que se tratarán en secciones posteriores.

Las funciones flecha ofrecen una sintaxis más concisa para devolver valores. Si el cuerpo de la función es una sola expresión, el valor de esa expresión se devuelve automáticamente sin necesidad de escribir return ni llaves {}. Por ejemplo:

const multiply = (a, b) => a * b;

const product = multiply(4, 5); // product = 20

Sin embargo, si se utilizan llaves para definir el cuerpo de la función flecha, es necesario incluir explícitamente la instrucción return para devolver un valor:

const sum = (a, b) => {
    const result = a + b;
    return result;
};

Es importante recordar esta distinción para evitar que las funciones devuelvan **undefined** inadvertidamente.

Al utilizar return es recomendable seguir ciertas buenas prácticas. Por ejemplo, aunque JavaScript permite múltiples instrucciones return, mantener un único punto de salida puede mejorar la legibilidad y facilitar el mantenimiento. Además, es aconsejable retornar valores explícitos siempre que sea posible, para comprender mejor el comportamiento de la función y evitar confusiones.

En algunos casos, una función no necesita devolver ningún valor. Estas funciones, conocidas como procedimientos, realizan acciones o efectos secundarios, como modificar el DOM o escribir en la consola:

function logMessage(message) {
    console.log(`Log: ${message}`);
}

logMessage('This is a test'); // Output: Log: This is a test

Estas funciones devuelven undefined de forma predeterminada, lo cual es aceptable si el objetivo es realizar una tarea y no obtener un resultado.

Si una función se define para devolver un valor, pero no se proporciona una instrucción return, o se utiliza return sin un valor, la función devolverá **undefined**. Es importante gestionar adecuadamente los casos en que una función puede devolver undefined para evitar errores en el código que utiliza su valor de retorno.

En funciones asíncronas que utilizan async y await, el valor devuelto es automáticamente envuelto en una **Promise**. Esto permite trabajar con operaciones asíncronas de manera más sencilla:

async function fetchData() {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    return data;
}

fetchData().then(data => {
    console.log(data);
});

En este ejemplo, fetchData devuelve una Promise que se resuelve con los datos obtenidos de la API.

La instrucción return se aplica al ámbito de la función en la que se encuentra. Si se utiliza dentro de un bloque condicional o un bucle, afectará a la función entera. Por ejemplo:

function findFirstEven(numbers) {
    for (let num of numbers) {
        if (num % 2 === 0) {
            return num;
        }
    }
    return null;
}

const firstEven = findFirstEven([1, 3, 7, 8, 9]); // firstEven = 8

Aquí, el return dentro del bucle for termina la función en cuanto se encuentra el primer número par.

Es esencial prestar atención a la sintaxis al usar return. Por ejemplo, si se devuelve un objeto literal, se deben utilizar paréntesis para evitar interpretaciones erróneas:

function getObject() {
    return {
        name: 'Alice',
        age: 30
    };
}

const obj = getObject(); // obj = { name: 'Alice', age: 30 }

Si se coloca el objeto literal en una nueva línea sin paréntesis, JavaScript insertará automáticamente un punto y coma después de return, lo que provocará que la función devuelva undefined:

function getObject() {
    return
    {
        name: 'Alice',
        age: 30
    };
}

const obj = getObject(); // obj = undefined

Para evitar este comportamiento, es recomendable colocar el objeto en la misma línea que return o utilizar paréntesis.

Comprender cómo funcionan los retornos de valores en funciones es crucial para escribir código JavaScript eficaz. Utilizar return de manera adecuada permite controlar el flujo de ejecución y aprovechar al máximo las funciones para producir resultados reutilizables y consistentes.

Contexto y ámbito de funciones

El contexto y el ámbito de las funciones en JavaScript son conceptos fundamentales para comprender cómo se accede a las variables y cómo se determina la referencia de this durante la ejecución de una función. Entender estos conceptos es esencial para evitar errores y escribir código más robusto.

El ámbito (scope) es el contexto en el que se definen las variables y cómo estas pueden ser accedidas. En JavaScript, existen principalmente tres tipos de ámbitos: global, de función y de bloque.

Ámbito global

Las variables declaradas fuera de cualquier función o bloque tienen ámbito global. Estas variables son accesibles desde cualquier parte del código, incluyendo dentro de funciones y bloques. Sin embargo, es importante minimizar el uso de variables globales para evitar conflictos y mejorar la mantenibilidad del código.

var globalVar = 'I am global';

function showGlobal() {
    console.log(globalVar); // Output: I am global
}

showGlobal();

En este ejemplo, la variable globalVar es accesible dentro de la función showGlobal debido a su ámbito global.

Ámbito de función

Las variables declaradas dentro de una función tienen ámbito local o ámbito de función. Esto significa que solo pueden ser accedidas dentro de esa función y no desde el exterior.

function greet() {
    let message = 'Hello, world!';
    console.log(message); // Output: Hello, world!
}

greet();
console.log(message); // Error: message is not defined

Aquí, la variable message está definida con let dentro de la función greet y no es accesible fuera de ella, respetando su ámbito local.

Ámbito de bloque

Con la introducción de let y const en ES6, JavaScript soporta el ámbito de bloque. Las variables declaradas con let o const dentro de un bloque {} solo existen dentro de ese bloque.

if (true) {
    let blockVar = 'I exist only in this block';
    console.log(blockVar); // Output: I exist only in this block
}

console.log(blockVar); // Error: blockVar is not defined

En este ejemplo, blockVar está limitada al ámbito de bloque del if, y no puede ser accedida fuera de él.

Cadena de ámbitos

JavaScript utiliza un mecanismo de cadena de ámbitos (scope chain) para resolver las variables. Cuando se intenta acceder a una variable, el motor de JavaScript busca en el ámbito actual. Si no la encuentra, sube al ámbito superior, y así sucesivamente hasta llegar al ámbito global.

const globalNumber = 5;

function outerFunction() {
    const outerNumber = 10;

    function innerFunction() {
        const innerNumber = 15;
        console.log(globalNumber + outerNumber + innerNumber); // Output: 30
    }

    innerFunction();
}

outerFunction();

En este caso, innerFunction puede acceder a innerNumber, outerNumber y globalNumber gracias a la cadena de ámbitos.

El contexto y la palabra clave this

El contexto en JavaScript se refiere al valor de this dentro de una función. El valor de this depende de cómo se invoque la función. Comprender el comportamiento de this es crucial para manejar el contexto correctamente.

Contexto global

En el ámbito global, this hace referencia al objeto global. En un navegador, esto es el objeto window.

console.log(this === window); // Output: true

var globalVar = 'I am global';

console.log(this.globalVar); // Output: I am global

Aquí, this apunta a window, y las variables var se agregan al objeto global.

Contexto de función

En modo estricto ('use strict'), this dentro de una función sin contexto explícito es undefined. Sin embargo, en modo no estricto, this también apunta al objeto global.

function showThis() {
    console.log(this);
}

showThis(); // Output: Window object (en modo no estricto)

Para evitar comportamientos inesperados, es recomendable usar el modo estricto y comprender cómo afecta al contexto.

Uso de this en métodos de objetos

Cuando una función es llamada como un método de un objeto, this hace referencia al objeto en cuestión.

const person = {
    name: 'Alice',
    greet: function() {
        console.log(`Hello, my name is ${this.name}`);
    }
};

person.greet(); // Output: Hello, my name is Alice

En este caso, this.name se refiere a la propiedad name del objeto person.

Asignación de métodos a variables

Cuidado al asignar métodos a variables, ya que se puede perder el contexto original de this.

const greet = person.greet;
greet(); // Output: Hello, my name is undefined

Aquí, this ya no apunta al objeto person, sino al objeto global (o undefined en modo estricto). Para preservar el contexto, es posible utilizar métodos como bind, call o apply.

Métodos bind, call y apply

Estos métodos permiten establecer explícitamente el valor de this en una función.

• **bind**: crea una nueva función con this enlazado al objeto especificado.
• **call**: llama a la función con un determinado this y argumentos proporcionados individualmente.
• **apply**: similar a call, pero los argumentos se proporcionan como un array.

const boundGreet = person.greet.bind(person);
boundGreet(); // Output: Hello, my name is Alice

person.greet.call({ name: 'Bob' }); // Output: Hello, my name is Bob

person.greet.apply({ name: 'Carol' }); // Output: Hello, my name is Carol

Estos métodos son útiles para controlar el contexto de forma explícita.

Funciones flecha y this

Las funciones flecha no tienen su propio this. En su lugar, capturan el this del contexto léxico en el que se encuentran. Esto significa que dentro de una función flecha, this hará referencia al this del ámbito exterior.

const team = {
    name: 'Developers',
    members: ['Alice', 'Bob'],
    listMembers: function() {
        this.members.forEach(member => {
            console.log(`${member} is part of ${this.name}`);
        });
    }
};

team.listMembers();
// Output:
// Alice is part of Developers
// Bob is part of Developers

En este ejemplo, la función flecha dentro de forEach utiliza el this de listMembers, que es el objeto team. Si se utilizara una función normal, el this dentro de forEach sería undefined o el objeto global, lo que ocasionaría problemas.

Variables estáticas con static

Aunque el concepto de variables estáticas no se aplica directamente a las funciones, es posible usar propiedades estáticas en clases para mantener valores compartidos.

class Counter {
    static count = 0;

    constructor() {
        Counter.count++;
    }

    static getCount() {
        return Counter.count;
    }
}

new Counter();
new Counter();

console.log(Counter.getCount()); // Output: 2

Aquí, count es una propiedad estática compartida entre todas las instancias de Counter.

Hoisting y ámbito

El hoisting es un comportamiento de JavaScript por el cual las declaraciones de variables y funciones se "levantan" al comienzo de su ámbito. Sin embargo, solo las declaraciones son levantadas, no las asignaciones.

Hoisting de funciones

Las declaraciones de funciones son elevadas al inicio del ámbito, lo que permite llamarlas antes de su definición.

sayHello(); // Output: Hello!

function sayHello() {
    console.log('Hello!');
}

Hoisting de variables

Las variables declaradas con var son levantadas pero inicializadas como undefined. Las variables con let y const también son levantadas pero no están disponibles hasta que se declara su línea correspondiente, lo que se conoce como Zona Temporal Muerta.

console.log(num); // Output: undefined
var num = 10;

console.log(value); // Error: Cannot access 'value' before initialization
let value = 20;

Comprender el hoisting ayuda a evitar comportamientos inesperados relacionados con el ámbito.

IIFE (Immediately Invoked Function Expressions)

Las IIFE son funciones que se ejecutan inmediatamente después de ser creadas, creando un nuevo ámbito. Son útiles para aislar el código y evitar contaminar el ámbito global.

(function() {
    const privateVar = 'I am private';
    console.log(privateVar); // Output: I am private
})();

console.log(privateVar); // Error: privateVar is not defined

En este ejemplo, privateVar existe solo dentro de la IIFE, protegiendo su ámbito.

Módulos y ámbito

Con la introducción de los módulos ES6, cada módulo tiene su propio ámbito. Las variables y funciones definidas en un módulo no están disponibles fuera de él a menos que se exporten explícitamente.

// module.js
const secret = 'I am secret';

export function reveal() {
    console.log(secret);
}

// main.js
import { reveal } from './module.js';

reveal(); // Output: I am secret
console.log(secret); // Error: secret is not defined

Esto permite encapsular el código y gestionar el ámbito de manera más eficiente.

Recapitulación del contexto y ámbito

• El ámbito determina la visibilidad de las variables y puede ser global, de función o de bloque.
• El contexto se refiere al valor de this en una función y depende de cómo se invoque.
• Las funciones flecha no tienen su propio this y utilizan el this léxico.
• El hoisting afecta a cómo las funciones y variables son elevadas en su ámbito.
• Entender el contexto y el ámbito es esencial para evitar errores y escribir código JavaScript eficaz.