JavaScript Functions

Functions are "self contained" modules of code that accomplish a specific task. It contains instructions used to create the output from its input. To use a function, you must define it somewhere in the scope from which you wish to call it. Most programming languages come with a prewritten set of functions that are kept in a library. You can also write your own functions to perform specialized tasks . Javascript functions are considered as first-class objects, because they can be manipulated like any other object in the language.

Function Declaration

A function declaration is made of function keyword , followed by a function name, a list of parameters and a pair of curly braces {} that delimits the body code. Function names are case sensitive , that is a function name "doThis()" is not same as "DoThis()"
function functionName(parameters) { code to be executed }
The parameter is optional , you can write function without parameters.

Calling JavaScript functions

You can call Javascript functions by simply call the function name.
<html> <head> <script> function greetings() { alert("Good Morning"); } </script> </head> <body> <form> <input type="button" onclick="greetings()" value="Greetings"> </form> </body> </html>
run this source code Browser View

JavaScript Function Parameters

A JavaScript function can take multiple parameters separated by comma. The parameters pass to the function will captured inside the function and any manipulation can be done over those arguments.
<html> <head> <script> function addVal(val1,val2) { var sum = val1+val2; alert("Sum of Values ar : " + sum); } </script> </head> <body> <form> <input type="button" onclick="addVal(10,20)" value="addVal"> </form> </body> </html>
run this source code Browser View

JavaScript Function with Return Value

Javascript functions have the ability to return a value from a function to the code that called it. For example, you can pass two numbers in a function and then you can expect the function to return their sum in your calling program.
<html> <head> <script> function getGreetings(){ var d = new Date(); var time = d.getHours(); var status ; if (time < 12){ status = "Good morning!"; } if (time > 12){ status = "Good afternoon!"; } if (time == 12){ status = "Go eat lunch!!"; } return status; } function greetings(var1) { var status = getGreetings(); alert("Hi " + var1 + " " + status); } </script> </head> <body> <form> <input type="button" onclick="greetings('john')" value="Greetings"> </form> </body> </html>
run this source code Browser View

Function hoisting

Hoisting is JavaScript's default behaviour of moving all declarations to the top of the current scope . Declarations are moved to the top of the current scope by the JavaScript interpreter , meaning the top of the current function or scripts. A JavaScript function can be invoked before its declaration. This works because the JavaScript engine implicitly hoists the function to the top so that they are visible throughout the program.
<script> callMe(); function callMe(){ alert("Called !! "); } </script>

In the example ablve, the function named callMe() is parsed and evaluated before any other code is run.