Creating objects in JavaScript

By now, I think there’s no doubt about how important JavaScript is. And that’s why I thought it would probably be a good idea to write a little bit more about it. By doing it, I’ll refresh my memory and I’m also hoping to learn one or two new things that I might have missed before. To get things started, I’ve decided it would probably be a good idea to talk about object construction in JavaScript.

In JavaScript, it’s common to create an object by writing code like this:

//option 1: literal
var obj1 = {};
//option 2: construtor -> bad
var obj2 = new Object();
//option 3: so ECMAScript 5
var obj3 = Object.create(Object.prototype);

In practice, you’ll probably see option 1 used often. Option 2 is really a bad practice and you shouldn’t use it (I’m not sure if I can remember seeing option 2 used in the real world…). Option 3 is only available if your runtime is compatible with ECMAScript5 (I’ll return to it in a future post). Notice that all of these options produce the same result: an empty object.

In JavaScript, you can think of objects as being containers for key/value pairs. After creating an instance, you can use the . notation for adding a new property or changing the value of an existing property. Alternatively, you can resort to the [] notation for accessing a property. Here’s an example: = 'Luis';
obj2['name'] = 'Luis';

Once again, the previous instructions end up generating similar results. In both cases, you’ll end up with an object that has a name property and whose value is set to Luis. If you’re creating a new object with the literal syntax, then you can do it all at once:

var obj1 = { name: 'Luis' };

By now, you’ve probably noticed why the literal syntax is used so often. There’s still an alternative way of creating properties which is more powerful, but only compatible with ECMAScript5 (we’ll leave it for a future post). Going back to object creation, there’s still a final approach: we can create a function and use it as a “constructor”. A function is “transformed” into a “constructor” when it’s prefixed with the new keyword during its invocation. Here’s a quick example of how you can build a simple object by using a constructor:

function Person(name) { = name;
var p = new Person("Luis");

In this case, you’ll also end up with an object which has a single property name, whose value is also set to Luis. Even thought the results  are similar, there are some important differences between the objects created. For instance, if you check the constructor property, you’ll notice that p returns a reference to Person while obj1 returns a reference to Object. As we’ll see, this difference might be important, but for now, we don’t have to worry about it because we’re simply interested in creating objects.

If you’re coming from a strongly typed language like C# or Java, you might be thinking that our last approach (where we created a function that is used as a constructor) is the way to go when you need to create objects in JavaScript. Well, it might be a viable option, but as you’ll see, it typically isn’t the way to go when you’re working in JavaScript.

And that’s it for now. Stay tuned for more.

PS: does anyone have any suggestion on how to format the code  before pasting it in Windows Live Writer? I’m using code snippet for  now, but I’d prefer to have a dark scheme for my code…


~ by Luis Abreu on October 18, 2012.

2 Responses to “Creating objects in JavaScript”

  1. hi!

    Something has broken the formatting of this post.

  2. […] about C#, .NET and Programming Creating objects in JavaScript Oct […]

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: