Define function in JavaScript

Sourav.Kayal
Posted by in JavaScript category on for Beginner level | Points: 250 | Views : 1753 red flag
Rating: 5 out of 5  
 1 vote(s)

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.


Page copy protected against web site content infringement by Copyscape

About the Author

Sourav.Kayal
Full Name: Sourav Kayal
Member Level: Silver
Member Status: Member,MVP
Member Since: 6/20/2013 2:09:01 AM
Country: India
Read my blog here http://ctrlcvprogrammer.blogspot.in/
http://www.dotnetfunda.com
I am .NET developer working for HelixDNA Technologies,Bangalore in healthcare domain. Like to learn new technology and programming language. Currently working in ASP.NET ,C# and other microsoft technologies.

Login to vote for this post.

Comments or Responses

Posted by: Sheonarayan on: 11/11/2013 | Points: 25
Great, there is something to learn even for experienced person from this article. Great exploration of JavaScript functions.

5 from me.

Login to post response

Comment using Facebook(Author doesn't get notification)