DEV Community

Cover image for Javascript Object #6
Asir-Sam
Asir-Sam

Posted on

Javascript Object #6

#javascript #webdev #beginners #programming

Welcome All,

Till our Last Post we've seen only pretty basics in Javascript.From now we are going to Jump into little deep about Objects in Javascript,as i've told you that Javascript Object are very Deep and He is very Strong one,as most of the things in javascript is an Object.

Let's Quick Dive into it,in this Post we are Going to know about Prototype in Javascript.

Prototype

As in many Programming Languages,they have Inheritance to access the Feature from his Parent class or Object.As like that Javascript can inherit features from one Object to another Object via Prototype.Unlike in other Programming languages like Java,C++ they have Classical Inheritance but in Javascript it is Prototypal Inheritance.

Every Object has it's own Property called Prototype.And Prototype itself is an another Object and it contains another prototype and it is somewhat called as the Prototype Chain.This Chain ends when it's Prototype is null.

Suppose you have an object person with a property called name:

`let person = {'name' : 'John'}`
Enter fullscreen mode Exit fullscreen mode

When examining the person object in the console, you’ll find that the person object has a property called prototype denoted by the [[Prototype]]

Image description

The prototype itself is an object with its own properties:

Image description

Suppose if you want to access a property from an Object it'll return the value if exist,or else if the Property is not present in the Object the Javascript engine will search for the Property in the Object Prototype and even if it can't find it there it'll search it in the Prototype's Prototype untill it finds the Property or reaches the end of the prototype Chain.

For example, you can call the toString() method of the person object like this:

Image description

The toString() method returns the string representation of the person object. By default, it’s [object Object] which is not obvious.

In this example on calling the toString() method,the Javascript engine will search for it in the Person Object and it could not find it there and it continue to search for it in the Object Prototype and it will find it there.

Since the person’s prototype has the toString() method, JavaScript calls the toString() of the person’s prototype object

Image description

for now that's it,we'll see more intresting things about the Prototype and it's inheritance in upcoming post.

Many Thanks for Your Time,
Sam

Top comments (5)

Collapse
 
jonrandy profile image
Jon Randy 🎖️ • • Edited

Every Object has it's own Property called Prototype.And Prototype itself is an another Object...

This isn't entirely true, it is possible to make an object without a prototype - by taking advantage of what you said - 'This Chain ends when it's Prototype is null' - we can actually start the chain with null:

// normal object
const obj1 = {}
obj1.b = 3
console.log(typeof obj1)  // object - as expected
console.log(Object.getPrototypeOf(obj1))  // Object { ... } - normal object prototype
console.log(obj1.__proto__)  // Object { ... }
console.log(obj1.b)  // 3 - object properties work normally

// prototype-less object
const obj2 = Object.create(null)
obj2.b = 3
console.log(typeof obj2)  // object - as expected
console.log(Object.getPrototypeOf(obj2))  // null
console.log(obj2.__proto__)  // undefined - nothing here! (as our object lacks the getter for __proto__)
console.log(obj2.b) //  3 - object properties work normally
Enter fullscreen mode Exit fullscreen mode

So, the object created when you use the object literal {} is actually equivalent to Object.create(Object.prototype).

Creating an object without a prototype in this manner is quite unusual, but does have some use cases. One that springs to mind is creating a very pure dictionary where there is no risk at all of property name collisions from the prototype chain - useful when you have no direct control over the property names being used, or need to use property names that already exist on the prototype. Saying that, if you find yourself in this position you may want to consider using a Map object instead as they are generally faster and consume - IIRC - less memory.

Collapse
 
asir-sam profile image
Asir-Sam •

You really taught me something, as a novice i will get bettter everyday.
Thanks for your corrections and keep supporting me by reading me posts.
Grateful Time! Brother

Collapse
 
vicariousv profile image
AndrewBarrell1 •

I couldn't get through the first few lines of this article. Basic grammar and punctuation are needed when writing an article

Collapse
 
asir-sam profile image
Asir-Sam •

I'm so much bad in English. Getting sort everyday !.
Suggest me tip if you could ,to rectify the grammar problem.

Collapse
 
vicariousv profile image
AndrewBarrell1 •

I'd strongly suggest writing your article in a proper text editor like Microsoft Word or OpenOffice. It can suggest fixes for grammar, punctuation, and spelling mistakes.

Also these days you can ask AIs like ChatGPT to correct it or even translate it from your native language.

Good luck learning and I'm sure you're getting better every day, but there is definitely something you can do now to improve readability of your articles.

Read next

sean2024 profile image

Day 2: Leetcode

sean2024 -

oculus42 profile image

Do we need Promise.allSettled()?

Samuel Rouse -

leemeganj profile image

Enhancing two-way data binding in Angular

Megan Lee -

olga_tash profile image

SVAR Gantt: New Open Source, Interactive Gantt Chart for React

Olga T. -