Logo

dev-resources.site

for different kinds of informations.

Prototyping Javascript { }

Published at
8/24/2020
Categories
javascript
webdev
tutorial
prototyping
Author
ashwani1218
Author
11 person written this
ashwani1218
open
Prototyping Javascript { }

Managing memory while writing code is one of the major qualities a developer can possess. Execution environment executes javascript code in two stages, i.e Creation and Hoisting.

Execution context: Creation and Hoisting

Execution context creates a couple of things before actually executing the code. Firstly it creates a Global Object and the outer environment and then sets up memory space for variables and functions which is called Hoisting. Before the code is executed memory is allocated so that the variables exist in memory.
Functions are written along with the code but that's not the case with variables instead a placeholder called as undefined is assigned to the variables and later in the execution phase where the code is executed line by line, the variables are assigned to their respective values. This helps in Dynamic typing or Coercion of javascript, wherein the type of variable is defined during the run time.
So to summarize all variables are initialized with undefined but functions are allocated with memory and therefore can be called even before it is defined. In the case of variables, we will get an undefined value.

 function person(firstname, lastname){
           return "Hello "+this.firstname+" "+this.lastname
      } 
}

In the above example, we have a function that takes in two arguments i.e. first and last name, and returns a greeting. Our javascript objects constitute of various functions like this, and these functions are allocated with memory during the hoisting phase of execution. Mind you, the more number of functions that are written in the object definition, the more memory is allocated to the object, and each time its instance is created.

Function constructors

Function constructors are normal functions that are used to construct objects. The this variable points a new empty object and that object is returned from the function automatically.
Creating a function constructor for the Person object.

function person(firstname, lastname){
    this.first = firstname;
    this.last = lastname;
}

let employee1 = new person("John" , "Doe");
let employee2 = new person("Jane", "Doe");

Now that we extend the properties of the person object we can add new variables on the fly. for eg:

employee1.designation = "Developer"
employee2.designation = "Tester"

Prototyping

Prototyping an object is a method that can be used to add member functions to the object prototype which will make it available to all its extended objects but will save memory as the method is only available in the prototype and not copied to every object.
This helps us to create base objects of sorts and extend their functionality without actually allocating the memory for functions.
for eg:

Person.prototype.getFullName = function(){
    return this.firstname+" "+this.lastname;
}
Person.prototype.greet = function(){
    return "Hello "+this.firstname+" "+this.lastname;
}

This above example will add two methods to the prototype available for the objects.

Javascript leverages this functionality to provide various functions on inbuilt data structures and types. If we closely watch the object definition of an array we can see the functions that javascript provides


Array prototype
In the object definition, we have proto which consists of various functions that a developer can use. When we define an array the functions are not allocated with memory, we can still use the methods.

Built-in function constructors

We can have our own methods which can be added to the prototype of the built-in function constructor. for eg

String.prototype.isLengthLessThan = function(boundary){
    return this.length < boundary;
}

The above method adds a function called isLengthLessThan() to the prototype of string.

Various javascript frameworks such as JQuery leverages these functionalities in jQuery.fn.init to write code that allocates minimum memory and provides tons of functionality to users.

Conclusion

Prototype objects is a way to go for creating objects with tons of functionalities with minimal memory allocation. There are a lot more things we can achieve using prototyping.

prototyping Article's
30 articles in total
Favicon
Launching AI Prototyping Projects
Favicon
Running AI Prototyping Projects
Favicon
Introducing AI Prototyping Projects
Favicon
MVP as an Excuse for Bad Code?
Favicon
AI-Driven App Prototyping: Speeding Up the Development Process
Favicon
Godot 2D & 3D Prototype Templates
Favicon
Flems.io
Favicon
Enhancing Collaboration in Development with Figma Prototypes
Favicon
The Significance of Information Architecture and Prototyping in UX | UX Series Part 4 of 6
Favicon
Designing the User Experience: User Journeys and Visual Design | UX Series Part 3 of 6
Favicon
PreVue 3.0: Vue’s most visual prototyping tool yet
Favicon
Here's What You Need to Know About Virtual Prototyping on a VR System
Favicon
20 Questions on Product Validation
Favicon
What Makes Electronics Prototyping so Important for Successful Product Development?
Favicon
Figma: Components
Favicon
Couple of custom written prototype methods for TypedArrays in JavaScript
Favicon
Prototyping today is happening like this !
Favicon
What Developers NEED to know when working with designs (video)
Favicon
Tech prototyping tools and libs for backend web devs πŸ’»πŸš€πŸŒ
Favicon
Tech prototyping tools and libs for frontend web devs πŸ’»πŸš€πŸŒ
Favicon
Who wins the fight between Figma and Adobe XD?
Favicon
rapid prototyping with json file database
Favicon
Parabeac-Core v1.1β€Š - Prototyping to FlutterΒ code
Favicon
Prototyping Javascript { }
Favicon
Tech Prototyping - 5 tips for developers
Favicon
Creating the unknown - What and what not to build in efficient prototypes
Favicon
Design Sprints - How we use it!
Favicon
Creating Demos with Svelte - Lessons Learned
Favicon
The Art of Validating Quickly
Favicon
A Lightweight React Library for creating clickable Prototypes

Featured ones: