#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