How to define and use function in JavaScript
Define function in JavaScript
In this article we will learn different styles to declare function
and use in JavaScript application. As we know that JavaScript is object
oriented programming language and everything in JavaScript is object. So, function is also
one type of object in JavaScript.
The function declaration in JavaScript is little different from
C family programming language. The definition starts with “function” keyword.
Try to understand below function declaration.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
</head>
<body>
<form id="form1" runat="server">
<script>
function fun() {
alert("Simple Function call");
}
fun();
</script>
</form>
</body>
</html>
The declaration is very simple, just we have to use function
name followed by “function” keyword. And after definition of function, we are
calling it by function name(fun()) .This calling mechanism is very similar with
C family language. Here is sample output.
Here is another style
to define function
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
</head>
<body>
<form id="form1" runat="server">
<script>
var val = function fun() {
alert("This is another function");
}
val();
</script>
</form>
</body>
</html>
In this style of definition we have created function and
attached it to variable(val) . Now, using the variable we can access this
function. We are seeing that we are calling the function by using val() and the
function is getting executed.
This is the output of above program.
Use function like class
We know that JavaScript is class less language. Means there
is no concept of class in JavaScript. But we can implement the effect of class
using function. We can declare property and another function within function.
Try to understand below example.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
</head>
<body>
<form id="form1" runat="server">
<script>
function person() {
this.name = "Sourav";
this.surname = "Kayal";
this.printInfo = function(){
alert("Name:- " + this.name + "Surname:- " + this.surname);
}
}
var p = new person();
p.printInfo();
</script>
</form>
</body>
</html>
In this example we have implemented class type using function.
Here person class(read function) contains two properties and one method. The
properties are name and surname and the method is printInfo. We are seeing that
the method has created on fly.
In next line we are creating object of “person” class using
new operator and after that we are calling to printInfo() function using object
of “person” function or class.
Here is output of above example.
Pass value to function as parameter.
If we want to pass value to function (or implemented class)
we can do it in object creation time of function. Here is sample example.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JavaScript.aspx.cs" Inherits="JavaScript.JavaScript" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
</head>
<body>
<form id="form1" runat="server">
<script>
function Book(name,author) {
this.name = name;
this.author = author;
this.printInfo = function(){
alert("Book Name:- " + this.name + " Autor:- " + this.author);
}
}
var p = new Book("JavaScript Basic", "Sourav Kayal");
p.printInfo();
</script>
</form>
</body>
</html>
In this example we are passing value to function in time of
object creation and within function we are accessing them using “this” operator
which always point current object.
Conclusion:-
In this article we have seen how to implement and use function in
JavaScript in various ways. Hope you have understood the concept. In coming article
we will learn more about JavaScript.