javascript - Why are custom leaflet controls added as upper and lower case?

Question

I am looking at the Extending Leaflet documentation for adding custom controls.

It contains this code snippet as an example of adding a simple watermark control:

L.Control.Watermark = L.Control.extend({
    onAdd: function(map) {
        var img = L.DomUtil.create('img');

        img.src = '../../docs/images/logo.png';
        img.style.width = '200px';

        return img;
    },

    onRemove: function(map) {
        // Nothing to do here
    }
});

L.control.watermark = function(opts) {
    return new L.Control.Watermark(opts);
}

L.control.watermark({ position: 'bottomleft' }).addTo(map);

Why is the control assigned to both uppercase (L.Control.Watermark) and lowercase L.control.watermark variables? Is this a common convention when extending JavaScript libraries?

Answer 1

If you look at the tutorial named Extending Leaflet: Class Theory, you'll see a section named Factories:

Most Leaflet classes have a corresponding factory function. A factory function has the same name as the class, but in lowerCamelCase instead of UpperCamelCase.

Basically, the lowerCamelCase function is a convenience method to instantiate the corresponding class. You'll find plenty of articles on why use factory functions over constructors, this one seems quite comprehensive