Closures y Ámbito Léxico en JavaScript

Clase 25 de 55Curso de Fundamentos de JavaScript

Resumen

¿Qué son los closures?

Los closures son un concepto fundamental en la programación con JavaScript y otras lenguas similares. Básicamente, un closure es una función que tiene acceso a variables de un ámbito externo, incluso después de que esa función ha dejado de ejecutarse. Este comportamiento se debe al ámbito léxico, el cual se define en el momento en que se crea una función. Este ámbito permite que las funciones accedan a variables dentro de su ámbito y a cualquier variable de los ámbitos superiores.

¿Cómo se crean y funcionan los closures?

Para entender la creación de closures, consideremos un ejemplo práctico:

function otherFunction() {
    const otherVariable = "I am from other function";
    
    function innerFunction() {
        console.log(otherVariable);
    }
    
    return innerFunction;
}

const closureExample = otherFunction();
closureExample();

En este ejemplo, innerFunction es un closure porque tiene acceso a otherVariable, que está definida en su ámbito externo, otherFunction. Cuando ejecutamos closureExample(), el programa imprime "I am from other function", demostrando que innerFunction puede acceder a otherVariable a pesar de que otherFunction ya ha finalizado su ejecución.

¿Cuáles son las precauciones al usar closures?

A pesar de que los closures son herramientas poderosas, es esencial usarles con cuidado para evitar problemas de memoria. Al crear closures, cada función interna que retorna tendrá su propio ámbito léxico, lo que puede requerir más memoria si no se gestiona correctamente.

Observemos el siguiente ejemplo con un contador:

function createCounter() {
    let count = 0;
    
    return function() {
        count++;
        console.log(count);
    };
}

const counterA = createCounter();
counterA(); // 1
counterA(); // 2

const counterB = createCounter();
counterB(); // 1

Aquí, cada llamada a createCounter crea un nuevo closure con su propio ámbito count. Los valores de count son independientes entre counterA y counterB, mostrando que cada closure mantiene su propio estado.

¿Cómo manejar diferentes contextos con closures?

Los closures también permiten trabajar con diferentes contextos, ofreciendo flexibilidad en el manejo de funciones:

function order() {
    const message = "Hello, ";
    
    function inner(name) {
        console.log(message + name);
    }
    
    return inner;
}

const closureA = order();
closureA("Alicia"); // Hello, Alicia
closureA("Bob");    // Hello, Bob

En este caso, la función inner retorna un saludo personalizado, usando el contexto compartido de order para formar el mensaje completo. Esto demuestra cómo los closures pueden usarse para crear funciones flexibles que acceden y manipulan datos en diferentes contextos.

En resumen, los closures ofrecen una poderosa capacidad para gestionar ámbitos y mantener estados privados en JavaScript, pero se debe ser cuidadoso para no incurrir en problemas de memoria. Con una comprensión adecuada, podemos utilizar esta característica para escribir código eficiente y flexible. ¡Sigue explorando y practicando para perfeccionar tus habilidades con closures y otros conceptos avanzados!