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

I have often seen .NET developers struggle with JavaScript. They try to compare C# functions with JavaScript functions and usually make some minor but conceptual mistakes while using it. We’ll probably all agree that JavaScript functions are the backbone of the JavaScript programming language, and if you have a good understanding of the function, then using JavaScript is easier. So in this two part blog series, I will focus on some important concepts of JavaScript functions, including:

1. JavaScript function as an expression
2. JavaScript function as a statement
3. The 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:

 1 var add=function Add(num1, num2) { 2     var result = num1 + num2; 3     return result; 4 }

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:

 1 var add=function Add(num1, num2) { 2     var result = num1 + num2; 3     return result; 4 } 5  6 var s = sub(34,67); 7 console.log(s);

Alternatively, a function expression can be created without the name as shown follows:

 1 var sub =function(num1, num2) { 2     var result = num1 - num2; 3     return result; 4 } 5  6 var r =add(5,9); 7 console.log(r);

We cannot use a function expression before it has been created. So if in the above code snippet, we call sub before it’s created as shown below:

 1 var s = sub(34,67); 2 console.log(s); 3  4  5 var sub =function(num1, num2) { 6     var result = num1 - num2; 7     return result; 8 }

 … we’ll get an exception as shown below:

To understand why we are getting the above exception, let us understand how var works in the JavaScript. When you assign something to var using an assignment, JavaScript first creates var on the top of the function with the value undefined in it.

For example, we have created a function expression as shown above. JavaScript converts that function to something as shown below:

Essentially var statement gets converted in two parts. For every var, at the top of the function, JavaScript will create a variable with undefined value assigned to it. Later the real value will be assigned to the variable.

This is why when we try invoke the function expression before it was created, we get the exception that undefined is not a function.

JavaScript functions can be a statement 

A JavaScript function can be created as a statement as shown below:

 1 function Factorial(n) { 2 if(n <=1) { 3         return 1; 4 } 5  6     return n * Factorial(n - 1); 7 }

When we create a JavaScript function as statement, it is mandatory to give a name to the function. You cannot create a JavaScript function statement without a name.

When we create a function statement, JavaScript creates an object and assigns that to the variable. So usually, when you create a function statement, JavaScript creates a variable of the name same as of the function.

To understand it better, let’s say you have created a function as shown below,

At the back, JavaScript performs the following steps:

This will not likely work because  a function statement can be invoked before it is defined. However, the code – as you see below -  will not throw any exception.

 1 var result =Add(9,8); 2 console.log(result); 3  4 function Add(num1, num2) { 5     return num1 + num2; 6 }

Function statements are brought to the top of the script, so they can be invoked before they are defined.

Return statement in the JavaScript function  

A JavaScript function may or may not have a return statement.  By default a JavaScript function returns a value undefined. Explicitly, you can return an expression from the JavaScript function.  If there is no expression, then the JavaScript function returns undefined.

We have seen that the JavaScript function can return an expression as shown below:

 1 function Add(num1, num2) { 2  3     return num1 + num2; 4  5 } 6  7 var result =Add(1,2); 8 console.log(result);

You can also have a JavaScript Function without a return statement as shown below.

 1 function Foo() { 2  3 //function body  4  5 } 6  7 var result = Foo(); 8 console.log(result);

The value undefined will show up on the console because the JavaScript function does not return any value.  Other scenarios could be that you may have an expressionless return statement in the function. In this case, an undefined value will be returned from the JavaScript function.  The function defined below will also return undefined value.

 1 function Foo() { 2  3 //function body  4     return; 5  6 } 7  8 var result = Foo(); 9 console.log(result);

Keep in mind that there is an exception:a JavaScript function constructor, by default, returns the invoking object - not the undefined value.

Parameters in the JavaScript function  

It’s important to note that JavaScript  does not:

1. Type Checking of the parameters
2. Check the number of parameters being passed

Essentially you can pass any type of parameter and any number of parameters in a JavaScript function.  Either you can pass fewer parameters than declared or more parameters than declared.

When you invoke a function with less parameters than declared parameters, then additional parameters values are set to undefined. Let’s see this in action.

Here we have a JavaScript function Add which takes two parameters.  However we are passing only one parameter while invoking the function.

 1 function Add(num1, num2) { 2     console.log(arguments.length); 3     console.log(arguments[0]); 4     console.log(arguments[1]); 5     var result = num1 + num2; 6     return result; 7  8 } 9 10 var result =Add(8);11 console.log(result);

As a result, you will see that arguments.length prints 1 and arguments[1] prints undefined.  So you can pass less parameters than declared parameters. Additional parameters will have undefined value.

On the other hand, you can pass more parameters than the declared parameters, and access the additional parameters using the arguments object. There is no way you can refer to additional parameters with  a named argument. You can access it only using the arguments object.

 1 function Add(num1, num2) { 2  3     var result = num1 + num2 + arguments[2]; 4     return result; 5  6 } 7  8 var result =Add(8,9,10); 9 console.log(result);

As output of the above snippet, you will get 27 printed. 

JavaScript functions support variable number of parameters. By default, it will pass undefined for parameters which value is not passed and will simply ignore any additional parameters passed.

Arguments object in the JavaScript function  

When we invoke a JavaScript function along with parameters, the arguments object also gets passed to the function. Let us consider Add function defined below.

 1 function Add(num1, num2) { 2     console.log(arguments.length); 3     return num1 + num2; 4 } 5  6 var result =Add(1,2); 7 console.log(result);

As you notice that inside the Add function, we are printing the length of the arguments. Since we are passing two parameters to the function, 2 will be printed for the length of the arguments object. In JavaScript, the arguments object also gets passed along with the parameters. It allows us to access the parameters with the number rather than the parameters name. Using the arguments object, the Add function can be rewritten as shown below, and it will print the exact output.

 1 function Add(num1, num2) { 2     console.log(arguments.length); 3     return arguments[0] + arguments[1]; 4 } 5  6 var result =Add(1,2); 7 console.log(result);

The arguments is an array-like object, but it is not a JavaScript array. Any JavaScript array operations on the arguments object will throw an exception. For example, the push and pop method will throw an exception. It’ very likely that the code snippet below will throw an exception stating that the object does not have pop() method.

You can use the arguments object to throw an exception when user does not pass the expected number of parameters. Let us say in the add function, you want to throw an exception when the user passes less or more than two parameters while invoking the function. This can be done using the arguments object as listed below:

The arguments object is very useful to fetch additional parameters being passed, and restricted to invoke the function with specified numbers of parameters.

Varargs JavaScript function

Varargs functions are those functions which work on any number of parameters. Using the arguments object, all the passed parameters can be iterated and used. Let us consider the listing shown below. The add function takes a variable number of parameters and returns a summation of all the passed parameters.

 1 function Add(/* pass any number of parameters */) { 2     var sum=0; 3 for(var i =0; i < arguments.length; i++) { 4 sum=sum+ arguments[i]; 5 } 6  7     return sum; 8 } 9 10 var result =Add(7,8,9);11 console.log(result);12 13 var result1 =Add(5,6,78,93,5);14 console.log(result1);

In the Add function, we are passing different set of parameters and using the arguments object adding the passed parameters and returning the summation. The Add function is a varargs JavaScript function.

Summary

In this part of the series, we covered 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 

The concepts we’ve discussed above  are very vital while using JavaScript functions, so stay tuned for the next part of this series, where we will cover invocation patterns, high level functions, and more.