JavaScript Invocation patterns can be tricky for developers new to the language. This tutorial will take a look and review the four different invocation patterns that JavaScript offers, and the behavior that is expected when using them.
A function invocation in JavaScript refers to passing control and parameters to another function during execution. This may not seem very interesting at first, but the functional ability that the developer can gain can be powerful.
If you have programmed in other languages, especially in many of the popular Object Oriented languages that contain the this parameter, you will quickly find that in JavaScript, the context execution of a function can change the functionality of a function in ways that are typically not expected.
Let’s dive into this in detail. Each function in JavaScript contains two implicit parameters, the this parameter that you use to call object properties with, and another parameter called the arguments parameter.
Along with these two implicit parameters, JavaScript also contains four different invocation patterns.
Let’s take a look.
The Four JavaScript Invocation Patterns:
- Constructor Invocation
- Function Invocation
- Method Invocation
- Apply Invocation
**Note: Each invocation pattern in JavaScript changes the initialization context of the this parameter.
Let’s take a look at how each pattern works.
The Constructor Invocation Pattern
Again, JavaScript is classless, prototypal inheritance language, but some of the syntax JavaScript uses camouflages its true nature. Some of JavaScript’s syntax makes the language appear to have classical inheritance, but it doesn’t.
When a function object in JavaScript is invoked with the new keyword, then that object is created with a “hidden link” to that function’s prototype member, and the this parameter will be bound to that new object.
Let’s take a look at an example.
Constructor Invocation Example:
// create a constructor function
// called HelloName
var HelloName = function(name) {
this.say = name
};
// Give all instances of HelloName
// a public method called getSay
HelloName.prototype.getSay = function() {
return this.say;
};
// create an instance of HelloName
var helloNameObj = new HelloName("Daryl");
// hello Daryl
console.log('hello' + helloNameObj.getSay());
When functions in JavaScript are created with the new keyword, they are called constructors. We add functionality to constructor functions by adding properties to the functions prototype.
**Note: By convention, the first letter of a constructor function is always capitalized.
Constructor functions in JavaScript can be very useful; however, using the “constructor style” method for creating functions is not recommended. JavaScript contains a better method built into the language, that accomplishes the same behavior. This method is to use Object.create, and we will look at why this is a better option later in another tutorial.
The Function Invocation Pattern
A function is not a property of an object when the function is invoked using the Function Invocation Pattern. If the function is invoked with this pattern, the this parameter becomes bound to the global object, and this can become a problem.
**Note: This was considered a design flaw when the language was developed, because binding to the global object is bad. We won’t go into complete detail of why it is bad in this tutorial, but we will look at a commonly used example of why. There are a lot of reasons, so just trust me (or Google it), binding globally is a nightmare waiting to happen.. 😛
OK, let’s first take a look at the Function Invocation Pattern, and then since binding to the global object is bad, we’ll take a look at how a standardized work around is implemented when a function is invoked inside a method.
Function Invocation Example:
// invoked as a function
var addTogether = add(1, 2); // 3
// using our helloNameObj object
// modify helloNameObj to contain a
// moneyMakerAlgorithm method
var helloNameObj.moneyMakerAlgorithm = function() {
var that = this; // work around
var extraMathProcessing = function() {
// "that" holds the correct "this" value now
that.value = add(that.value, that.value);
}
// invoke as a function
extraMathProcessing(); // "this" is now bound to global object
}
// invoke moneyMakerAlgorithm as a method
helloNameObj.moneyMakerAlgorithm();
// output result of value
console.log(helloNameObj.value);
The Method Invocation Pattern
As mentioned, when a function is stored as a property of an object, that property is called a method. When a method is invoked, the this parameter is bound to that method, and that method is a function object.
Let’s take a look at an example.
Method Invocation Example:
// create an object literal with
// a method. The input param is
// optional, but there should be
// validation checking for if input
// is actually of data type number
var helloNameObj = {
value: 1,
increase: function(num){
this.value += num;
}
};
helloNameObj.increase(1); // value = 2
helloNameObj.increase(3); // value = 5
The Apply Invocation Pattern
Since JavaScript supports a functional programming paradigm, then functions can be “first-class citizens”, and since functions are objects, then functions can contain other functions, called methods.
The implications of these features are that JavaScript contains an “Apply Invocation pattern”. This pattern, enables the creation of an array of arguments that can be invoked on a function directly. When doing this, we can apply the context of the this parameter to the context of our choosing.
Let’s take a look at some examples.
Apply Invocation Example:
// apply takes two parameters
// first - is the this parameter
// second - is the array of arguments
// to apply on the function
var helloNameArr = [2, 3];
var addTogether = add.apply(null, helloNameArr); // 5
Apply Invocation Example:
// create an object literal with a
// say property like in the constructor
// invocation pattern
var helloNameObj {
say: 'hello Daryl'
};
// Unlike above in the constructor
// invocation pattern, helloNameObj
// does not inherit from
// HelloName.prototype, so
// we do not have a getSay method
// on helloNameObj, but we can
// invoke getSay on helloNameObj
// by using the apply keyword again
var say = HelloName.prototype.getSay.apply(helloNameObj);
// hello Daryl
Now that we went through all the invocation patterns, let’s take a look at an interesting array parameter that JavaScript makes available.
JavaScript Arguments Parameter
JavaScript contains an array parameter, that is implicitly available to functions when they are invoked. The arguments array allows functions to be invoked with extra arguments. This includes ones that are not already defined as the functions parameters. The implications of this, is that functions can be invoked with an unspecified number of arguments.
Let’s take a look.
Arguments Parameter Example:
// invoked as a function
var addStuff = function() {
var result=0;
for(var i=0; i < arguments.length; i++) {
result += arguments[i];
}
return result;
}
console.log(addStuff(1,2,3); // 6
And that's it for the JavaScript invocation review.
Happy coding 😀