The core of JavaScript; Prototypes

The prototypes are cores of an object. If you don’t have comprehension of the object and have not understood the formulation and structure of JavaScript about its core, you may intermittently get the reflections of consequence in form of pinpricks which certainly scratch your head and create huge difficulty at programming at first place.

What are prototypes of any objects -

Prototype is the first appearance of an object in JavaScript. They are essentially normal object which you create and use every time in your programme which goes inside the parenthesis {}, has ‘properties’ and ‘methods()’ in it which then returns the desired value depending upon how the method function is called along with its arguments or by keys in it. However it’s been known quite while about JavaScript that everything it contains is an object including Date, Math, String, Array, and Number. These are built-in other than the self created objects.

The prototype is not frequently used by developers for the reason of complication or never needed and made any constructor object due to the application of classes and non constructor object. Prototypes posit from outside of the constructor which is necessary to modify any constructor function unlike simple created objects.

This blog is divided into two parts, first is about the basic of object and second is the use of prototypes in any constructor objects.

Part I

The built in objects and custom objects -

Object contains properties and methods, properties can be anything a number, string, or array whereas methods strictly have functions.

Custom objects do have scope inside or outside depending upon the creation of it. These can be local unlike built in object and barely accessible within its scope.

A custom created object

The built in objects are global object it means it is globally applicable, accessible and usable anywhere within the programme which are written natively in JavaScript to reuse itself and to make programming easier. Example = Math Object .

Originally may differ than the actual object(Only for demonstration)

Constructor objects (This will be the main topic of the blog)

Its formation is not done using the normal method; using parenthesis {}. It seeks a function to be devised across JavaScript platform. Built-in and custom objects correspond to the constructor objects in spite of syntax dissimilarity; Both do not use the same way.

Unlike usual objects, constructor objects need ‘new’ keyword to be called inside the scope. Its calls also depend on scope; outside the scope new objects can’t be created or called.

Constructor object.

Part II

Use of prototypes

Suppose we have to add a property to any constructor object, how will this be done ?

Before using prototype to modify any object, I expect you to know how to modify and reassign existing object and new properties are added to populate non constructor object.

Adding new key to Built-in Object.

Prototype is used to alter constructor objects besides by means of substitution, modification and appending any property in constructor objects.

Assigning prototype

We’ve known how to add properties to non constructor objects but to add anything into construction we can’t simply use the same thing like we did above. Constructor functions take different syntax to diversify themselves.

Adding method using constructor.

Everything in JavaScript is object. Most of the objects we use regularly in JavaScript are constructor based. These constructor objects are rarely used during making any JavaScript programme though its methods are indispensable. These constructor objects have been hidden to manipulate the original method and properties.

Native constructor of JavaScript

The above native constructors contain many methods in them like Array.concat(),Array.splice(), Object.values() or String.replace() etc which are widely used by JavaScript developers.

The interesting fact about these functions is you can add your own method to the corresponding object. As we know these constructor objects are hidden but this doesn’t mean you can’t modify them, you can still modify them using Object.prototype.

Example

To demonstrate deep core of prototype, I am simply doing to check any string whether it is string or not. I am going to add isString() to the prototype of String constructor.

Remember ‘isString()’ is not a method of native JavaScript. The intercept of ‘valueOf()’ within the new method will be the string on which method function is being called(In my case it will be string ‘Alphabet’ ).

Adding new method to constructor.

Note: Prototypes are only used in constructor objects. Never modify the built-in object methods.

Thanks for reading.