Javascript Function Objects - Properties and Methods

Last update on August 19 2022 21:51:08 (UTC/GMT +8 hours)

Description

JavaScript function objects are used to define a piece of JavaScript code. This code can be called within a JavaScript code as and when required.

Can be created by function constructor.

Code defined by a function can be called by function().

Javascript Function Objects Property

Name	Description	Version
arguments	An array corresponding to the arguments passed to a function.	Implemented in JavaScript 1.1
arguments.callee	Refers the currently executing function.	Implemented in JavaScript 1.1
arguments.length	Refers the number of arguments defined for a function.	Implemented in JavaScript 1.1
constructor	Specifies the function that creates an object.	Implemented in JavaScript 1.1
length	The number of arguments defined by the function.	Implemented in JavaScript 1.1
prototype	Allows adding properties to a Function object.	Implemented in JavaScript 1.1

Javascript Function Objects Methods

Name	Description	Version
call	Permit to call a method of another object in the context of a different object (the calling object).	Implemented in JavaScript 1.1
toSource	Returns the source code of the function.	Implemented in JavaScript 1.1
toString	Returns a string representing the source code of the function.	Implemented in JavaScript 1.1
valueOf	Returns a string representing the source code of the function.	Implemented in JavaScript 1.1

JavaScript arguments Property : Function Object

The arguments array is a local variable available within all function objects as function's arguments; arguments as a property of a function is no longer used.
This array contains an entry for each argument passed to the function.

For example, if a function passes three arguments, you can refer to the arguments as follows :
arguments[0]
arguments[1]
arguments[2]

The arguments array can also be declared with a function name :
myfunc.arguments[0]
myfunc.arguments[1]
myfunc.arguments[2]
Where myfunc is the name of the function.

The arguments array is available only within a function body. Attempting to access the arguments array outside a function declaration results in an error.

You can use the arguments array if you call a function with more arguments than it is formally declared to accept. This technique is useful for functions that can pass a variable number of arguments. You can use arguments.length to determine the number of arguments passed to the function, and then process each argument by using the arguments array.

The arguments array has three properties : arguments.callee, arguments.caller, arguments.length.

Note : arguments.caller property specifies the name of the function that invoked the currently executing function. The property is deprecated.

JavaScript arguments.callee Property : Function Object

The arguments.callee property refers the currently executing function. It is available only within the body of a function.

Syntax

arguments.callee

Example:

In the following web document arguments.callee property is used to calculate the factorial of a number calling the factorial() function.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>JavaScript Function object - arguments.callee property example</title>
</head>
<body>
<h1 style="color: red">JavaScript Function object : arguments.callee property</h1>
<hr />
<script type="text/javascript">
//This is done to make the following JavaScript code compatible to XHTML. <![CDATA[
function factorial(n){
if (n <= 0)
return 1;
else
return arguments.callee(n - 1)
}
document.write(factorial(4));
//]]>
</script>
</body>
</html>

View the example in the browser

Supported Browser

Internet Explorer 7	Firefox 3.6	Google Chrome 7	Safari 5.0.1	Opera 10
Yes	Yes	Yes	Yes	Yes

JavaScript arguments.length Property : Function Object

The arguments.length specifies the number of arguments defined for a function.

Syntax

arguments.length

Example of Function Object: arguments.length Property

The following web document demonstrates the use of arguments.length property.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>JavaScript Function object - arguments.length property example</title>
</head>
<body>
<h1 style="color: red">JavaScript Function object : arguments.length property</h1>
<hr />
<script type="text/javascript">
//This is done to make the following JavaScript code compatible to XHTML. <![CDATA[
function rglength(x,y,z)
{
return ;
}
alert('No. of arguments passed in the function : '+rglength.length)
//]]>
</script>
</body>
</html>

View the example in the browser

Supported Browser

Internet Explorer 7	Firefox 3.6	Google Chrome 7	Safari 5.0.1	Opera 10
Yes	Yes	Yes	Yes	Yes

JavaScript constructor Property : Function Object

The constructor property specifies the function that creates an object.

Syntax

constructor

Usage

MyFunction.constructor

MyFunction: The name of the function (Required).

Example:

The following web document shows how the constructor property is used.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>JavaScript Function object - constructor property example</title>
</head>
<body>
<h1 style="color: red">JavaScript Function object : constructor property</h1>
<hr />
<script type="text/javascript">
//This is done to make the following JavaScript code compatible to XHTML. <![CDATA[
myfunction = new Function("Orange", "Apple", "Banana");
document.write("The object is constructed from : "+myfunction.constructor); 
//]]>
</script>
</body>
</html>

View the example in the browser

Supported Browser

Internet Explorer 7	Firefox 3.6	Google Chrome 7	Safari 5.0.1	Opera 10
Yes	Yes	Yes	Yes	Yes

JavaScript length Property : Function Object

The length property specifies the number of arguments defined by the function.

Syntax

length

Usage

MyFunction.length

MyFunction: The name of the function (Required).

Example:

The following web document shows how the length property is used.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>JavaScript Function object - length property example</title>
</head>
<body>
<h1 style="color: red">JavaScript Function object : length property</h1>
<hr />
<script type="text/javascript">
//This is done to make the following JavaScript code compatible to XHTML. <![CDATA[
function rglength(x,y,z)
{
return ;
}
alert('No. of arguments passed in the function : '+rglength.length)
//]]>
</script>
</body>
</html>

