The Power of Objects– Javascript Object Tutorial

Warning: this tutorial assumes you know the basics of working with Javascript and HTML. If you’re familiar with Javascript syntax already, you can probably skip this first bit. If not, read on!

So, what exactly are Objects?

Objects are an extremely powerful feature of Javascript that are often overlooked. They allow you to do many things in a few lines of code that would otherwise be very messy to implement. Basically put, an Object in Javascript is a variable that allows you to store other variables in it. A variable stored within an object is known as a ‘property’. You can store any variable you want on an object; you can even store functions on an object!

Getting started with Objects

How exactly do objects work? Well, let’s get started by creating a simple object and assigning a few variables (demo!). Try this on for size:

var myObject = new Object();
myObject.firstName = "John";
myObject.lastName = "Smith";
alert("My name is " + myObject.firstName + " " + myObject.lastName + ".");

So, in the first line of our little script here, we’re initializing a variable called ‘myObject’ and storing a new Object in it. We then assign two properties to our object, firstName and lastName. Finally, we access the properties we set on the object in an alert call, showing that the variables we put in the object are stored there wherever the object exists (be mindful of scope though, as with all variables).

Declaring lots of objects

Let’s say we need to declare a few objects that share multiple properties. Now, to do this, we have three options:

Write all the objects out manually (this can be very time-consuming if you have a lot of objects)
Use shorthand to list all the objects (less time-consuming, but still a pain)
Declare an object constructor and call that a few times (usually the right way to go about it)

Let’s take a look at the first option, writing out all the objects manually. We could do something like this:

var myFirstObject = new Object();
myFirstObject.firstName = "Fred";
myFirstObject.lastName = "Smith";
var mySecondObject = new Object();
mySecondObject.firstName = "Joe";
mySecondObject.lastName = "Smithy";
var myThirdObject = new Object();
myThirdObject.firstName = "Bobby";
myThirdObject.lastName = "Smitho";

However, that would be both time-consuming and a pain in the neck, and if you ever find yourself doing this, see the next option!

Shorthand! (Shorter is Better)

The next option on our list is to use shorthand to initialize all of our objects, like this:

var myFirstObject = {firstName: "Fred", lastName: "Smith"};
var mySecondObject = {firstName: "Joe", lastName: "Smithy"};
var myThirdObject = {firstName: "Bobby", lastName: "Smitho"};

The template looks like this:

var objectName = {objProperty1: "hello", objProperty2: "world"};

Or you could state it like this:

var objectName = {
objProperty1: "hello",
objProperty2: "world"
};

Here we’re using shorthand object notation to declare our object– saying var myFirstObject = {} is the same as saying var myFirstObject = new Object(), and we can define what property we want to set on an object by putting its name, a colon, and then its value. This is a lot better, but it’s still pretty time-consuming.

The mighty constructor

Now, the best way to initialize multiple objects that have similar properties is to use what’s called a constructor. A constructor is a function that sets up all the variables on an object for you automatically. A basic constructor looks like this:

function Person(firstName, lastName) {
 this.firstName = firstName;
 this.lastName = lastName;
}
var firstGuy = new Person("John", "Smith");
alert(firstGuy.lastName);

This is quite a few lines longer than the previous example, but the advantage to using constructors becomes apparent when you start storing large amounts of properties on objects, particularly functions. Now, let’s add a function to our object’s constructor so we can see this advantage I’m talking about (try it!).

function Person(firstName, lastName) {
 this.firstName = firstName;
 this.lastName = lastName;
 this.sayHello = function() {
 alert(this.firstName + " " + this.lastName + " says hello!");
};
}
var myFirstPerson = new Person("John", "Smith");
myFirstPerson.sayHello();

When we use a constructor, we don’t have to pass all the variables we want; we can instead define some objects in the constructor once, and they’ll be automatically applied to any object we create using that constructor, as is the case with the sayHello() function. It will be callable on any objects you initialize with the Person constructor.

What’s next:

Later on, we’ll be talking about how to do classes in Javascript, Prototype and how it all relates to object inheritance in Javascript.

Best HTML Templates. Soap2 day

Hey, JavaScript