How Everything Behaves like Object in JavaScript

6 min readFeb 9, 2021

I know I said everything behaves like an object in JavaScript. Well, that’s true for everything except Primitives.

In JavaScript, almost everything is an object and behaves like an object because of its prototype. except for primitives which are

Numbers
Booleans
Strings
Null and Undefined

aside from the above mentions, others behave and have the properties of an object. even your arrays, functions, and dates.

Get your reading cap on, this is going to be less code.

Okay, so what are objects?

In a very simple term objects are used to group different variables that belong together in no particular order. Using the key-value pairs.

var zayne = {
 name: Zainab,
 birth: 2000,
 job: designer
};

but, objects are not just for holding a bunch of data but for also really complex things under the surface.

Object-Oriented Programming

Object-oriented programming makes heavy use of objects properties and methods. these objects interact with one another to form complex applications.

We use objects to store data, structure our code, and keep our code clean. and so far we have only created simple objects holding some data (from what are object section)

And if we had created other objects back then, we would simply have written them one by one this way.

var sam = {
 name: Sam,
 birth: 1990,
 job: teacher
 };var ola = {
 name: Ola,
 birth: 1980,
 job: driver
};

etc. right?
but there’s a better way, we could have something like a blueprint where we could generate as many objects(instances) that we want. and that is called a constructor

Function Constructor

There are several ways of writing objects in JavaScript, we’ll be using the function constructor which implies we are using a function.

var Person = function(name, birth, job) {
 this.name = name;
 this.birth = birth;
 this.job = job;};var joseph = new Person(‘joseph’, 1990, ‘designer’);

From the above function constructor, we attached the arguments to the this variable of the function execution context.

So like this this.name = name; and then we created the joseph object var joseph = new Person(‘joseph’, 1990, ‘designer’); with a new operator and then we passed our argument into the function, the (‘joseph’, 1990, ‘designer’);

So, that is called instantiation because the joseph object was created off the person constructor and at thus an instance of it.

To understand how all of these works we need to first understand what the new operator does when we use the new operator. first, a brand new empty object is created.

All right? an empty object is created this is important. and after that, the function constructor which in this case person is called with the argument that we specified.

As we probably already know calling a function creates a new execution context that also has a this variable. now we know that in a regular function call the this variable points to the global object but if we look at our function here.

var Person = function(name, birth, job){
 this.name = name;
 this.birth = birth;
 this.job = job;};

Having the this variable point to the global object will not be so useful. right? because like that we would simply set all these properties on the global object and that not what we want, and so the new operator takes care of this. and make it that the this variable of the function point to the empty object that was created in the beginning by the new operator.

Again, our new operator here var joseph = new Person(‘Zayne’, 1990, ‘designer’); first create an empty object, then it calls our function with the this variable not pointing to the global object but to the new object that was created. then when these codes here runs

 this.name = name;
 this.birth = birth;
 this.job = job;

The this variable is no longer the global variable, and these will all be set on the new object. which at the end will be assigned to the joseph variable.

and like that, we created an object called joseph by calling a function constructor.

Inheritance

Inheritance is when one object gets access to another object’s method and properties.

How Inheritance works

From our Person constructor above. Imagine that we also want to have an athlete constructor besides our person constructor, with a couple of different properties and methods.

Now an athlete is also a person right? and so why write the same properties that we had in the person constructor for it when we could just let the athlete inherit these properties from the person constructor.

What we can do is use inheritance. We’ll make the athlete object inherit properties and methods from the person constructor. then, the athlete will not only have access to its properties and methods but also the ones from the person objects. This allows us to write less code and make more logical programs, lets now suppose that we want to add a method to our object, like this.

var Person = function(name, birth, job) {
 this.name = name;
 this.birth = birth;
 this.job = job; 
 this.calculateAge = function(){
   console.log(2021 -this.birth);
}};var joseph = new Person('joseph', 1990, 'designer');

and we call it here joseph.calculateAge(); let us create a couple more objects for more people.

var sam = new Person(‘Sam’, ‘1980’, ‘teacher’);

var ola = new Person(‘Sam’, ‘1940’, ‘retired’);

If we run these objects, they will have access to the calculateAge method which will be attached to them. because it right in the function constructor where they are instantiated from.

Again, each of these objects now has the method. In this case, it’s just one function so it’s no big deal. Now imagine we had twenty functions in each has like one hundred lines of code with the method attached to them, that would not be very efficient, because then we will have twenty copies of the same thing. and that is where inheritance comes in hang on…

The Prototype chain

When we try to access a certain method or property on an object, JavaScript will first try to find that method on that exact object, but if it can’t find it. It will look in the object’s prototype which is the prototype property of its parent so it moves up the prototype chain. if the method is still not there the search cont. until there is no more prototype to look for which is NULL, null is the only one that has no prototype and it is therefore the final link in the prototype chain.

Note

Every JavaScript object has a prototype which makes inheritance possible
the prototype of an object is where we put the method and properties we want other objects to inherit
the constructor prototype is NOT the prototype of itself, but of all the instances that are created through it.
when a certain method or property is called the search starts in the object itself and if it cannot find it, moves on to the prototype of the object this cont. until the method is found.

now, here is what we can do. we add all the methods and property we want to be inherited into the constructor prototype property. and all we have to do is

var Person = function(name, birth, job) {
 this.name = name;
 this.birth = birth;
 this.job = job; 
}Person.prototype.calculateAge = function() {
console.log(2021 - this.birth);
};

call the person constructor and dot prototype. then we add our function to it, so if we run this code again effectively none of the objects will have the method attached to them but still, they will have access to it and will be able to use it. now if we run this code…

var Person = function(name, birth, job) {
 this.name = name;
 this.birth = birth;
 this.job = job; 
}Person.prototype.calculateAge = function() {
console.log(2021 - this.birth);
};var joseph = new Person('joseph', 1990, 'designer');
var sam = new Person('Sam', '1980', 'teacher');
var ola = new Person('Sam', '1940', 'retired');joseph.calculateAge();
sam.calculateAge();
ola.calculateAge();

We should have 31 41 and 81 respectively as the result.

Again, the method is not anymore in the constructor, but we can still use it and that because its in the prototype property of our function constructor. and so just as we did with the method. we can also add a property to the constructor prototype and say all of them should have the lastName of Tijani.

var Person = function(name, birth, job) {
 this.name = name;
 this.birth = birth;
 this.job = job; 
}Person.prototype.lastName = 'Tijani';

we call it this way.

var Person = function(name, birth, job) {
 this.name = name;
 this.birth = birth;
 this.job = job; 
}Person.prototype.lastName = 'Tijani';console.log(joseph.lastName);
console.log(sam.lastName);
console.log(ola.lastName);

If we run this now, they should all have Tijani as their lastName and so this is really really powerful.

conclusion

… and I said this won’t be much of code, boy was I wrong :)