View the example in the browser

JavaScript Prototype Property: Function Object

Prototype is used to add new properties and methods to an object.

Syntax

myobj.prototype.name = value

myobj: The name of the constructor function object you want to change.

name: The name of the property or method to be created.

value: The value initially assigned to the new property or method.

If you add a property to the prototype for an object, then all objects created with that object's constructor function will have that new property, even if the object existed before you created the new property.

Example:

In the following web document, a method has been added which returns the full name of a person.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>JavaScript Function object - prototype  property example</title>
<script type="text/javascript">
//This is done to make the following JavaScript code compatible to XHTML. <![CDATA[
function my_name(first_name, last_name)
{
this.first_name = first_name;
this.last_name  = last_name;
}
function full_name()
{
final_name = this.first_name +'   ' + this.last_name
return  final_name;
}
//]]>
</script>
</head>
<body>
<h1 style="color: red">JavaScript Function object : prototype  property</h1>
<hr />
<script type="text/javascript">
//This is done to make the following JavaScript code compatible to XHTML. <![CDATA[
my_name.prototype.fullname = full_name;
var a = new my_name("David", "Rayy");
var b = a.fullname( );
document.write("Name : "+b); 
//]]>
</script>
</body>
</html>

View the example in the browser

JavaScript call() Method : Function Object

The call() method of the function object is used to call (execute) another object’s method.

Syntax

Call(this, arg1, agr2, arg3.............)

Parameter

this : Parameter for the calling object.

arg1, arg2, ...Arguments for the object

Example:

The following web document demonstrates how the call() method can be used.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>JavaScript Function object - call method example</title>
</head>
<body>
<h1 style="color: red">JavaScript Function object : call method</h1>
<hr />
<script type="text/javascript">
//This is done to make the following JavaScript code compatible to XHTML. <![CDATA[
// Create a student object.
function student(class, name)
{
this.name = name;
this.class = true;
}
// Create a class object
function class(name, rollno)
{
this.rollno = rollno;
student.call(this, name);
}
class.prototype = new student()
// Creates a new student
student1 = new class("David", 2);
//]]>
</script>
</body>
</html>

Supported Browser

Internet Explorer 7	Firefox 3.6	Google Chrome 7	Safari 5.0.1	Opera 10
Yes	Yes	Yes	Yes	Yes

JavaScript toSource() Method: Function Object

The toSource() method returns a string which represents the source code for the function.

Syntax

toSource()

Parameter

None

Example:

In the following web document toSource() method returns the source code of the function employee.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>JavaScript Function object - toSource() method example</title>
</head>
<body>
<h1 style="color: red">JavaScript Function object : toSource() method</h1>
<hr />
<script type="text/javascript">
//This is done to make the following JavaScript code compatible to XHTML. <![CDATA[
function employee(name,qualification,bornyear)
{
this.name = name;
this.qualification = qualification;
this.bornyear = bornyear;
}
var emp=new employee("Arvind Murthy", "Master Degree", 1980);
document.write(emp.toSource());
//]]>
</script>
</body>
</html>

View the example in the browser

Supported Browser

Internet Explorer 7	Firefox 3.6	Google Chrome 7	Safari 5.0.1	Opera 10
Yes	Yes	Yes	Yes	Yes

JavaScript toString() Method: Function Object

The toString() method returns a string which represents the source code for the function.

Syntax

toString()

Parameter

None

Example:

In the following web document toString() method returns a string which represents the source code of the function Test().

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>JavaScript Function object - toString() method example</title>
</head>
<body>
<h1 style="color: red">JavaScript Function object : toString() method</h1>
<hr />
<script type="text/javascript">
//This is done to make the following JavaScript code compatible to XHTML. <![CDATA[
function Test()
{
var x;
var y;
document.write('www.w3resource.com');
}
var newfunc = Test.toString();
document.write("The source code of the function : "+newfunc );
//]]>
</script>
</body>
</html>

View the example in the browser

Supported Browser

Internet Explorer 7	Firefox 3.6	Google Chrome 7	Safari 5.0.1	Opera 10
Yes	Yes	Yes	Yes	Yes

JavaScript valueOf() Method: Function Object

The valueOf() method returns a string representing the source code of the function.

Syntax

valueOf()

Parameter

None

Example:

The following web document demonstrates the use of the valueOf() method.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>JavaScript Function object - valueOf() method example</title>
</head>
<body>
<h1 style="color: red">JavaScript Function object : valueOf() method</h1>
<hr />
<script type="text/javascript">
//This is done to make the following JavaScript code compatible to XHTML. <![CDATA[
document.write("Returned value from calling valueOf() on " +
"the Test function." + "<br><br>");
document.write( "<b>" + Test() );
function Test()
{
var x;
var y;
return (Test.valueOf() );
}
//]]>
</script>
</body>
</html>

View the example in the browser

Supported Browser

Internet Explorer 7	Firefox 3.6	Google Chrome 7	Safari 5.0.1	Opera 10
Yes	Yes	Yes	Yes	Yes

Online Practice Editor

See the Pen javascript-common-editor by w3resource (@w3resource) on CodePen.

Previous: JavaScript valueOf() Method: Date Object
Next: Javascript Math Objects - Properties and Methods