JavaScript Objects

I’ve been busy studying JavaScript at Codecademy. It’s a great way to learn, with interactive lessons and if you happen to get stuck, there’s an active forum with a lot of helpful people to get you out of your bind.

The thing is, there are a lot of contributors for the large collection of lessons, and it can get a bit confusing, at least I think so. That’s why I decided to write this short post on JavaScript objects, just to clear things up a bit in my head.

Thus far I’ve learned three methods to create an Object or an Object constructor to be more precise.

They are:

Object Literal Notation

This is like declaring a variable but you create an Object by using curly brackets. An Object remarkably resembles an Array, the difference being that an Object can contain Functions, they are called Methods!

an Object literal declaration looks like this:

var myObjectName = {};

An Object with literal notation contains properties inside the curly brackets:

var me = {
 age:46,
 country:"Canada"
};

Object Constructor Notation

The other way to create an Object is using the Constructor method. There are two ways to go about this:

Using the new Object keyword
var me = new Object();
 me.age=46;
 me.country="Canada";
 or using the Function keyword

A method is like a function for objects. Using the Function keyword, you can setup a « template » to create many Objects that will be based on the original declaration as you want. This avoids the monotony of having to do a lot of typing. This is still Object constructor notation.

Update: it turns out this is the method used for creating a class in JavaScript and is the first step in my learning the concept of OOP (Object Orientated Programming). Woot!

function Person(job, married) {
 this.job = job;
 this.married = married;
}

Then to create a new Object based on the above syntax you sort of combine variable and array declarations:

var bob = new Person("carpenter", "single");

So an Object can, like an Array, contain strings, numbers and Boolean values, but unlike Arrays an Object can also contain a Method. You can declare a Method by using the keyword Function inside the Object constructor notation.

function me(age,country){
 this.age=age;
 this.country=country;
 this.describeMyself = function() {
 console.log("I am a " + this.age + " years old and I live in "+this.country);
 };
}
var me2 = new me(22, "USA");
me2.describeMyself();

Notice the keyword this is acting as a variable to pass you information on newly created Objects no matter what they’re called? By using this in the dot notation form you’re also declaring a public variable that is accessible from outside the object. If you wanted to make the properties private you would use the keyword var. This would make the property inaccessible outside the object. There’s a work around to this, you create a public method within your object that returns  the values of private values.

Let me elaborate:

function Person(first,last,age) {
 this.firstname = first;
 this.lastname = last;
 this.age = age;
 var bankBalance = 7500;
 this.getBalance = function() {
 return bankBalance;
 };
}

If you call Person.bankBallance; directly, you’ll get undefined as a result. To get around this, you define a public method which calls your private variable and returns its’ value publicly. Why? I learn about that later I guess and write some more on the subject at a later date.

Accessing the information

Accessing information inside an object is simple, you can either use the square brackets like you would access information inside an array, or like above, you can use dot notation.

so to find out how old me2 is you would just:

var meAge = me2.age;
or
me2["country"]; //returns "USA"
console.log("I'm " +meAge); //returns 22

Some interesting ways to access valuable information concerning the content of objects are:
hasOwnProperty which returns a Boolean value. You use it like this:

myObj.hasOwnProperty('country');

Which in our case would return true!

Now to learn about prototypes and inheritance…

className.prototype.newMethod = function() {
 statements;
};

Syntax of extending the prototype

I hope you find this useful, I certainly did, I figured out a few things while writing this. Comments are always welcome, and if you see an error in my post, please let me know so I can fix it!

Source: classes at codecademy.com

Tous les commentaires constructifs sont les bienvenus.

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s