JavaScript Objects

Beyond arrays, the complex variable type that JavaScript provides for managing associated data is the object. Just as an array is a variable of variables, an object can be thought of as a variable of both variables and functions. An object serves as a container for a number of variables and functions, which are usually related in purpose. Variables and functions in objects are called properties and methods respectively.

Object syntax

We will first consider working with existing objects. You will most likely not be creating your own objects, but rather working with the inbuilt ones, so we will start with syntax for accessing objects. As an object is a variable, it is treated similarly in syntax. However, to refer to properties and methods within an object, we use dot notation. Dot notation involves, as you may have guessed, dots.

// ourobject is an object containing a property sometext,
// and method do_something().
alert(ourobject.sometext);
ourobject.do_something();
ourobject.do_something(ourobject.sometext);

The syntax is very simple: where an array had the identifier of the element in square brackets, objects have the identifier placed after a dot.

Inbuilt JavaScript Objects

Objects are easier to understand when we consider the inbuilt JavaScript objects. You may have recognised that dot in our previous example from the document.write() function we have used. document.write() is not actually a function, as such: it is the document object containing a write() function.

JavaScript has a number of useful inbuilt objects, including Date, Math, String, Form, Image and more.

Creating Objects: Simple

An object can be created very simply, similarly to an array:

person = Object();
person.name = "Bob";
person.getName = function() {
    return this.name;
}

// Call the getName() method on person
alert(person.getName()); // Will alert "Bob"

We use the global Object() function to give us an object, similar to an array. We then assign a values to the "name" property through dot notation, just as we would assign values to any other variable.

Next, we create the function - well, method - getName(). We do this by assigning it the value of a function. JavaScript is a language with functional programming, which, while beyond the scope of this tutorial, essentially refers to functions being given a lot of flexibility and power. Assigning a function to a variable is one of the features of JavaScript's functional programming. This type of function declaration, where the function has no name, is called a lambda function. The function is accessed via person.getName();. Note that person.getName still refers to the function, but as if the function was a variable (again, functional programming); to actually call the function, we must add the parenthesis () at the end.

Finally, just as we encountered function scope in JavaScript Functions, objects have object scope. Because of the object scope within an object, we refer to the object via this. We do not know exactly what the object's name (as a variable) will be when the code is executed, as the object could be duplicated or given another name (e.g. via person2 = person). Therefore, within a method (which we still define with the keyword function), we always refer to the current object as this.

Creating Objects: Advanced

Objects are part of a programming approach known as object oriented programming, or OOP. A fundamental concept of OOP is polymorphism, or many forms, and this applies directly to objects through classes. Classes involves taking a step back from objects, as classes define the type and nature of an object.

Consider, for example, cars. A car is a type of object. If I had a Fiat car, for example, it would be an actual object, one of the class of objects with the type "car". In programming, we say that my Fiat is an instance of the class Car. We also have to define the class Car, and create the instance for my Fiat. Consider this:

function Car() {
    this.model = ""; // We set this later.
    this.getModel = function() {
        return this.model;
    }

}

MyFiat = new Car();
MyFiat.model = "Fiat";
alert(MyFiat.getModel());

This is a basic class declaration. Once again, we use the keyword function for defining our class. JavaScript knows that this is a class because of our use of this. Here we introduce the new keyword. If Car were a variable, and we removed the parenthesis - () - after Car, we would have the line MyFiat = Car;, which is perfectly legal JavaScript to duplicate a variable (or function, or class, as the case may be). By using new and the parenthesis, JavaScript knows that we want to create an object, which will be an instance of the Car class.