JavaScript Functions

Functions serve as autonomous and encapsulated code modules, carefully designed to execute well-defined tasks. Each function operates by processing input data through a set of instructions to yield a corresponding output. In order to employ a function, a prior definition within the desired scope is requisite. While many programming languages provide a predefined collection of functions stored in libraries, bespoke functions can also be crafted to fulfill specific objectives. A distinguishing feature of JavaScript functions lies in their status as first-class objects, affording them the capacity to be manipulated akin to any other object within the language's ecosystem.

Function Declaration

A function declaration is constructed using the "function" keyword, succeeded by a designated function name, a series of parameters enclosed within parentheses, and a pair of curly braces "{}" that encapsulate the function's implementation. Notably, function names exhibit sensitivity to case, implying that a function denoted as "doThis()" is distinguishable from "DoThis()" due to their differing letter case.

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 function has the capability to accept multiple parameters, each demarcated by a comma. These parameters, when provided during function invocation, are assimilated within the function's scope, facilitating subsequent manipulation and processing. This enables developers to perform various operations on the received arguments within the function's body.

<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 possess the capacity to yield a value to the invoking code through the utilization of the "return" statement. This mechanism facilitates the transmission of data back to the caller. For instance, consider a scenario where two numbers are passed into a function; the function can be designed to calculate their sum, which is then returned to the calling section of your program for further utilization.

<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 in JavaScript is the inherent behavior where declarations, both variable and function declarations, are lifted to the top of their respective scopes during the compilation phase. This process is orchestrated by the JavaScript interpreter, thereby ensuring that declarations are positioned at the beginning of their enclosing functions or scripts. This means that a JavaScript function can be invoked before its actual declaration in the code. This phenomenon is possible due to the JavaScript engine's automatic hoisting mechanism, which ensures that functions are effectively brought to the top of their scope, allowing them to be accessed and used throughout the program execution.

<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.

Conclusion

JavaScript functions are modular units of code that execute specific tasks and can be invoked by name. They can take parameters, return values, and are defined using the "function" keyword, enabling code reusability and organization. Functions enhance code efficiency and readability by encapsulating logic and enabling separation of concerns.






Related Topics
  1. JavaScript Data Types and Variables
  2. Arrays in JavaScript
  3. JavaScript string
  4. JavaScript If...Else Statements
  1. How to use Loops in Javascript
  2. Global Variables in JavaScript
  3. Working with JavaScript objects
  4. JavaScript Date Formats