JavaScript concepts part 1 - objects

Introduction

JavaScript is a language that's widely used across the web, but it's often not deeply used by many of the page authors writing it. So in this "JavaScript concepts series" I try to introduce some of the deeper concepts of the JavaScript language. This is first article in series.

Why objects?

The most important concept in JavaScript it that functions are first-class object in JavaScript, which is a result of the way JavaScript defines and deals with functions. In order to understand what it means for a function to be an object, we must first make sure that we understand what JavaScript object is all about.

In JavaScript when object is created it holds no data and expose little in the way of semantics. JavaScript object don't support "classic" object-oriented. At least not in obvious and familiar (to people used to object programming) way.

We could create object by using the "new" operator (there are also some other ways to create objects, as we will see shortly).

Object can contain properties and possess "methods" (sort of). Unlike those in classic object-oriented statically typed languages (like Java) properties and "methods" aren't predeclared for and object; we create them dynamically as needed. But keep in mind that this flexibility always comes wit a price!

In next example we create new Object instance and assign it a variable named
house;

var house = new Object();
house.noOfdoors = 5;
house.address = "Main road 51";
house.yearBuild = new Date(2001, 2, 11);

Properties are not limited to primitive types. An object property can be another Object instance.

So let's add a new property to our house instance. We will call this new property owner.

var owner = new Object();
owner.name = "Kimi Raikkonen";
owner.occupation = "Rally driver";
owner.previousOccupation = "F1 driver";
//Add to house without creating property on house instance.
house.owner = owner;

If we want to access nested property we write this:

var homeOwnerName = house.owner.name;

JSON

We can also use a more compact notation for creating the object. This notation has come to be termed JSON (JavaScript Object Notation) is much preferred by most page authors. See http://www.json.org for more informations.

var house = {
  noOfdoors : 5,
  address : "Main road 51",
  yearBuild : new Date(2001, 2, 11),
  owner : {
    name: 'Kimi Raikkonen',
    name: 'Kimi Raikkonen',
    occupation: 'Rally driver'
  }
};
alert('House owner: '+house.owner.name); //Works fine.

Window object

When you use var keyword for declaring variable at the top level scope (global or window scope) you are creating top-level properties of window object. Also when you don't use var keyword inside function you are also creating top-level property on window object.

var name = 'Simon'; //Global variable,property of window object.
alert(window.name) //Works fine.
function calculatePi() {
  //something...
  result = 3.14; //Without var keyword you declare this as window property.
}
calculatePi();
alert(window.result); //Works fine.

This is the end of the story about object, please read ahead about JavaScript functions if you are interested.