CODEWITHSUNDEEP
javascriptjqueryiife
Uzi
Uzi

Reputation: 2634

Pass dynamic params to IIFE

I've got this issue with passing a variable to an IFFE. did some reading, still didn't figure it out. would really appreciate some guidance here.

This is what I got:

Event: 

$(document).on('click', 'input[type="checkbox"]', check);

Click Handler: 

function check() {
    var id = $(this).closest('ul').attr('data-id');
    return id;
}

IIFE:

var checkID = (function (val) {

    var arr = [];

    return function () {

        var i = arr.indexOf(val);

        if (i === -1) {
            arr.push(val);
        } else {

            arr.splice(i, 1);
        }
        return arr;
    }

})(id);

right now i'm getting the ID, but returning it to nowhere.

in my IIFE, i did pass an id variable, but it's undefined.

so, how do I pass the ID variable im getting from check() to checkID IIFE?

other solutions are also welcome.

Thanks

Upvotes: 3

Views: 628

Answers (3)

Robin
Robin

Reputation: 148

Using getter/setter-like functions in your IIFE function makes it much more organized and readable. Then, use these functions to pass, store, and read data across your IIFE function.

var checkID = (function () {
    // your array
    var arr = [];
    // public
    return { 
      // get
      getArray: function(){
        return arr;
      },
      // set value
      setArray: function(val) {
        var i = arr.indexOf(val);
        if (i === -1) {
          arr.push(val);
        } else {
          arr.splice(i, 1);
        }
      }
    }
})();

Use it as follows:

checkID.getArray(); // returns default empty array []
checkID.setArray('car1');
checkID.setArray('car2');
checkID.setArray('car3');
checkID.setArray('car4');
checkID.setArray('car4'); // test splice()
checkID.getArray(); // returns ["car1", "car2", "car3"]

Upvotes: 0

Jamiec
Jamiec

Reputation: 136114

I think you need to do things sort of the other way around. Your check function would return a function used by the event handler, but it would also take a callback to be called after the click handler has run, passing your array.

The check function would look like a mash-up of both your functions:

function check(callback){
  var arr = [];
  return function(){
    var id = $(this).closest('ul').attr('data-id');
    var i = arr.indexOf(id);

    if (i === -1) {
        arr.push(id);
    } else {

        arr.splice(i, 1);
    }
    callback(arr);
  }
}

As you can see, it takes as a parameter a callback function, which will be called on each execution, passing the current array arr. For example, this is my test callback:

function handler(arr){
 alert("Array has " + arr.length + " elements");
}

Finally, your event handler would look like this:

$(document).on('click', 'input[type="checkbox"]', check(handler));

Live example: https://jsfiddle.net/src282d6/

Upvotes: 1

user5325596
user5325596

Reputation: 2410

In your clickHandler

function check() {
    var id = $(this).closest('ul').attr('data-id');
    checkID(id);
}

and change checkID to

var checkID = (function () {

    var arr = [];

    return function (val) {

        var i = arr.indexOf(val);

        if (i === -1) {
            arr.push(val);
        } else {

            arr.splice(i, 1);
        }
        return arr;
    }

})();

Upvotes: 2

Related Questions