JavaScript Function

An important part of JavaScript is the ability to create new functions within <script>.....</script> tag. To declare a function in JavaScript using function keyword. We call JavaScript function multiple times to reuse the code.

Advantages of JavaScript functions

  1. Code reusability: We call function multiple time to save time as well as coding also.
  2. Less coding: It make our program compressed. We don't write many lines of code each time to perform common task.
Syntax
function functionName(parameter or not)  
{  
statements  
}
Example
<!DOCTYPE html>  
<html>  
<body>  
<script>  
function msg()  
{  
alert("Hello! world");  
}  
</script>  
<input type="button" onclick="msg()" value="click here"/>  
</body>  
</html>
Try Now Output
Hello world! 

Function with arguments

Call function by passing arguments.
<!DOCTYPE html>  
<html>  
<body>  
<script>  
function getcube(number)  
{  
alert(number* number* number);  
}  
</script>  
<form>  
<input type="button" value="click" onclick="getcube(3)"/>  
</form>  
</body>  
</html>
Try Now Output
27
Example
<!DOCTYPE html>  
<html>  
<body>  
<script>  
function getname()  
{  
name=prompt("Enter the Name");  
alert("Welcome Mr/Mrs " + name);  
}  
</script>  
</body>  
<form>  
<input type="button" value="Click" onclick="getname()"/>  
</form>  
</html>
Try Now Function with return value Call function that return value and use it in program.
<!DOCTYPE html>  
<html>  
<body>  
<script>  
function getInfo()  
{  
return "Hello Raj! How are you?";  
}  
</script>  
<script>  
document.write(getInfo());  
</script>  
</body>  
</html>
Try Now Output
Hello Raj! How are you?

The Function() Constructor

function statement is not only the method to define new function, we can define function dynamically using Function() constructor along with new operator also. Syntax
<script>  
    var variablename = new Function(Arg1, Arg2...,  "Function Body" );   
</script>
Example
<!DOCTYPE html>  
<html>  
<head>  
<script>  
var func = new Function("a", "b", "return a+b;");  
function secondFunction(){  
var result;  
result = func(50,50);  
document.write ( result );  
}  
</script>  
</head>  
<body>  
<p>Click button to call the function</p>  
<form>  
<input type="button" onclick="secondFunction()" value="Call Function">  
</form>  
<p>Use different parameters inside the function and try yourself...</p>  
</body>  
</html>
Try Now

Function Literals

JavaScript 1.2 introduces the concept of function literals which is another method to define functions. It is an expression that defines an unnamed function. The syntax for function literal is like function statement, except it is used as an expression rather than a statement and no function name is required. Syntax
<script>  
var variablename = function (Argument List){  
          Function Body  
};    
</script>
Example
<!DOCTYPE html>  
<html>  
<head>  
<script>  
var func = function(a,b){ return a+b };  
function secondFunction(){  
var result;  
result = func(10,20);  
document.write ( result );  
}  
</script>  
</head>  
<body>  
<p>Click the button to call the function</p>  
<form>  
<input type="button" onclick="secondFunction()" value="Call Function">  
</form>  
<p>Use different parameters inside the function and try yourself...</p>  
</body>  
</html>
Try Now



ADVERTISEMENT
ADVERTISEMENT