Data Types: Object

Introduction

In computer science, the Object data type is a data type having key/value pairs representing fields, properties, methods, and events, intended to solve specific programming tasks.

Object Literals

In JavaScript, to create a custom object as an object literal, you store the properties of the object within a comma-separated list of name:value pairs enclosed within a set of curly braces. The general syntax of the object literal is

var objName = { name1: value1, name2: value2, ...};

where objName is the name of the object, name1, name2, and so on are the names associated with that object, and value1, value2, and so on are the values assigned to those names.

Data Storage with Associative Arrays

The object literal structure is often referred to as an associative array in which a group of items is referenced not by an array index but by a descriptive text string known as a key. The general structure is

var array = {key1:value1, key2:value2, ...}

where key1, key2, and so on are the associate array keys and value1, value2, and so on are the values for each key. For example, the following associative array defines several key values for describing the properties of an employee:

var employee = {name:"Gary Ford", position:"manager",
            email:"gford@example.com"};

To reference the employee’s e-mail address, use the bracket notation employee["email"] with the key value "email" rather than an array index. Other key values would be referenced in a similar way. Despite the term, associative arrays are not part of the class of Array objects and do not support JavaScript’s Array object properties and methods. For example, there is no length property for associative arrays that would return the number of items within the object nor is there a sort() method for sorting the associative array’s contents.

Dot Operators vs Bracket Notation

You can reference an object property using either the dot operator form object.property or the bracket notation form object["property"]. Why the two approaches? The dot operator form is easier to read and interpret, however, it is limited because it is not able to handle properties referenced as variables. For example, the following employee object contains the name and position properties:

    var employee = {name: "Gary Ford", position: "manager"}

If you wished to pick which employee property to view using the following prompt dialog box

    var empInfo = prompt("Specify an employee property");

you could not retrieve the specified property using the following expression employee.empInfo because there is no empInfo property associated with the employee object. However, because property names are treated as text strings in bracket notation, you could apply the following expression to retrieve the desired employee information:

    employee[empInfo]

If the empInfo variable equals "position", then this expression would be equivalent to

    employee["position"]

and would return the text string, "manager".

Object Types

In this section, you will explore how to create objects that belong to object types, sharing common properties and methods.

Creating an Object with the `new` Operator

In previous tutorials, you created native objects using the new operator. For example, you can create an Array object with the expression var array = new Array(); or a regular expression object with the expression:

    var regex = new RegExp();

To create a custom object using the new operator, apply the following commands

    var objName = new Object();
    object.property = value;
    object.method = function() {
        commands
    };

where objName is the object name, property is a property defined for that object, and method is a method assigned to that object.

The new Object() statement is equivalent to an empty object literal {} in that it creates an object devoid of properties and methods. Any properties or methods must be added in separate JavaScript statements, as in the example above.

The biggest limitation of an object created either as an object literal or with the new Object() command is that the object is not reusable. Any custom properties or methods apply to that object and no others.

Classes and Constructor Functions

The power of object-based programming lies in creating objects that belong to a specific type or class with shared properties and methods. To create such object classes, you apply a function known as an object constructor or a constructor that defines the properties and methods associated with the object type. A specific object that is based on an object class is known as an object instance or instance. Creating an object instance based on an object class is known as instantiating an object. For example, when you created an array object using the new Array()command you were instantiating an object based on the properties and methods associated with the class of Array objects. Object constructors are defined with the following constructor function

function objClass(parameters) {
        this.prop1 = value1;
        this.prop2 = value2;
...
            
        this.method1 = function1;
        this.method2 = function2;
... }

where objClass is the name of the object class; parameters are the parameters used by the constructor function; prop1, prop2, and so on are the properties associated with that object class; and method1, method2, and so on are the methods associated with that object class. The this keyword in this context refers to any object instance of this particular object class.

Once the constructor function for the object class is defined, instances of the object are created with the command

    var objInstance = new objClass(parameters);

where objInstance is a specific instance of the object, objClass is the object class as defined by the constructor function, and parameters are the values of any parameters included in the constructor function.

ObjectData Type