1.1 OOP Language

JavaScript is not a full-blown object-oriented programming language, such as Java, but it is designed on a simple object-based model. An object is a construct with properties that contain JavaScript variables or other objects. An object also has functions associated with it that are known as the object's method. You can define your own object in addition to JavaScript core (such as array or math) objects.

Since JavaScript is a loosely-typed, dynamic and expressive language, you may accomplish the same task in various ways.

The JavaScript Object

"Everything" in JavaScript acts like an object such as a String, a Number, an Array, a Function..., with two exceptions, null and undefined.

1.2 Objects

In JavaScript, there are many ways to create objects. You can create an object using an object initializer or write a constructor function to define the object type and create an instance of the object with the new operator. JavaScript's "Object initializer" is consistent with the terminology used by C++.

Syntax

Using an object literal {} notation you can create a plain object like this:

var objectName = {};

or

You can create a new object by defining properties and values :

var objectName = { property1 : value1,
 
                   property2 : value2,
 
                   //...,
 
                   propertyN : valueN };

where

**objectName ** is the Name of the new object.

**property_1, property_2, .....property_n ** is an identifier for either a name, a number, or a string literal.

value1, value2,..,valueN is an expression whose values are identified by property_1, property_2, .....property_n.

This object above may look like JSON and that is because JSON is derived from Javascript objects however, notice that there are no quotations wrapping the keys (property1-n) and there are no quotations warpping the values (value1-n) so it is not valid JSON.

In JavaScript, you can create a new object without creating a class. The object does not belong to any class; it is the only one of its kind. You can use the typeof operator to get the data type of a newly created object.

1.3 Example : Object initializers

The following code creates an object "student" with three properties name, sclass and rollno.

 var student = {
                name : "David Rayy", 
                sclass : "VI", 
                rollno : 12 
               } 

1.4 Using a Constructor function

Here is another way to create an object.

First define the object type by writing a constructor function, then create an instance of the object with new.

(So a constructor is kind of like a Class in a proper Object Oriented Language...)

To write a constructor function, we should maintain the following rules.

  • The constructor function name will be the object type name.
  • In the constructor function, this operator is used to refer to the current object.
  • The properties/methods have their values defined after an equal sign '='.
  • There will be no "return" statement in the constructor function.

1.5 Example of a Constructor function

Here is an example of a constructor function :

function student(name, sclass, rollno)
   {
     this.name = name;
     this.sclass = sclass;
     this.rollno = rollno;
   }

The type of the above object is a student with three properties: name, sclass, and rollno. The values of the object depends on the parameters passed to the function. Lets create an object called studentv as follows :

studentv = new student("John", "V", 10); 

The above statement creates an object called studentv and assigns it the specified values for its properties. Therefore the value of studentv.name is the string "John", studentv.sclass is the string "V" and student.rollno is the integer 10. You can create any number of student objects using new operator. For example -

studentv  = new student("John", "V", 10);
 
studentvi = new student("Scott", "VI", 2);

1.6 Objects and Properties

Properties  are characteristics of the object. A JavaScript object has properties associated with it. For example the document object has a property called fgColor that describes (document.fgColor = "color_name") the background color of that object. The properties of an JavaScript object are basically the same as JavaScript variables except for the attachment of an object name with dot-notation.

In JavaScript, both object name and property name are case sensitive. You can define a property by assigning it a value. Let assume that there is an object called student with three properties: name, sclass, rollno. They are defined as follows :

student.name = "David Rayy";
 
student.sclass = "V";
 
student.rollno = 1 ;

Properties of JavaScript objects can also be set using a square bracket notation. Objects and arrays in JavaScript are closely related, actually they are different interfaces to the same data structure. You can set the properties of the previous student object as follows :

student.["name"] =  "David Rayy";
 
student.["sclass"] =  "V";
 
student.["rollno"] = 1;

The type of this array is known as an associative array as each index element is also associated with a string value.

1.7 Accessing Properties

There are two ways to access the properties of an object, via the

  • dot notation
  • square bracket notation.

Both the notations work identically. The square bracket notation are used to determine the property name when the properties are set dynamically (i.e. property name is not determined until runtime).

var color = {name: 'red'};
 
color.name; // red
 
color['name']; // red
 
var get = 'name';
 
color[get]; // red

1.8 Deleting Properties

The delete operator deletes an object's property. If you set the property to null or undefined it only removes the value associated with the property, but not the key. See the following example :

var obj = {
    property1 : 'value1',
    property2 : 'value2',
    property3 : 'value3'
};
 
obj.property1 = undefined;
 
obj.property2 = null;
 
delete obj.property3;

1.9 JavaScript Objects : Defining Methods

In JavaScript objects' methods run "inside" that object. A method is a function associated with an object. The keys of objects are called properties which are containers for primitive values and other objects.

In the case, where properties contain functions as their values, they are called methods. Methods are defined the way normal functions are defined, except that they have to be assigned as the property of an object. See the following code :

Syntax

  var myObj = {
       ...
       methodName: Myfunction(parameters) 
       {
         statements;
       }
       };  

Where

  • "myObj" is the name of an object.
  • "methodName" is the name of the method.
  • "Myfunction" is the name of the function.

You can call the above method in the following way :

myObj.methodName(parameters);

You can define methods for an object type by including a method definition in the object constructor function. For example, you could define a function that would format and display the properties (i.e. name, class, rollno) of the previously-defined student object; See the following example :

function studentDetails() 
{
alert(
"The name of the student is " + this.name + " Class : " + this.class + " Roll No.: " + this.rollno)
}

where alert() - display the details of a student.

To make this function a method of student object, following code can be used :

this.studentDetails = studentDetails;

Therefore the full definition of student would now look like :

function student(name, class, rollno)
{ 
this.name = name 
this.class = class
this.class = rollno
this.studentDetails = studentDetails
} 

1.10 The Prototype

In our previous section, we have discussed objects as simple pairs of keys and values. But there is an additional attribute in JavaScript object, a pointer to another object which is called the object’s prototype.

  • JavaScript does not support a classical inheritance model, instead, it uses a prototypal one.
  • Every object in JavaScript contains a reference to its prototype
  • The default is object.prototype
  • Strings use String.prototype, etc.
  • A prototype can have a prototype, and so on.
  • An object inherits all property/methods from its prototype(s)

1.11 Deleting Objects

Using delete operator we can remove an object. See the following codes how to remove an object.

myobj= new Array(element1, element2)
 
delete myobj