What are Javascript Prototypes

Most explanations of javascript prototypes are going to go something like this:

What is a prototype? A prototype is an object. Every javascript object has a prototype.

 Wait a second... So you're telling me that every javascript object has a prototype and a prototype is an object itself? Is this some kind of "Javascript Inception?"

Ahaha... No my young ninja, anytime you create an object it automatically has this magical prototype object/functionality.

Let's dig in a little more. In order to learn about prototypes we must first define 3 javascript programming terms:

1. Objects
2. Properties
3. Methods

Let's take a look at a javascript object below:

function person(first, last){
	this.firstName = first;
	this.lastName = last;
	this.fullName = function(){
		return this.firstName + " " + this.lastName;
	}
}

var male = new person("John", "Doe");

Objects - Above we create a person object and a new person named "John Doe"

Properties - In the person object we have 2 properties which are this.firstName and this.lastName. We are saying that the person object has a first name and a last name.

Methods - A method is a function inside of an object. In the code above our method is this.fullName which will return the objects firstName and lastName in the form of a string.

🤩 Our Amazing Sponsors 👇

View Website

DigitalOcean offers a simple and reliable cloud hosting solution that enables developers to get their website or application up and running quickly.

View Website

Laravel News keeps you up to date with everything Laravel. Everything from framework news to new community packages, Laravel tutorials, and more.

View Website

A Laravel Starter Kit that includes Authentication, User Dashboard, Edit Profile, and a set of UI Components. Learn more about the DevDojo sponsorship program and see your logo here to get your brand in front of thousands of developers.

After creating a new object it is very easy to access the properties & methods. The code below will output the 'male' objects firstName and the next line will access the fullName method and output the persons full name.

console.log(male.firstName);
console.log(male.fullName());

And that's a basic overview of Objects, Properties, and Methods. Ok, Moving on...

Using the person object from the code above we are going to create 2 person objects:

var male = new person("John", "Doe");
var female = new person("Sally", "Jones");

Now, let's say that we want this person object to have a middle name. How might we do this?

Well, of course! We could always add this to the person object like so:

function person(first, middle, last){
	this.firstName = first;
	this.middleName = middle;
	this.lastName = last;
	this.fullName = function(){
		return this.firstName + " " + this.lastName;
	}
}

Great! That works fine, but what if we want to add the middle name property without editing the person object. To accomplish this we would access the person prototype object.

function person(first, last){
	this.firstName = first;
	this.lastName = last;
	this.fullName = function(){
		return this.firstName + " " + this.lastName;
	}
}

var male = new person("John", "Doe");
var female = new person("Sally", "Jones");

person.prototype.middleName = "Jay";
male.middleName = "James";
female.middleName = "May";

Above, we use the prototype object to add a new property to the person object. By default the middle name will be "Jay". We could also do this with methods:

person.prototype.greeting = function(){
	return "Hello, my name is " + this.firstName + " " + this.lastName;
}
console.log(male.greeting());
console.log(female.greeting());

We just added a new method to the person object through the prototype. The code above will output the following:

Hello, my name is John Doe 
Hello, my name is Sally Jones

And that's the basics on how Javascript Prototypes work!

To sum it all up, here's your final definition of "What are Javascript Prototypes?"

A prototype is a magic function(object) that lets us add dynamic properties and methods to any javascript object.