Function
A function is a group of reusable code which can be called anywhere in
your program.This eliminates the need of writing same code again
and again.
Syntax:
<script type="text/javascript">
function functionname(parameter-list)
{
statements
}
</script>
<html>
<head>
<script type="text/javascript">
Function myfun()
{
document.write("Helloworld ");
}
</script>
</head>
<body>
<script>
myfun()
</script>
</body>
</html>
Function With Parameter
When you call a function, you can pass along some values to it, these
values are called arguments or parameters.
These arguments can be used inside the function.
Declare the argument, as variables, when you declare the function:
functionmyFunction(var1,var2)
{
some code
}
Write program for addition of two number
<html>
<head>
<script type="text/javascript">
function sum(a,b)
{
var a=20;
var b=30;
var c;
c=a+b;
document.write("The Addition of two
}
number = "+c);
</script>
</head>
<body>
<script>
sum()
</script>
</body>
</html>
Write program for multiplication of two number
<html>
<head>
<script type="text/javascript">
function mul(a,b)
{
var a=20;
var b=30;
var c;
c=a*b;
document.write("The Addition of two
}
number = "+c);
</script>
</head>
<body>
<script>
mul()
</script>
</body>
</html>
Write program for square
<html>
<head>
<script type="text/javascript">
function square(n)
{
c=n*n;
}
</script>
</head>
<body>
<script>
var a=2;
square(a);
document.write("The Addition of two
</script>
</body>
</html>
number = "+c);
Write program for swapping of two number
<html>
<head>
<script type="text/javascript">
function swap(x,y)
{
var temp;
temp=x;
x=y;
y=temp;
document.write("After swapping a and b="+x+"
"+y);
}
</script>
</head>
<body>
<script>
var a=10;
var b=30;
document.write("Before swapping a and b = "+a+"
"+b);
document.write("<br/>");
swap(a,b);
</script>
</body>
</html>
Return Statement
function to return a value back to where the call was made. This is
possible by using the return statement.
Syntax:
var x=5;
return x;
<html>
<head>
<script type="text/javascript">
function mul(x,y)
{
return x*y;
}
</script>
</head>
<body>
<script>
var a=20;
var b=30;
var c;
c=mul(a,b);
document.write("The result is"+c);
</script>
</body>
</html>
<html>
<head>
<script type="text/javascript">
function sum(x,y)
{
return x+y;
}
</script>
</head>
<body>
<script>
var a=20;
var b=30;
var c;
c=sum(a,b);
document.write("The result is"+c);
</script>
</body>
</html>
Local Variable and Global Variable
Local Variable
A variable that is declared inside a function definition is called local and
has scope to that function only.
<html>
<head>
<script type="text/javascript">
function disp()
{
var x="Helloworld";
document.write(x);
}
disp();
document.write("<br/>"+x);
</script>
</head>
</html>
Global Variable
A variable that is declared outside of a function definition is called a
global variable and its scope is throughout your program means its
value is accessible and modifiable throughout your program.
<html>
<head>
<script type="text/javascript">
var x="Helloworld";
function disp()
{
document.write(x);
}
disp();
document.write("<br/>"+x);
</script>
</head>
</html>
Default Parameter
A JavaScript function can have default parameter values. Using default
function parameters, you can initialize formal parameters with
default values. If you do not initialize a parameter with some value,
then the default value of the parameter is undefined.
Syntax:
Function functionname(para1,para2,para3=value)
{
statement
}
<html lang="en">
<head>
<title></title>
<script type="text/javascript">
function myfun(a,b,c=40)
{
document.write(a+"<br/>"+
b+"<br/>"+c)
}
myfun(20,30)
</script>
</head>
</body>
</body>
</html>
<html lang="en">
<head>
<title></title>
<script type="text/javascript">
function myfun(a,b,c=40)
{
document.write(a+"<br/>"+
b+"<br/>"+c)
}
myfun(20,30,60)
</script>
</head>
</body>
</body>
</html>
<html lang="en">
<head>
<title></title>
<script type="text/javascript">
function myfun(a,b=40,c)
{
document.write(a+"<br/>"+
b+"<br/>"+c)
}
myfun(20,30)
</script>
</head>
</body>
</body>
</html>
<html lang="en">
<head>
<title></title>
<script type="text/javascript">
function myfun(a,b=40,c=60)
{
document.write(a+"<br/>"+
b+"<br/>"+c)
}
myfun(20,30)
</script>
</head>
</body>
</body>
</html>
Rest Parameter
The rest parameter allows us to represent an indefinite number of
arguments as an array.
<html>
<body>
<script type="text/javascript">
function show (a,...str)
{
document.write(a+"<br/>"+str)
}
show(10,20,30,40,50)
</script>
</body>
</html>
<html>
<body>
<script type="text/javascript">
function show (a,...str)
{
document.write(a+"<br/>"+str[2])
}
show(10,20,30,40,50)
</script>
</body>
</html>
Function Expression
When we create a function and assign it to a variable known as
function expression .
Syntax:
Var variable name= function functionname()
{
Statement;
}
Variablename()
Without function Expression
<html>
<script type="text/javascript">
myfun()
function myfun()
{
document.write("welcome");
}
</script>
<body>
</body>
</html>
With function Expression
<html>
<script type="text/javascript">
var fun=function myfun()
{
document.write("welcome");
}
fun()
</script>
<body>
<html>
<script type="text/javascript">
fun()
var fun=function myfun()
{
document.write("welcome");
}
</script>
<body>
</body>
Anonymous Function
When a function is defined without a name, it's known as an anonymous
function. The function is stored in memory, but the runtime doesn't
automatically create a reference.
Syntax:
function() {
// ...
}
<html>
<script type="text/javascript">
var fun=function ()
{
document.write("welcome");
}
fun();
</script>
<body>
</body>
</html>
Closure
Closure means that an inner function always has access to the
vars and parameters of its outer function, even after the outer
function has returned.
<html>
<head>
<script type="text/javascript">
function outerfun()
{
var a=20;
document.write(a+"<br/>");
function innerfun()
{
var b=40;
document.write(a+"<br/>");
document.write(b+"<br/>");
}
innerfun()
}
outerfun()
</script>
</head>
</html>
Arrow Function
Arrow Function expression has a shorter syntax compare to
function expression. arrow function are always anonymous .
Syntax:
()=>{statement};
<html>
<head>
<script type="text/javascript">
var a= function()
{
document.write("welcome");
}
a();
</script>
</head>
</html>
<html>
<head>
<script type="text/javascript">
var a= ()=>{
document.write("welcome");
}
a();
</script>
</head>
</html>
Arrow function with parameter
<html>
<head>
<script type="text/javascript">
var a=(str)=>{
document.write(str);
}
a("smith");
</script>
</head>
</html>
<html>
<head>
<script type="text/javascript">
var sum=(a,b)=>{
var c=a+b;
document.write(c);
}
sum(30,40);
</script>
</head>
</html>
Callback function
A callback function is a function passed into another function as
an argument.
<html>
<head>
<script type="text/javascript">
function greeting(name) {
alert('Hello ' + name);
}
function processUserInput(callback) {
var name = prompt('Please enter your name.');
callback(name);
}
processUserInput(greeting);
</script>
</head>
</html>
