CODEWITHSUNDEEP
javascript
Robert
Robert

Reputation: 3543

Unclear syntax with function parameters in javascript

I am reading open layers documentation which can be found at this link, but I do not understand something about syntax.

There is a part of the code which goes like this:

function flickrStyle(feature) {
      //where does this feature come from?
      var style = new ol.style.Style({
        image: new ol.style.Circle({
          radius: 6,
          stroke: new ol.style.Stroke({
            color: 'white',
            width: 2
          }),
          fill: new ol.style.Fill({
            color: 'green'
          })
        })
      });
      return [style];
    }

    var flickrLayer = new ol.layer.Vector({
      style: flickrStyle //??? where is parameter which needs to be sent? Should this be something like flickrStyle(someParam)
    });

As you can see, source is extracted from flickrStyle function, which obviously requires feature parameter, but I can't see anywhere in code that parameter is actually sent.

How does this work?

Upvotes: 0

Views: 40

Answers (2)

T.J. Crowder
T.J. Crowder

Reputation: 1074208

It's a bit clearer if you format it reasonably and consistently (as is often the case):

function flickrStyle(feature) {
    //where does this feature come from?
    var style = new ol.style.Style({
        image: new ol.style.Circle({
            radius: 6,
            stroke: new ol.style.Stroke({
                color: 'white',
                width: 2
            }),
            fill: new ol.style.Fill({
                color: 'green'
            })
        })
    });
    return [style];
}

var flickrLayer = new ol.layer.Vector({
    style: flickrStyle //??? where is parameter which needs to be sent? Should this be something like flickrStyle(someParam)
});

The style: flickrStyle property in the object being passed to ol.layer.Vector is passing the function reference itself, not a call to it. Looking at the ol.layer.Vector documentation, ol.layer.Vector knows to call the function (passing in an argument for the feature parameter) if/when necessary.

Apparently that particular function doesn't use the feature parameter (and could have just omitted it from the parameter list), but perhaps the author left it there because it does get passed a value for that parameter (per the StyleFunction docs linked from the docs above) and the function may be edited to use it later.

Here's a simpler example of the same sort of thing:

// Stand-in for ol.layer.Vector
class Foo {
  constructor(options) {
    this.style = options.style;
    this.counter = 0;
  }
  addElement() {
    const div = document.createElement("div");
    ++this.counter;
    div.innerHTML = "Div #" + this.counter;
    if (typeof this.style === "function") {
      this.style(div); // <=== This is like ol.layer.Vector's call to the function
    }
    document.body.appendChild(div);
  }
}

// Our style function
function ourStyleFunction(element) {
  element.style.color = Math.random() < 0.5 ? "blue" : "green";
  element.style.fontWeight = "bold";
}

// Creating an object passing in that function as an option
const f = new Foo({
  style: ourStyleFunction
});

// Doing something with it that makes it call the function
f.addElement();
f.addElement();
f.addElement();
f.addElement();

Upvotes: 1

Thor Jacobsen
Thor Jacobsen

Reputation: 8851

You're right, feature isn't used in that method.

var flickrLayer = new ol.layer.Vector({
    style: flickrStyle // this is a function reference, so the Vector class will call it with a given parameter (probably "feature")
});

Upvotes: 1

Related Questions