What is the Rest Parameter in a Function?

Learn full article on Infragistics blog

A JavaScript function can take any number of parameters. Unlike other languages like C# and Java, you can pass any number of parameters while calling a JavaScript function. JavaScript functions allows unknown number of function parameters. Before ECMAScript 6, JavaScript had arguments variable to access these unknown or variable number of parameters, which is an array-like object but not an array. Consider this code listing to understand the argumentsvariable:

As you see, that arguments object is used to access unknown or variable function parameters.  Even though arguments uses length property and square brackets, it is not a real JavaScript array. You cannot use other JavaScript array methods like pop, push, slice etc. with the arguments object.  Some of the problems in using arguments are:

  • JavaScript function arguments object is not a real JavaScript array; therefore, you cannot use other array methods like pop, push, slice, etc. with it
  • It is difficult to access arguments object of outer function in an inner function. To use it, you need to assign outer function arguments object in a variable, and then use it in an inner function
  • If you want to use arguments object as an array, then you need to convert it manually using Aarry.prototype.slice

ECMAScript 6 introduces a new feature, Rest Parameters, which represents an unknown number of parameters as an array in a function. It not only represents extra parameters as an array, it also solves many of the problems of the arguments object.  Let us rewrite the above add function using the rest parameters.

Learn full article on Infragistics blog

11 things about JavaScript functions that .NET developers should know: Part 2

Read full article on the Infragistics blog

This is the second part of the series in 11 Things about JavaScript Functions that .NET Developers Should Know . In part 1 we discussed the following topics,

  1. JavaScript functions as an expression
  2. JavaScript functions as a statement
  3. Return statements in JavaScript functions
  4. Parameters in JavaScript functions
  5. The Arguments object in JavaScript functions
  6. Varargs JavaScript functions

In this part we will discuss the following topics,

  1. Scopes in functions
  2. Nested functions and Lexical scoping
  3. Functions’s this keyword
  4. Function as constructor
  5. The call() and the apply() methods

Scopes in function

Scoping stands for current context of code execution. Either a variable o expression can be executed in the context of the function they are created or in the global context of the JavaScript. JavaScript does not have the block scoping. It only supports scoping at the function level or global level.

Any variable defined anywhere in the function can be used everywhere in the function but not outside the function.

Read full article on the Infragistics blog

11 things about JavaScript functions .NET developers must know: Part 1

I have often seen .NET developers struggle with the JavaScript. They try to compare C# functions with the JavaScript functions and usually do some minor but conceptual mistakes while using it. As we all will agree that JavaScript functions are the backbone of the JavaScript programming language, and if one has good understanding of the function then using JavaScript is easier. So in this two parts series, I will focus some important concepts of JavaScript functions.

In this part of the series, we will cover the following six topics:

  1. JavaScript function as an expression
  2. JavaScript function as a statement
  3. Return statement in the JavaScript function
  4. Parameters in the JavaScript function
  5. Arguments object in the JavaScript function
  6. Varargs JavaScript function

JavaScript functions can be an expression

A JavaScript function can be an expression. You can create a JavaScript function as an expression as shown below:

image

A function expression creates an instance of the function object. It can be passed as an argument to a function, it can be returned from a function, and it can be assigned to a variable or an array. A function expression can be created with the name as shown follows:

Read full article on the Infragistics blog

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.