Objects JS Home  <<  JS Basics  <<  Objects

What are objects, how are they are created and what we can do with them? In this lesson we learn how to create our own Object instances and assign property values to them. We also look at the delete special operator which allows us to delete object properties.

We have briefly seen some global objects when we looked at Basic Lesson 3 - The Anatomy Of JavaScript . The global table held several such objects including Array, String and the subject of our first lesson on objects, Object.

Object Syntax

JavaScript also allows us to create new object instances of our choosing using the following syntax:


var objectName = new Object;

We can then add new properties to our created object in the form of name/value pairs with the syntax:


objectName.someProperty = someValue;

Object properties are created through assignment without any need to declare the property in advance.

Example

The following code creates a homeOwner object.


/*
 Create an object that holds first and last name properties
 */
var homeOwner = new Object();
homeOwner.firstName = 'Teddy';
homeOwner.surname = 'Bear';
alert('Homeowner name is: ' + homeOwner.firstName + ' ' homeOwner.surname);

Press the button below to action the above code:

Deleting Object Properties

The following code creates a homeOwner object with a typo for the surname property. When we try to display that property it is undefined as it doesn't exist. We then delete the misspelt operator using the delete special operator and define the property correctly. The property now displays properly and the typo is now deleted and therefore undefined. We can also use the get and set special operators to get and set object properties. These special operators are covered in the reference section if you want to see them coded.


*/
 / Create an object that holds first and last name properties with a typo 
 / for surname (surnaem). Be careful when assigning object properties.
 /*
var homeOwner = new Object();
homeOwner.firstName = 'Teddy';
homeOwner.surnaem = 'Bear';
alert('Homeowner is: ' + homeOwner.firstName + ' ' + homeOwner.surname);
alert('Misspelt property value: ' + homeOwner.surnaem); // typo

// Delete typo using delete operator and create the correct property
delete homeOwner.surnaem;
homeOwner.surname = 'Bear';
alert('Homeowner is: ' + homeOwner.firstName + ' ' + homeOwner.surname);
alert('Misspelt property value: ' + homeOwner.surnaem);

Press the button below to action the above code:

Nesting Objects

You can also nest objects, to any level, within other objects.


 
 // Create a name object that holds first and last name properties
var homeOwner = new Object();
homeOwner.firstName = 'Teddy';
homeOwner.surname = 'Bear';

// Create an address object.
var anAddress = new Object();
anAddress.number = 12;
anAddress.street = 'Picnic Street';
anAddress.town = 'Toytown';
/*
 We are nesting the homeOwner object we created above in our address object.
 */
anAddress.owner = homeOwner;

/*
 We could access nested values as follows:
 */
alert(anAddress.street);
alert(anAddress.owner.surname);

Press the button below to action the above code:

Lesson 7 Complete

In this lesson we looked at how to create our own objects, give these objects properties and even nest other objects within them. We can also get, set and delete object properties using some of JavaScripts operators.

There are more elegant ways to create objects which we will cover later, in the Intermediate section of the course.

Related Tutorials

JavaScript Intermediate Tutorials - Lesson 7 - Object Literals
JavaScript Intermediate Tutorials - Lesson 5 - Elegant Object Creation

Reference

JavaScript Reference - Object constructor
JavaScript Reference - get special operator
JavaScript Reference - delete special operator
JavaScript Reference - new special operator
JavaScript Reference - set special operator