Naked Javascript - Object Basics

In this series- Naked JavaScript, we are going to delve into the gory details of javascript and extensively elaborate on its features like objects, functions, classes, inheritance, prototypes and closures.

In part 1 of this series, I am going to talk about objects in JavaScript. And since almost everything in JavaScriptis an object, maybe I can say that I am practically talking about the basic fundamentals of the language. In one way, this part is just a foundation for all the rest of the articles that follow in this series.

JavaScript deals heavily with objects. It deals with them at so many levels that sometimes its unfathomable if you are used to writing code in 'conventional' languages like Java or C or C#. Everything from functions to inheritance to arrays take on a completely different perspective in Javascript and this makes the language  unpredictable for a to programmers from a different programming background.

Before we begin, there is one important statement that I want to start with. And that is 'Almost everything in javascript is an object.'

---

That said, lets see how we can create objects.

There are mainly 2 ways in which you can create objects

---

This is something that programmers from conventional languages are quite used to. The syntax is simple and elegant. You just create a new object and assign it to a variable.

var bingo = new Object();

Since I have worked extensively in Java before, I can say that this seems quite straightforward. In Java, the Object class is the parent class of all the classes. In the same way, the Object class in javascript is the main class from which all Objects inherit features. And because everything is an object, the fact that javascipt does not have predefined types seems to be a misnomer. There is in fact one master type, and that type is Object. No matter who you are or what you do, remember that the almighty Object is watching you!

var bingo = new Object();
console.log(typeof bingo);
bingo=10;

console.log(typeof bingo);

As you can see above, we used the typeof operator to determine the type of an object. What you also would have noted is that even though bingo is an object, it was perfectly ok for us to assign a numeric value to it. And when we printed out the type of the variable bingo, we got the type as number. There is a very interesting story of inheritance in javascript that makes this possible. Its something that we will be discussing in absolute details in another article. For now, just be happy with the fact that you dont need to worry about the type of an object before assigning a value to it.

Literal declaration

This is perhaps the most common way to declare objects. The reason being, that its so easy that sometimes its baffling that you can even do this.

var bingo2 = {};

This is very easy on the fingers because it saves you a few keystrokes but it is practically equivalent to

var bingo = new Object();

If you are not used to this syntax, you better get used to it. Because to be honest, its not such a bad thing. In fact its pretty cool!

Declaring Properties On Objects

Objects are objects. And objects are meant to store information. However there is is a slight deviation from conventional languages here. When you create objects, you can directly declare new properties on those objects and assign values to them. Unlike Java, where you must have a predefined class where you first define the properties and the methods of the objects that you create, Javascript lets you do things differently. Lets see that with an example.

var bingo1 = {}; //Create an object of type Object
var bingo2 = {}; //Create another object of type Object
bingo1.shouts = 'hey!';
bingo2.says = 'hello';

Observe carefully. In the above examples, although the type of the objects bingo1 and bingo2 are the same, the language permits you to dynamically declare new properties on each of these objects and those properties dont even need to be same. Although the objects seem to be different because the contain different information, the typeof operator returns the same value for each of these variables.

(typeof bingo1==typeof bingo2) //This returns true

This is something that cannot be done in Java where you can have two objects with a completely different set of properties but still belong to the same class. You dont have the blueprint of a class in Javascript.But that does not mean that you cant have classes in Javascript. It just means that the concept of classes works a bit differently in Javascript.

This makes a short introduction to what is meant by objects in Javascript. That said, in this series, we will explore many more amazing features of the Javascript language such as functions, closures, prototypes and the different ways in which all of these ideas intertwine to create the web as we know it.