Web
designing or UI Development is one of the best industry to join if
you love challenges and want to lead a happy life. This industry is
one of the top highly paying industry for youth. JavaScript is the
key language either you are a web designer or UI developer. So,
knowledge of JavaScript matters when you want to make your career
here.
A
function is a group of reusable code which can be called anywhere in
your program. It eliminates the need of writing the same code
repeatedly. It helps in writing modular codes. Mainly JavaScript has
2 types of functions:
-
Built-in
functions:
Already
defined in the JavaScript language, we invoke them again and again.
Examples:
window.alert( ), document.write( ), parseInt( ) etc.
-
User-defined
functions:
Custom
functions defined by user.
Below,
we will see how to define our own user-defined functions.
1. Function
Definition
Before
we use a function, we need to define it.
Syntax:
function
functioName(parameter-list)
{
statements
}
To
define a function in JavaScript, use the function keyword,
followed by a unique function name, a list of
parameters (that can be empty), and a statement
block surrounded by curly braces.
Example:
function
sayHi()
{
Var
x=10;
alert(x);
}
This
example above does not have any parameters.
2. Calling
a Function
To
call a function specify the function name with parenthesis in front
of it in the body section. Similarly, a function can be called inside
another user defined function too.
Syntax:
<script
type="text/javascript">
function
functionName( )
{
…
.code
to execute…..
}
</script>
<script
type="text/javascript">
functionName();
<script>
Example:
<!DOCTYPE
html>
<html>
<head>
<script
type="text/javascript">
function
helloAlert( )
{
alert("Hello
World!");
}
</script>
</head>
<body>
<script
type="text/javascript">
helloAlert();
<script>
</body>
</html>
In
the above example we have defined a function “helloAlert()”,
this function is later called in the body of the code and outputs a
pop up that says “Hello world”;
3. Function
with Parameters/Arguments
When
you call a function, you can pass along some values to it, these
values are called parameters or arguments. Parameters are the
variables we specify when we define the function. When the function
is later called somewhere else in the code, arguments are the values
passed as parameters. We can specify multiple parameters, separated
by commas (,). The parameters then serve as variables that can be
used inside the function.
Syntax:
function
functionName( parameter1 , parameter2 . . . parameter n)
{
some
code to be executed
}
Example:
<script>
function
Hello( user )
{
alert(
"Hello " + user +”!”);
}
</script>
<script>
welcome(
"Rav" );
</script>
In
this example, we define a function named Hello( ) that takes
in one parameter, named user. When the function is called, we
pass the argument "Rav”. The function above when
invoked will display the message box "Hello Rav!" on
the webpage.
4. Functions
with a return Value
Sometimes
you want your function to return a value back to where the call was
made. This can be done by using return statement. When
using return statement, the function returns the specified value.
Return is an optional statement.
Syntax:
function
returningFunc(parameter)
{
Result=
…. Execute code…
return
result;
}
Example:
<html>
<head>
<script
type="text/javascript">
function
concatStrings(first, last)
{
var
full;
full
= first + last;
return
full;
}
function
secondFunction()
{
var
result;
result
= concatStrings (‘raveen’, ‘anand’);
document.write(result
);
}
</script>
</head>
Try
above example we defined a function that takes two parameters and
concatenates them before returning the resultant in the calling
program.
5. Nested
Functions
JavaScript
allows function definitions to be nested within other functions as
well. Still there is a restriction that function definitions may not
appear within loops or conditionals. These restrictions on function
definitions apply only to function declarations with the function
statement.
-
Scope
of the nested function is limited to its parent function
-
The
inner functions can access its parent variables but not otherwise.
Syntax:
function outerFunction()
{
var
a, d, e;
function
innerFunction()
{
var
f;
}
innerFunction
();
}
OuterFunction();
Example:
function
hypotenuse(a, b)
{
function
square(x)
{
return
x*x;
}
return
Math.sqrt(square(a) + square(b));
}
hypotenuse(1,2);
In
the above example we are calculating the hypotenuse of 2 numbers.
Formula
for hypotenuse is , here we calculate the square of the numbers in a
nested function “square” which tales a number as input and
returns its square.
6. Anonymous Functions
anonymous function is a function that is declared without any name.
These functions can be assigned to variables when they are created,
which gives the same capabilities as using a name within the function
head. One common use for anonymous functions is as arguments to other
functions.
Example:
var
anon = function() {
alert('I
am anonymous');
}
anon();
Differences
between creating a named function and an anonymous function :
An
anonymous function assigned to a variable only exists and
can only be called after the program executes the assignment.
|
Named
functions can be accessed anywhere in a program.
|
Can
change the value of a variable and
assign
a different function to it at any point
|
Not
flexible-fixed name
|
Self-executing
anonymous functions or IIFE
Another
use for anonymous functions is as self-executing functions. A
self-executing anonymous function is a function that
executes as soon as it’s created. To turn a
normal anonymous function into a self-executing function, you
wrap the anonymous function in parentheses and add a set of
parentheses and a semicolon after it.
The
benefit of using self-executing anonymous functions is that the
variables you create inside of them are destroyed when the
function exits. In this way, you can avoid conflicts between
variable names, and you avoid holding variables in memory after
they’re no longer needed.
var
myVariable = "I live outside the function.";
(function()
{
var
myVariable = "I live in this anonymous function";
document.write(myVariable);
})();
document.write(myVariable);
In
the example above, we have a variable myVariable declared globally.
We have an anonymous self-executing function using the same variable
name. The output of this is
“I
live in this anonymous function. I live outside the function”
7. Functions
as Closures in JavaScript
A
closure is the local variable for a function, kept alive after the
function has returned. It is a function having access to the parent
scope, even after the parent function has closed. An inner function
is defined within an outer function. When the outer function returns
a reference to the inner function, the returned reference can still
access the local data from the outer function.
function
greetVisitor(phrase) {
var
welcome = phrase + "Folks!"; // Local variable
var
sayWelcome = function() {
alert(welcome);
}
return
sayWelcome;
}
var
personalGreeting = greetVisitor('Hi');
personalGreeting();
// alerts "Hi Folks!"
Conclusion
is that functions in JavaScript are must to know as they are the
building blocks in it for a web designer. There are many types of
functions, you will understand their importance as you will use them
in your JavaScript courses. You can learn it separately from any
training center or you can join a complete course in web designing
from a reputed web designing institute.
