JavaScript Objects

Objects are basic run time entities in an object oriented system. Object is nothing but a class or file with group of functions or methods. Everything in javascript is an object. JavaScript is Object Oriented Programming language. It is special kind of data with properties and methods. They may represent a person, bank account etc. When program is executed, the objects interact by sending messages to one another. For example, customer and account are two objects in banking program, then customer object may send message to the account object requesting for the balance.

All objects in JavaScript are indirectly accessed through variables. It is like reference in Java. All primitive values in JavaScript are accessed directly, these are called value types. A JavaScript object appears both internally and externally as a list of property. The properties are names and the values are data values or functions. Booleans, Numbers, Strings, Dates, Maths and Regular Expressions, Arrays and even functions are objects.

Accessing Object Properties

Object properties are the values associated with an object. Object properties are used internally in the object methods and globally throughout the web page. We can access the property by using dot notation.

The syntax for adding property to object is as follows:

objectName.objectProperty=propertyValue; 

Example:

var str="welcome to JavaBeat";
var a=str.length;

As shown above, under dot notation, property is accessed by using object’s name followed by dot, followed by the property name.

Accessing Object Methods

Methods are the functions that can be performed in the objects. A function contains statements and a method is attached to an object. They can be referenced by this keyword.

We can call method by using syntax as follows:

objectName.methodName ();

Example:

var str="HELLO WORLD";
var a=str.toLowerCase ();

User Defined Objects

We can create object in two different ways:

  • Using new operator.
  • Using object() constructor.

The new operator

It is used to create new instance of a user defined object type. It executes the constructor using newly created object whenever this keyword is mentioned. It returns newly created object, unless the constructor returns non primitive value.

Syntax:

new constructor(arguments);

The following example shows use of new operator:

<html>
<body>

	<script type="text/javascript">
		var stud = new Object(); // creating new instance of the object
		stud.fname = "Mahantesh";
		stud.lname = "Nagathan";

		document.write("First Name : " + stud.fname + "<br>");
		document.write("Last Name  : " + stud.lname);
	</script>

</body>
</html>
  • As shown in above program, we are creating a new instance of the object.
  • Creating two variables called fname and lname which have been initialized with values.
  • W are accessing object properties by using object name with using dot notation.

We will get following output after executing the program:

First Name: Mahantesh
Last Name: Nagathan

Using object constructor()

It is reference to the function that created an object. JavaScript provides Object() to build the object. The variable contains reference to the object. These properties are not defined with var keyword.

Syntax:

object. constructor>

The following example shows use of Object() constructor:

<html>
<body>

<script type="text/javascript">
		function car(company, model, year) {
			this.company = company;
			this.model = model;
			this.year = year;

		}

		var mycar = new car("Mahindra", "Scorpio", 2006);
		document.write("Company Name : " + mycar.company + "<br>");
		document.write("Model Name   : " + mycar.model + "<br>");
		document.write("Year         : " + mycar.year);
	</script>

</body>
</html>
  • In this program, we are creating function called car with passing values as company, model and year.
  • We are referring to current object by using this keyword in the function car().
  • var mycar = new car(“Mahindra”, “Scorpio”, 2006); in this line we are creating new instance of the object by using new keyword as shown in the program and passing values for parameters.
  • We are displaying the all the values using document.write() method.

We will get following output after executing the program:

Company Name: Mahindra <br>
Model Name: Scorpio <br>
Year: 2006

Adding Methods to Objects

The methods are functions which are attached to the objects. The constructor creates the object. We can make use of methods to complete definition of object inside the constructor function.

The following example shows how to use methods to Objects:

<html>
<body>

<script type="text/javascript">
		function addPrice(amount) {
			this.price = amount;

		}

		function car(company, model, year) {
			this.company = company;
			this.model = model;
			this.year = year;
			this.addPrice = addPrice;

		}

		var mycar = new car("Mahindra", "Scorpio", 2006);
		mycar.addPrice(800000);

		document.write("Company Name : " + mycar.company + "<br>");
		document.write("Model Name   : " + mycar.model + "<br>");
		document.write("Year         : " + mycar.year + "<br>");
		document.write("amount is    :" + mycar.price);

	</script>

</body>
</html>
  • In this program, we are creating function called car with passing values as company, model and year.
  • We are referring to current object by using this keyword in the function car().
  • We are using another function called addPrice() which is defined inside the constructor function car() .
  • var mycar = new car(“Mahindra”, “Scorpio”, 2006); in this line we are creating new instance of the object by using new keyword as shown in the program and passing values for parameters.
  • We are displaying the all the values using document.write() method.

We will get following output after executing the program:

Company Name: Mahindra
Model Name: Scorpio
Year: 2006
amount is: 800000

Comments

comments

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Speak Your Mind

*