Objects

JavaScript does not have classes like some other popular languages, it has objects. Objects can be created in various ways, including a literal syntax for directly creating them. If you want in object in your program, you just create it.

Object Literals

Here is how you create an object with an object literal:

person = {

  firstName: ‘George’,

  lastName: ‘Washington’,

  occupation: ‘President’

};

The statement above will allocate memory for a new object and the person variable will hold a reference to that location in memory.  There is an important point here – all values of the Object type have references to that object in memory. So the variable, person, has its own location in memory, and the value at that memory location is simply a reference to another location in memory, which is the object data.  Here is how you can think of it:

This is different than primitive values, where there is no reference. The primitive value is stored in the memory location of the variable. For example, if a variable named year was equal to the Number value, 2012, then the {reference id} shown in the image above would be replaced with the primitive value, 2012.

Constructors

Constructors create objects and then execute code that (may or may not) assign initial values to the new object’s properties. A constructor is a function (which is a callable object) that has a special property named prototype that is used to for prototype-based-inheritance and shared properties.  Constructors and prototypes are fundamental building blocks of JavaScript, and I will go into much more detail in future posts.

For now, here is an overview of how functions, constructors, prototypes and objects are related.  When you write a function in JavaScript, the code for that function is stored in memory.  Where is it stored?  It is actually stored as an internal attribute of an object, because remember, functions are objects… they are just special objects that are callable.  The “thing” that makes them callable is that internal attribute that holds the code in memory.

So the simple act of writing a function in your JavaScript file will actually cause a new object to be created in memory.  The name of the object variable is just the name of the function if you have given it a name, otherwise it is anonymous.

But that’s not the whole story — there is actually another object created in memory at the same time that your function object was created in memory.  The second object is called the function’s prototype, and it is a separate object in memory — and it is not callable.  Where is the second object stored? It is stored as a property on the first object, and that property name is prototype.

To be clear — when you write a function in JavaScript, there are 2 objects created in memory. The first object is the function itself, and it is a callable object. The second object is available through a property called “prototype” on the function object, and it is not callable.

Here is how you can visualize it:

Prototypes

The prototype object is created at the same time as the function object, and the function object has a property named “prototype” that references it.  The prototype object is used when a new object is created in a JavaScript program. Every function object can be used as a constructor to create (or construct) new objects, which just means you can use the new keyword in front of the function. When you use the new keyword in front of a call to a function, JavaScript will create a brand new object in memory and link it to the function’s prototype object before executing the function code. What does “link it” mean? It means that the brand new object will have another internal attribute set to reference the function’s prototype object. That link is part of the prototype chain that will be discussed later.

After the new object is created and linked to the constructor function’s prototype, the code of the constructor function will be executed. This sequence of events is often misunderstood by developers, and can be a source of confusion. There are more detailed steps that are performed by the new keyword, but this is the critical part.

Summary

Objects in JavaScript can be created by object literals or by the new keyword in front of function calls. When a function is found in your code, it is stored in memory as a callable object with an automatically created property named prototype that references another automatically created object in memory. The prototype property of the function object is linked to all new objects that are created by that constructor function. We will talk about more ways to create objects in the future, and get into many more details of the object creation process.