JavaScript common sense.
The only truth we need to remember is that everything you see in JavaScript is an object. This means that every bit of your code has the same abilities that an object would have. Please note that the last statement is an oversimplification. However, I hope you will get more comfortable with the topic through the article. Combined with being a dynamically typed language, JavaScript is a very programmer-friendly environment, so be prepared to work hard and enjoy the article.
What is Object in JavaScript?
The expected answer is not straightforward. We first need to specify the meaning of the word “Object” in the question above. One can perceive this in different ways. The first idea that comes to mind is the Object constructor. The constructor lets you create an object by simply calling the function called “Object”. As you may see in the code snippet below, there are objects created in different ways. However, the result we get is the same empty object.
const firstObject = {};
const secondObject = Object();
const thirdObject = new Object();
console.log(firstObject);
console.log(secondObject);
console.log(thirdObject);
This may be a bit confusing initially, but eventually, you will learn all of the tricks, and believe me, there are plenty of them. The next idea one can get is, as you might have already guessed, the literal object. You may ask, why did we start from the Object constructor and not the most straightforward meaning of the word, the “clean” object itself. The fundamental idea behind this approach is that you will start to construct your thoughts and will be able to see the hierarchy of JavaScript in the nearest future. We started from the parent, now let’s get down to the child.
Deeper Understanding...
In order to fully use its advantages, we need to fully study the behavior of objects. Simply put, it always has key-value pairs. These pairs altogether are called properties. The most important thing to remember is that properties must always have unique keys, e.g., you cannot have two id-s in one object. If you think about that for a moment, it makes sense, as, at the end of the day, you would not want to work with an object called “user”, which has two identifiers, as it will only make our lives even harder. Another thing that every JavaScript object has is the property called “__proto__”. In order to understand this, we first need to define prototype and prototype delegation.
What is object in JavaScript?
Now you may see that the heading says “object”, and not “Object”. This is the result of the basic programming conventions that all of us must be aware of. I used the rule that we should name our constructors(so-called parents) with capital letters. However, during my whole career, I did not notice any other reason behind this rule, so I choose only to use this rule when I have some constructors in my code. Anyway, back to the topic.
What is prototype in JavaScript?
Basically, the prototype is the place where all the necessary functionalities are living. We need to look at an example to understand the topic.
function Constructor(){
this.prop1 = "prop1";
this.prop2 = "prop2";
}
Constructor.prototype.newFunction = function(){
console.log("hey there, a new function is attached!");
}
let instance = new Constructor();
instance.newFunction();
The last row above will print, “hey there, a new function is attached!”. If you are not familiar with the “new” keyword above, it is just the constructor like other languages. This is just another way of creating objects, and the most important trick here is that you can customize objects. If you are not familiar with that either, you can quickly study the topic and then continue reading this article. Back to the topic, we did this to study prototypes. So in the example, we prove that everything on the prototype is shared among instances of the function (constructor). However, the main functionality of the prototype is to attach the “__proto__” property to the newly created objects/instances. This way, every instance has access to previously defined functionalities.
Javascript Objects: prototype vs __proto__
function Constructor(){
this.prop1 = "prop1";
this.prop2 = "prop2";
}
Constructor.prototype.newFunction = function(){
console.log("hey there, a new function is attached!");
}
let instance = Constructor();
console.log(instance.__proto__ === Constructor.prototype);
The console.log will print true, and as odd as it is, it is the only way JavaScript creators saw fit. I encourage you to play with the example and discover as much news as possible. Meanwhile, the three differences between __proto__ and prototype we need to note are the following.
- The prototype is located on the constructors/functions, as well as on the objects.
- The __proto__ is only accessible via objects/instances.
- The prototype is designed in a way to attach __proto__ to instances, though they are equal.
The important detail here to understand is that the __proto__ is pointing to the prototype of the constructor, which is why these two are equal. They are designed to help us do what we did in the first example above, to share properties among the desired set of objects via prototypes. For example, you can access all the functions of the “String” from every string you have. You can achieve the same thing via classes in JavaScript. However, if you want to be a good developer and not merely a coder, you have to at least understand the basic logic behind the scenes. After all, as I mentioned in the beginning, every piece of code we see is basically an object, so you want to get better at objects.
Learn JavaScript with us!