Why Are Custom Leaflet Controls Added As Upper And Lower Case?

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.Waterma

Solution 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

Solution 2:

Unfortunately there is no real convention within JavaScript.

Most OOP languages will have classes with the convention to use UpperCamelCase (PascalCase).

The factory pattern mainly saves you from using the new keyword. To differentiate both, in Leaflet the former uses PascalCase, and the latter uses lower camelCase.

But you will find plenty other JS libraries that use PascalCase for their factory (most of the time they do not supply an equivalent class in their API though).

For more insight on the convention chosen for Leaflet, you can have a look at Leaflet/Leaflet #1430 (it was far from being a clear cut).