Header Ads Widget

JavaScript function

My codding spot January 29, 2022

 In this post we will see about JavaScript custom (user-defined) function.


What is function in JavaScript?

The JavaScript function is a block of code or set of statements that performs some special task. 
JavaScript function
JavaScript function 




When you want to repeat same code many times define function at once and use that function many times as you need. 

There are some advantages of functions.

1. Function divides a big problem into small pieces which reduced complexity.
2. Reduce redundancy. Function prevent you to write same code multiple times.
3. Code reusability. Defines function at once and call many times.

How to declare function in JavaScript?

Function declaration start with the function keyword followed by name of function, and in last followed by parenthesis ().

Syntax

function name(parameter-1, parameter-2,.. parameter-n)
{
//Code block
}

Rule for function name

Function name includes letter, digit, underscore and dollar sign. (similar as variable naming rule)

What is function parameter and function argument?

Function parameter

Function parameters are name that is define at time of function definition.

For example,

function demo(a);

Here a is called parameter demo function.

Function argument

Function arguments are the value passed to the function at time of function call.

For example,

demo(5);

Note:

You can declare function with or without parameter.
JavaScript function do not define data type of parameter.
JavaScript  functions do not check for passing argument and how many arguments received by function.

Calling / invoking function

Function code can’t be executed without function invocation. Most commonly it is called function calling.

Syntax

function_name(argument 1,…argument n);
Or
function_name();

Let’s understand function with examples.

Example 1
Function declaration without parameter.


<!DOCTYPE html>
<html>
<head>
<title>function without parameter</title>
</head>
<body>
<script>
function hello()
{
 document.write("hello javascript","<br>");
}
hello(); 
</script>
</body>
</html>

The function hello display "hello JavaScript" message.

Output:

Javascript functions without parameter
JavaScript function without parameter


Example 2

Function declaration with parameter.

<!DOCTYPE html>
<html>
<head>
<title>function with parameter</title>
</head>
<body>
<script>
function hello(name)
{
 document.write("hello ",name,"<br>");
}
hello("maya"); 
hello("tanya");
hello();
</script>
</body>
</html>

In second example function hello defines with ‘name’ parameter and different arguments. One function call is with null argument.

Output:
Javascript functions with parameter
JavaScript function with parameter

You can call function as many times you want. 
Argument passed to a function is value of parameter. If no argument is passed ‘undefined' message display in output.

The return statement of function

A return statement in function returns value when function invoked. 

When execution of function reaches return statement it will stop the execution of later statements, means it ends up function.

Example 3

Function ‘sqr’ returns square of value passed to a function call.

<!DOCTYPE html>
<html>
<head>
<title>function return value</title>
</head>
<body>
<script>
function sqr(x)
{
  return x*x;
}
ans=sqr(14);
document.write("square is:- ",ans,"<br>");
document.write("square is:- ",sqr(7));
</script>
</body>
</html>

Output:
The return statement of JavaScript
The return statement of JavaScript function 


Example 4

In following example function radius returns radius of circle if function call with argument and if function call without argument returns zero.

<!DOCTYPE html>
<html>
<head>
<title>Radius of circle</title>
</head>
<body>
<script>
function radius(c)
{
  if(!c)
  {
   return 0;
  }
  else
  {
  return c/2*3.14;
  }
}
document.write("radius of circle: ",radius(),"<br>");
document.write("radius of circle: ",radius(5));
</script>
</body>
</html>

First function call without argument and second time with argument.

The return statement
The return statement 

Function expression

The another method for defining function is function expression. 
The function expression is stored in variable. The function expression don’t have name so it is called anonymous function. 

Syntax for function expression

var/let/const name=function (parameter 1, parameter 2,..){//code to be executed.};

Function expression invoked using variable name.


var/let/const name= name  of var/let/const where function defines(argument 1, argument 2,..);

Following example shows how to define function expression.


<!Doctype html>
<html>
<head>
<title>Function Expression</title>
</head>
<body>
<h3>volume of rectangle</h3>
<script>
var c=function (l,w,h)
{
      return l*w*h;
};
var d=c(5,9,4);
document.write("volume of rectangle= ",d,"<br>");
document.write("volume of rectangle= ",c(6,8,5));
</script>
</body>
</html>

The function returns volume of rectangle of passed values.(l=length, w=width, h=height).

Function expression
Function expression


Summary

In this post we learnt about defining function using 2 ways. First method is common method of defining function and in second method function definition stored in variable.
When using first method always define function with function keyword and call with function name. 
Specify return statement when you want explicitly return value by function.
Using function expression specify semicolon after ending function definition.

Tags:
My codding spot

Posted by: My codding spot

Post a Comment

0 Comments