Estamos trabajando en algo propio llamado KODOTI. Click para unirte
Se viene KODOTI. Únete

Ejemplo de Closures con Javascript

¿Qué son y Para que sirven?, es lo que vamos a explicar en esta entrada de javascript.

Rodríguez Patiño, Eduardo
2,616 lecturas
Rodríguez Patiño, Eduardo
Hemos migrado hace poco nuestras publicaciones del blog antiguo. Si crees que esta se encuentra incompleta o sin coherencia deja un comentario para restaurarla manualmente.

A lo mejor esto ya lo sabes, no es nuevo, pero posiblemente desconocías el nombre Closure. Bien, en el ámbito de desarrollo de javascript podemos definir variables y/o funcionales locales y globales, veamos un ejemplo práctico.

Definición

Los closures son funciones que manejan funciones independientes. Es decir dentro de una función podemos implementar otra función.

Variables locales y globales

var a = 0;

function incrementaA() {
    a++;
    console.log(a);
}

incrementaA(); // 1
incrementaA(); // 2
incrementaA(); // 3

Como se darán cuenta hemos declarado una variable fuera del scope de la función incrementaA para incrementar dicho valor y este mismo valor lo podremos reutilizar desde cualquier otro scope o bloque de nuestro código. Asimismo, si queremos que la "variable a" se pueda usar solo dentro de la función, pues declaramos dicha variable dentro.

function incrementaA() {
    var a = 0;
    a++;
    console.log(a);
}

incrementaA(); // 1
incrementaA(); // 2
incrementaA(); // 3

Como mencioné, esto no es nada nuevo ya que, seguramente lo haz venido implementando sin saber el nombre del concepto.

Funciones locales

Tambíen podríamos declarar funciones dentro de una función, de esta manera dichas funciones serían locales. Veamos un ejemplo práctico que nos permita calcular nuestro sueldo mensual luego de aplicarle los respectivos descuentos por aportes de jubilación que nos dará una miserable pensión y/o para los que siguen la doctrina del diezmo según a la religión que pertenezcan.

function obtenerSueldo(sueldo) {
    var usuario = {
        religion: 'Adventista'    
    };

    function descontarAporte() { // 10% de descuento
        sueldo = sueldo * 0.90;
    }

    function descontarDiezmo() { // 10% de descuento
        sueldo = sueldo * 0.90;
    }

    function suReligionAplicaAlDiezmo(){
        return (usuario.religion.toLocaleLowerCase() === 'mormon' || usuario.religion.toLocaleLowerCase() === 'adventista');
    }

    // Descuento por trabajo
    descontarAporte();

    // Descuento por aporte del diezmo dependiendo al religion a la que pertenezca
    if(suReligionAplicaAlDiezmo()){
        descontarDiezmo();            
    }

    return sueldo;
}

console.log(obtenerSueldo(5000));

Como se dieron cuenta, dichas funciones dentro de nuestro función obtenerSueldo solo podrán ser llamadas dentro de dicho método y esta forma de trabajo hace que nuestro código sea más ordenado y escalable. AnexGRID usa este concepto.

Un ejemplo más avanzado

Vamos a inicializar una variable usando una función anónima, está tambíen será un closure porque implementa su propia función y variables locales.

var user = (function(id){
    function getUserFromApi(){
        // Esto debería ser llamado mediante una petición AJAX
        return {
            id: 10,
            name: 'Eduardo',
            lastname: 'Rodríguez Patiño',
            email: 'erodriguezp105@gmail.com'
        };
    }

    var data =  getUserFromApi(id);

    return {
        data: data,
        sayHello: function(){
            return 'Hi, I am ' + data.name;
        }
    };
})(10);

console.log(user.sayHello());
¿Te gustó nuestra publicación?
Suscríbete a nuestro boletín