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.
Example
Try Now
Output
Try Now
Output
Example
Try Now
Function with return value
Call function that return value and use it in program.
Try Now
Output
Example
Try Now
Example
Try Now
Advantages of JavaScript functions
- Code reusability: We call function multiple time to save time as well as coding also.
- Less coding: It make our program compressed. We don't write many lines of code each time to perform common task.
function functionName(parameter or not)
{
statements
}
<!DOCTYPE html>
<html>
<body>
<script>
function msg()
{
alert("Hello! world");
}
</script>
<input type="button" onclick="msg()" value="click here"/>
</body>
</html>
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>
27
<!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>
<!DOCTYPE html>
<html>
<body>
<script>
function getInfo()
{
return "Hello Raj! How are you?";
}
</script>
<script>
document.write(getInfo());
</script>
</body>
</html>
Hello Raj! How are you?
The Function() Constructor
A 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>
<!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>
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>
<!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>