Explain javascript inane function arguments

Question

I can NOT get my arms around this. Here is an example... would someone PLEASE explain?

In AngularJs, one can write custom filters. One such filter could look like this (thanks to Adam Freeman and his new book on Angular):

angular.module("exampleApp")
  .filter("labelCase", function() {
    return function (value, reverse) {
      if (angular.isString(value)) {
         ....
      }
    };
 });

In this example, the value of "value" in the internal function is automatically provided by Angular. The "reverse" argument is provided by the code developer and has to be inserted by the HTML. The value of "reverse" is provided by the HTML as follows:

... <tr>{{p.category | labelCase:true}}</td>

So, here are my questions:

1. How are we supposed to know that Angular automatically inserts the value data into the "value" parameter? Is this common knowledge?

2. Why is it that the HTML "labelCase:true" call does not have to provide a placeholder for the "value" parameter in the function? In other words, how does Angular know that the "true" is to applied to the second parameter?

3. How does this not create incredibly fragile code? What happens if the Angular people decide to provide another automatically provided argument in the future? Should this happen, wouldn't this break the internal function as it is currently written: return function (value, reverse) { ... }?

This is extremely confusing to me. I look forward to developing a better understanding of all this.

Answer 1

1. Yes, this is common knowledge. This value can be interpreted as input that goes from the right side if the angularjs expression ( {{p.category |... )
2. As mentioned in the first question, the value is the input to the filter. Every additional value seperated by the : will be added to the filter callback as parameter.
3. This is a problem you'r always facing, when developing with libraries. APIs and interfaces do change. I guess they won't change something there in the future but you never know. That's why migration is required sometimes.

{{p.category | customFilter:secondParam:thirdParam: .... }}

angular.module("exampleApp")
  .filter("labelCase", function() {
    return function (input, someSecondParam, someThirdParam) {
      if (angular.isString(input)) {
         ....
      }
    };
 });

Answer 2

1. The Angular docuumentation on creating customer filters says:

   This factory function should return a new filter function which takes the input value as the first argument.

   That means that Angular will supply the input value to the function as the value argument, since it's the first argument.

2. The documentation goes on to say:

   Any filter arguments are passed in as additional arguments to the filter function.

   So the HTML doesn't have to deal with leaving a place for the first argument, Angular takes care of providing them in the appropriate order.

3. It's like most Javascript functions, you have to know the order of arguments to call them properly. Developers generally guarantee that they won't change the order incompatibly. Additional arguments can be added at the end of the argument list; the function has to default them appropriately if not supplied (JS automatically sets them to undefined).