JavaScript Objects

Follow Roger Facebooktwittergoogle_pluslinkedinrss

Introduction

In JavaScript an object is a collection of properties. Properties consist of a variable name and its value. A property’s value can be a number, a string, another object, a boolean, an array, or a function. Properties set to equal a function are known as methods. Within JavaScript there are 3 types of objects – objects that are part of the language construct, objects that are part of the browser (like DOM elements), and objects created by your program at runtime.To help make the intangible world of a computer program make sense, think of JavaScript objects like objects in the real world. In the real world objects have a collection of properties. Let’s use a person as an example object. A person has an eye color, hair color, height, weight, etc. These are properties of our person. A person also can walk, talk, run, eat, sleep, etc. These properties are methods – things our person can do.

Creating an Object

There are several ways to instantiate (create) an object in JavaScript. So, if you are learning, and have read elsewhere about creating objects, don’t let my choice of creation method in my examples confuse you. If you are coming to JavaScript from another OOP(Object Oriented Programming) language, you may have used classes to set up the structure of your objects. PHP, C#, C++, and Java are all class-based languages. JavaScript does not use classes; it is a prototype-based language. However, a class keyword is coming in the Ecmascript 6 (the parent of JavaScript Wikipedia Entry) definition. Class-based and prototype-based determine the programming architecture of inheritance, or sharing of object properties with other objects. But, don’t get hung up on class-based versus prototype-based. I’ll explain prototype inheritance in more detail in a future post.

Now, some Code

Let’s create our person as a JavaScript Object. Behind the scenes, a JavaScript Object is a function. So, we are going to begin there. This function is known as the constructor.

var Human = function(){};

Next, we’ll create an instance of the object.

var person = new Human();

Then, we can add some properties to our object. The flexibility of JavaScript means there are multiple ways of adding properties. I am going to use dot notation here. So, this way of representing properties is object.property.

person.eyes = “blue”;
person.hair = “blonde”;
person.height = “5.5″
person.weight = “110″;

 Now, we need to have our object (person) do something. We’ll add a method. A method is a property that is a function. Let’s have our person introduce herself.

person.introduce = function(){
alert("Hi! I have " + person.eyes + " eyes and " + person.hair + " hair");
};

Notice that to attach the method to our object all we do is create a property of the object, and assign the function as the value of that property. Pretty cool!
Here is the complete code:

var Human = function(){};

var person = new Human();
person.eyes = “blue”;
person.hair = “blonde”;
person.height = “5.5″;
person.weight = “110″;

person.introduce = function(){
alert(“Hi! I have “ + person.eyes + ” eyes and “ + person.hair + ” hair”);
};

person.introduce();

Get a JSfiddle with a working version of the complete code here. Play around with the code in JSfiddle – you’ll learn lots that way.

Hopefully, this introduction gives you a basic understanding of JavaScript objects. In future posts I plan to expand on this beginning. So, stay tuned!

PLEASE post any questions, comments, or suggestions in the comments. I’d love to hear from you!

 

Share with your social networks Facebooktwittergoogle_plusredditpinterestlinkedinmail


Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>