JavaScript Object

JavaScript Object are represented as two different faces,

  • First is Object used as essentially associative arrays, create for mapping between keys and value pairs.
  • Second is Object is concept of object-oriented programming. In this lesson we'll learn both faces.

What is Object?
An object is an abstract data type which refers to a location in memory with the addition of nested object, inheritance, encapsulation, and polymorphism.

Nested object: Object is capable to store object where one object contains another object.

Inheritance: Object is capable to based on another object (parent/super object). You can access properties and methods from inherited object.

Encapsulation: Object is capable to store related data and methods into a single component.

Polymorphism: Object is capable to access/represents differently depending on their data types. It's having an ability to redefine methods for deriving objects.

JavaScript Object

Creating object

An empty object, we can also say the empty associative array is create following two different syntax's,

var myObj = new Object();
var myObj = { }               // both are same

Assigning object

You can store data by keys and value pairs. We can use "dot" property notation for assigning, accessing, and deleting Object values.

var myObj = {};           // indicates an object is created
myObj.commercial = ".com";
myObj.network= ".net";
myObj.organization= ".org";
myObj.government= ".gov";

You can also assign values to multiple properties at the time of creating an object { key1: value1, key2: value2, ... }.

var myObj = {
    "commercial": ".com",
    "network": ".net",
    "organization": ".org",
    "government": ".gov"
};

Accessing object

You can use either square brackets or dot notation to access object properties.

var myObj = {};                    // indicates an Object is created
myObj.commercial = ".com";
myObj.network= ".net";
myObj.organization= ".org";
myObj.government= ".gov";

document.writeln("commercial domain: " + myObj['commercial']);   // Outputs .com
document.writeln("commercial domain: " + myObj.commercial);      // Outputs .com

Run it...   »

Deleting object

delete statement is preferable for removing properties,

delete myObj.commercial;         // delete value by 'commercial' key

Run it...   »

Creating Nested Objects

You can store objects, where one object contains another object.

var myObj = {
    "commercial": ".com",
    "network": ".net",
    "country_domains": {   // Nested Object - store country domains that are registered first.
        "usa": ".us",
        "uk": ".uk",
        "israel": ".il",
        "australia": ".au"
    },
    "organization": ".org",
    "government": ".gov"
}; 

document.writeln("commercial domain: " + myObj.commercial);              // Outputs .com
document.writeln("israel domain: " + myObj.country_domains.israel);      // Outputs .il

Run it...   »

for..in loop to Iterate an Object

JavaScript for.. in statement used to iterate over the key-value pairs.

var myObj = {
    "commercial": ".com",
    "network": ".net",
    "organization": ".org",
    "government": ".gov"
};

for(key in myObj){
    document.writeln(key + " domain : " + myObj[key]);
}

Run it...   »

for...in statement iteration all object properties, but doesn't give guarantee to iterate in the order of definition.

Google Chrome, Mozilla Firefox, IE, Safari, Opera iterates in the order of keys definition (numeric keys first sort, then after iterate and last iterate string keys).

JavaScript Object Properties and methods

Object can be stored not only variables but also store data structures (associative array, set, union), and functions.

var employee= {
    name: "Opal Kole",
    salary: function() {
        this.salary= 15000;
        this.allowance = 1300;
    },
    information: function() {
        document.writeln("Employee name: " + employee.name);
        document.writeln("Employee Salary: " + this.salary);
        document.writeln("Employee Allowance: " + this.allowance );
    }
}

employee.salary()
employee.information()

Run it...   »

JavaScript new  keyword to create user-define object

JavaScript new keyword creates an instance of a user-defined object type as well as built-in object types that has a constructor function of the object.

Syntax

new constructor[([arguments])]

Example

function Employee(name, salary) {
  this.name = name
  this.salary= 15000;
}

var employee = new Employee("Opal Kole", "15000")

document.writeln("Employee Name: " + employee.name);
document.writeln("Employee Salary: " + employee.salary);

Run it...   »

View: Buit-in Object