Prototype Pattern in TypeScript — ✨ Creational Design Pattern #4

365kim
2 min readMay 6, 2023

--

Photo by Louis Verplancken on Unsplash

🙋🏻‍♀️ What is the Prototype Pattern?

The Prototype pattern is a design pattern used for duplicating existing objects by using prototype object.

In programming, a prototype refers to an interface of an object with the ability to be cloned. This makes sense because originally the term prototype means a first or typical version of a product from which other forms are copied.

The prototype object has clone() method, which creates an object of the current class and applies all of the field values of the old object to the new one. (Although the name ‘clone’ is common, it doesn’t have to be called so unless it has a certain way to create a copy of the object.)

✨ Simple TypeScript Example

Here, the Prototype<T> class serves as the prototype for creating new instances.

class Prototype<T> {
private elements: T[];

constructor(elements: T[]) {
this.elements = [...elements];
}

add(element: T) {
this.elements.push(element);
}

clone(): Prototype<T> {
return new Prototype(this.elements);
}
}

The add() method is used to add new elements to the prototype array.

More importantly, clone() method returns the new instance, which is a copy of the original. This is possible because private fields can be reached within the same class, although they are invisible from outside of the object.

Next, you create an instance called array1 and initialize it with an empty array of numbers.

const array1 = new Prototype<number>([]);

array1.add(1);
array1.add(2);

console.log(array1) // Prototype { elements: [1, 2] }

Let’s say you wish to create another array that has the same private property as array1.

const array2 = array1.clone();

console.log(array2) // Prototype { elements: [1, 2] }

Now, you can make any changes in array2 and these changes will not affect array1.

array2.add(9999);

console.log(array1) // Prototype { elements: [1, 2] }
console.log(array2) // Prototype { elements: [1, 2, 9999]}

🧑🏻‍💻 Use it or Avoid it

When to use it

The Prototype Pattern is useful when you need to create new objects that are similar to existing ones but with some modifications. Especially when creating new objects from scratch is a resource-intensive process or even impossible because some fields are private. It can also help improve code quality by reducing duplicated code.

When to avoid it

If creating a copy of the target object from scratch is very easy, then there’s no reason to be bothered to implement a clone method in the Prototype class. Or if you don’t want objects to have direct access to each other’s private fields, it’s better not to use it, because the Prototype Pattern might loosen encapsulation.

In short, by using Prototype pattern you can clone an existing object to create a new one with the desired modifications without the overhead of creating new objects from scratch.

--

--

365kim
365kim

Written by 365kim

Web Front-End Developer who believes Every Day Counts!

No responses yet