#3 Design Patterns — Prototype Pattern

Hello Everyone, Welcome to my blog 🙏.
I hope you are all safe and that this blog finds you in good health ❤️.

In my previous blogs, we have learnt about
1. What are design patterns and What is Observer Pattern?
2. What is Constructor Pattern?

In this blog, we will learn more about
👉 Prototype Pattern

Prototype Pattern

A prototype pattern is used in sharing the properties among objects of the same type i.e. Objects that are created with the same constructor.

How does Prototype Pattern work?
To understand it better, Let us take an example

In my previous blog, we know that Steve had a boutique, where he manufactures high-quality shirts and also customers like his collections and purchase them.
He imports High-quality fabrics from different countries which is a primary reason for his successful business. In his manufacturing factory, everything is automated with different machinery. For all his machines, there is a common
process followed to get similar shirts.
And also we have seen how the constructor pattern works.

Adding to that, Steve wants to upgrade his machines. He wants them to pack the shirts along with stitching.
Currently, this process is manual and time taking. So, he wants it to be automated.

Now, Let's understand how the prototype pattern is applied here.

Functional-based

Check out the working code for functional-based

Note: please use the browser console to check the output

Class-based

Check out the working code here for class-based

Note: please use the browser console to check the output

Now, Steve is super happy and he successfully upgraded all his machines with a new process i.e packing the shirts.
This way he can manufacture more shirts by minimising manual efforts and saving a lot of time.
Thanks to Prototype Pattern 🎯.

When to use the Prototype pattern?

As we know, All the plugins, packages, libraries, etc which we use in our projects are nothing but the best examples of constructor patterns.
Similarly, if we want to upgrade or add a few methods to any plugin without disturbing the original implementation then that is where we use
Prototype Pattern.

Before concluding my blog,

We all know Arrays in javascript and we also know it provides different methods like
.length → gives the size of an array
.sort → sorts an array

Now, the problem statement here is,
Create a method that should take an array as an input and it should print elements of that array as output.

I request each one of you to try it and post your answers in the comment section.

Here we go, That’s it folks for this blog. Hope everyone liked it.
If you like it, give it a clap 👏 ,
and share it with your friend.

For more exciting content on Frontend, Please do follow me 🎯.

Thanks a lot, Everyone 🙏.
Until Next time,
Happy Learning ✍️

Abhishek Kovuri, UI developer

#TWBloggersClub

--

--

--

UI developer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Learning JavaScript by Implementing Lodash Methods — Objects and Functions

Today We will learn Javascript Date Format

JavaScript Objects: A Comprehensive Guide for Beginners

Create Vue 3 Apps with the Composition API — Lifecycle Hooks and Refs

Using Airbnb’s React to Sketch app to generate Sketch style guide

Handling Api calls using MobX | React native

Code a reliable menu and tab-bar in a StencilJS + Ionic app

Shows menu open on left side and tab bar present behind.

Vuetify — Virtual Scroller and Click Outside

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Abhishek Kovuri

Abhishek Kovuri

UI developer

More from Medium

Front-end and Back-end Explained In Layman’s Terms

A group of people building the front end for a mobile application

Loading a Local Resource

HTML — Part-8 — Link Types

JavaScript Holy Grail — Part 2: Set And Map