Functions: Declarations and Expressions

Like any other programming languages JavaScript also provides you to create the function. Creating and using function in program is good habit and good practice because by this methodology we can reuse our code and it’s easy to maintain and program is become more readable.

JavaScript also provides you the functionality to create a function. In JavaScript we can create a function in three ways.

1. Function Declaration.
2. Function Expression.
3. Create a function using the new keyword with Function class.

In JavaScript we can create function using the Function keyword. Here we can not set the return type to our JavaScript function but we can return the any type of value from the function using the return statement.

Syntax:

function MyFunction(arg1, arg2)
{ 
//Code block...
}

Note: Variable created inside the function is can not accessible to the outside of the function.

After creating the function we can call the function with function name and it’s arguments.

MyFunction("JavaScript","Hive");

Example:

function AlertMyMessage(msg) {
    alert(msg + "!!!");
}

AlertMyMessage("Hello world");

Above example will display the alert popup box with our message and extra “!!!” at the end of the message.

Function can also return the any type value using the return statement.

function addition(num1, num2) {
    return num1 + num2;
}

var result = addition(10, 5);

alert(result);

result = addition(10, 10);

alert(result);

If you can not return anything from the function than function return the default value called undefined.

function addition(num1, num2) {
    alert(num1 + num2); // it popup with answer...
}

var result = addition(10, 5);

alert(result); // display popup with undefined message

result = addition(10, 10);

alert(result); // display popup with undefined message

Function Declaration

Function declaration is professional and good practice to declare the function in JavaScript. Experienced developers of JavaScript mostly uses this method to declare the function because it is make code simpler and more readable.

function addition(num1, num2) {
    alert(num1 + num2);
}

addition(10, 5);

Above examples describes you the professional way to declare the function and call the function. You can call the function before the function is declared or after the function is declared. It works fine on the both way.

addition(10, 5);

function addition(num1, num2) {
    alert(num1 + num2);
}            

Function Expression

Like declaring the variable at any point of the JavaScript code we can also declare the function and call the function at any point of the JavaScript code.

In Function Expression we can assign the function to any variable like we assigning the string and numbers to the any variable. After that we can call that function using the that variable name.

var MyFunction = function (msg) {
    alert(msg);
}

MyFunction("Function Expression!!!");

I know it’s look like cool and awesome but it is bad practice to declare the function. It is not professional or not good practice to declare the function like this. It decrease the readability of the code.

function MyFunction(msg) {
    alert(msg);
}

MyFunction("Function Expression!!!");

Above code is looks good and it is good practice to declare the function in the way of function declare methodology in the JavaScript. It increase the readability of the programme.
If you declare the function using the function expression than you can able to assign the function to the another variable.

var MyFunction = function (msg) {
    alert(msg);
}

var fun = MyFunction; // assigning the function to the another variable

fun("Function Expression!!!");

Function Constructor

This is the last way to create the function but most programmer is does not know about this way, most programmer event does not used this way to declare the function and call the function. This way is not useful to us to declare the function because it hard to us to write the long code in the function.

Note: I does not recommended you to use this way.

var myFunction = new Function('msg', 'alert(msg)');

myFunction("Wow, It's worked!!!");

We can also declare the function and run the function at same point. It means this type function does not need to called. It is automatically called when the function block is declared.

(function () {
    alert("Hello world");
})();

Notes:

1. Function declaration are compile or parsed at the stage of pre-execution, when browser prepares the JavaScript code to execute.
2. We can declare the function anywhere in the JavaScript code like we declare the another variable.
3. Function expression methodology create the function when execution flow of program is reach at that code. So this function can be used after they are executed.
4. We does not recommended to use the Function Expression methodology. Please use this methodology when you highly needed it.
5. Both function declaration and function expression are create the function, but the creation time of the function is different in both methodology.

Now it’s your turn to solve this problem and try to understand the flow of the execution of the below function. If you know how the below function is executing, so please comment down your review about it.

function MyFunction(fun) {
    fun("Hello World");
}

MyFunction(function (msg) {
    alert(msg);
})

Happy Coding!!!

🙂