Invocation patterns in JavaScript

In JavaScript you can invoke a function in four different ways. In this post we will take a look on various invocation patterns. There are four ways a function can be invoked in JavaScript. Four invocation patterns in JavaScript are as follows,

  1. Function Invocation Pattern
  2. Method Invocation Pattern
  3. Constructor Invocation Pattern
  4. Indirect Invocation Pattern

image

Function Invocation Pattern

When you call a function as an expression then it is known as Function Invocation Pattern. Let us say you have a function as given below,

 function FindSquare(number) {

return number * number;
 }

You can invoke above function as below,


var result = FindSquare(9);
 console.log(result);

 

This way or pattern of invoking a function is called Function Invocation pattern. There are few important points about function invocation pattern is as follows,

  • First each parameter gets evaluated and then being passed as argument to function
  • Function return either value or undefined to LHS variable .If called function does not have any return value then it returns undefined
Method Invocation Pattern

In JavaScript, any function which part of an object is known as Method.

image

Assume we have a JavaScript object studentObject as following. In studentObject object property findgrade is a function. So we can say findgrade is a method.


var studentObject =
{
 name: "dj",
 marks: 89,
 findgrade: function (marks) {
 if (marks > 75) {
 return "Grade A ";
 }
 else {
 return "Grade B ";
 }
 }
}

Invocation of method is known as “Method Invocation Pattern”. We can invoke method using dot operator on object. Method can be invoked as following,

 var grade = studentObject.findgrade(99);
 console.log(grade);

A Method can access its parent object using operator this. Let us go ahead and modify studentobject as following. Now you can see that we are accessing other properties of object in method using this operator

 


var studentObject =
{
 name: "dj",
 marks: 89,
 grade: null,
 findgrade: function (marks) {
 if (marks > 75) {
 this.grade = "A";
 }
 else {
 this.grade = "B";
 }
 }
}

Now we can set grade property with invocation of findgrade method.

studentObject.findgrade(99);
 var grd = studentObject.grade;
 console.log(grd)

Binding of method to object happens when we execute the method. In this way we can work with Methods and Method Invocation Pattern in JavaScript.

 

Constructor Invocation Pattern

If you invoke a function with keyword new, then it is constructor invocation pattern. For example below we are invoking constructor


var obj = new String();
 var obj2 = new Object();

Arguments to constructors will be passed in the same way of Function Invocation Pattern. There could be scenario when constructor does not require any parameter. Then in that case constructor can be called without braces.


var obj2 = new Object;

Constructor invocation creates an empty object that inherits from prototype property of constructor.

Constructor function usually does not have return. This is used to initialize new object. It always returns a new object. Even if constructor has return statement with some primitive values, return statement will be ignored and new created object will be returned.

Indirect Invocation Pattern

You can execute a JavaScript function indirectly using function’s method as well. There are three function methods are used to execute JavaScript function indirectly. They are as follows,

  1. Call() method
  2. Apply() method
  3. Bind() method

Read more about this function’s methods here

What is Bind method in JavaScript

What is call() method in JavaScript

What is apply() method in JavaScript

These are four invocation patterns in JavaScript. I hope you find this post useful. Thanks for reading.

4 thoughts on “Invocation patterns in JavaScript

  1. Pingback: Dew Drop – September 3, 2013 (#1,616) | Alvin Ashcraft's Morning Dew

  2. Pingback: Blog Posts of the Week (1st - 7th September 2013) - The South Asia MVP Blog - Site Home - TechNet Blogs

  3. Pingback: Resources for webinar “Patterns in JavaScript” | Telerik Helper

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s