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.
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.
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:
function functionName( )
{
….code to execute…..
} </script>
<script type="text/javascript"> functionName(); <script>
Example:
<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”;
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:
Syntax:
function
functionName( parameter1 , parameter2 . . . parameter n)
{
some
code to be executed
}
Example:
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.
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.
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();
{ 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.
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 andassign a different function to it at any pointNot 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”
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.
