How to bind to function that takes function as parameter

Question

I have the following I want to pass a parameter from a higher context which is onDeselectionStyle to the eachlayer method.

clearAll: function(){
        this.map.eachLayer(function(layer){
            if(layer.options.clicked == true){
                layer.options.clicked == false;
                layer.setStyle(this.onDeselectionStyle);
            }
        })
    }

I know that I need to bind this to the function but I don't know how to do it in this format. Thank you

Answer 1

Option 1

You can use the prototypical bind method on the function declaration:

clearAll: function () {
    this.map.eachLayer(function (layer) {
        if (layer.options.clicked == true) {
            layer.options.clicked == false;
            layer.setStyle(this.onDeselectionStyle);
        }
    }.bind(this))
}

Option 2

If you are using ES6, you can use an arrow function which will use the parent scope:

clearAll: function () {
    this.map.eachLayer(layer => {
        if (layer.options.clicked == true) {
            layer.options.clicked == false;
            layer.setStyle(this.onDeselectionStyle);
        }
    })
}

Option 3

This one doesn't really have much to do with binding context, but you can store the scope in an accessible variable you can use later:

clearAll: function () {
    var that = this;
    this.map.eachLayer(function(layer) {
        if (layer.options.clicked == true) {
            layer.options.clicked == false;
            layer.setStyle(that.onDeselectionStyle);
        }
    })
}