Default Function Properties – Complete Guide to Function's Built-In Variables
Default function properties are the built-in variables available in every function declaration.
In other words, JavaScript, by default, adds the following six (6) properties to your function declarations:
argumentscallerlengthnameprototype[[Prototype]](also known as__proto__or dunder proto)
Here's an example:
// Declare a function on the Firefox browser's console:
function play() {}
// Call the play function:
play;
// The call above will return:
function play():
arguments: null
caller: null
length: 0
name: "play"
prototype: Object {...}
[[Prototype]]: function()
Video: Demo of the 6 default function properties in JavaScript.
You can see that the browser returned the play function containing six (6) properties:
argumentscallerlengthnameprototype[[Prototype]]
Let's discuss the six default properties now.
What Is the Default arguments Property in JavaScript Functions?
JavaScript uses the arguments property to encase all the arguments (values) you pass to a function's parameters through the function's invocator.
Note the following:
- The
argumentsproperty's value is an array-like object containing a list of the function's arguments (parameters' values). - The
argumentsobject also contains default properties such ascalleeandSymbol(Symbol.iterator).
Here's an example:
// Define a function:
function listBodyParts(part1, part2) {
return arguments;
}
// Invoke the listBodyParts function while passing some values to its parameters:
listBodyParts("Eye", "Leg");
// The invocation above will return:
// ["Eye", "Leg", callee: ƒ, Symbol(Symbol.iterator): ƒ]
// Note: Some browser's output may look like so:
// { 0: "Eye", 1: "Leg", callee: ƒ, length: 2, Symbol(Symbol.iterator): ƒ}
The snippet above returned the arguments property's value (an array-like object containing a list of arguments).
Learn CSS Grid with Images
Here's another example:
// Define a function:
function knowMyBody(part1, part2) {
return `My ${arguments[1]} has an ${arguments[0]}!`;
}
// Invoke the knowMyBody function while passing some values to its parameters:
knowMyBody("Eye", "Leg");
// The invocation above will return:
// "My Leg has an Eye!"
The snippet above used some of the arguments property's values as part of the returned sentence's variables.
What Is the Default caller Property in JavaScript Functions?
JavaScript has deprecated the caller property. So, avoid using it. It may stop working at any time. This section exists for reference purposes only.
caller references the function that invoked the property's function.
Here's an example:
// Define a function:
function checkManager() {
return checkManager.caller;
}
// Define another function:
function checkPresident() {
return checkManager();
}
// Invoke the checkPresident function above:
checkPresident();
// The invocation above will return:
function checkPresident() {
return checkManager();
}
checkPresident() invoked the checkManager() function in the snippet above. Therefore, the caller property referenced checkPresident().
The caller property will return null for strict, async function, and generator function callers.
Here's an example:
// Define a function:
function checkManager() {
return `${checkManager.caller} called the checkManager function.`;
}
// Define another function:
function checkPresident() {
"use strict";
return checkManager();
}
// Invoke the checkPresident() function above:
checkPresident();
// The invocation above will return:
// "null called the checkManager function."
The caller property returned null because checkPresident() invoked checkManager() in strict mode.
What Is the Default length Property in JavaScript Functions?
JavaScript uses the length property to indicate the function's total number of regular parameters.
Here's an example:
// Define a function:
function checkParameter(p1, p2, p3, p4) {
return `This function has ${checkParameter.length} parameters.`;
}
// Invoke the checkParameter function:
checkParameter();
// The invocation above will return:
// "This function has 4 parameters."
The length property ignores non-regular parameters like the rest parameter. For instance, consider the following code:
// Define a function:
function checkParameter(p1, p2, p3, ...p4) {
return `This function has ${checkParameter.length} parameters.`;
}
// Invoke the checkParameter function above:
checkParameter();
// The invocation above will return:
// "This function has 3 parameters."
The length property returned 3 because it ignores irregular parameters like the rest parameter (...p4).
Build your website with Namecheap
What Is the Default name Property in JavaScript Functions?
JavaScript uses the name property to record the function's name as defined at its creation.
Here's an example:
// Define a function:
function checkName() {
return `This function's name is: ${checkName.name}.`;
}
// Invoke the checkName function:
checkName();
// The invocation above will return:
// "This function's name is: checkName."
Browsers may use an empty string as an anonymous function's name.
Here's an example:
// Invoke an anonymous function's name:
(function () {}).name;
// The invocation above will return: ""
What Is the Default prototype Property in JavaScript Functions?
The prototype property stores the features a function will share with its object instances.
In other words, whenever you use the new operator to construct a new object from an existing function. In that case, JavaScript will share the function's prototype property with the newly created object.
Whatever function you call with the new keyword becomes a constructor function.
For instance, the new createBook code below makes createBook a constructor function.
function createBook() {}
const book1 = new createBook();
console.log(book1);
The snippet above used the new keyword to construct a new object from createBook(). Therefore, the book1 object is an instance of the createBook() constructor function.
JavaScript shares only the features you define in a constructor function's prototype property with the constructor's object instances. It does not share other items, such as the statements in the function's body.
For instance, the Array() constructor function has some default properties. However, any new object you create with the new Array() syntax will inherit only the items in the prototype property.
Video: The demo uses JavaScript Array to show you an example of the prototypal inheritance.
Below are eight essential facts to remember about the prototype property.
1. The return operator does not cause objects to inherit prototype
Objects that functions produce with the return keyword do not inherit the prototype property.
For instance, consider the following code:
// Define a function:
function companyProfile() {
return {};
}
// Create an object based on the companyProfile() function:
const bestWebsite = companyProfile();
// Check bestWebsite's content:
bestWebsite;
// The invocation above will return: {}
In the snippet above,
bestWebsite's content is an object thatcompanyProfile()produced with thereturnkeyword.
Let's see what will happen if we store a property in the companyProfile()'s prototype.
// Add a property to the companyProfile's prototype:
companyProfile.prototype.name = "CodeSweetly";
// Invoke the name property from the bestWebsite object:
bestWebsite.name;
// The invocation above will return: undefined
The snippet above returned undefined because of the following reasons:
- JavaScript could not find a
nameproperty in thebestWebsiteobject. bestWebsitedid not inherit thecompanyProfile'sprototypebecause it is a returned object.
You can make bestWebsite inherit companyProfile's prototype by creating the object with the new operator like so:
// Define a function:
function companyProfile() {}
// Create an object based on the companyProfile() function:
const bestWebsite = new companyProfile();
// Check bestWebsite's content:
bestWebsite;
// The invocation above will return: {}
In the snippet above,
bestWebsite's content is an object thatcompanyProfile()produced with thenewkeyword.
Let's see what will happen if you store a property in the companyProfile()'s prototype.
// Add a property to the companyProfile's prototype:
companyProfile.prototype.name = "CodeSweetly";
// Invoke the name property from the bestWebsite object:
bestWebsite.name;
// The invocation above will return: "CodeSweetly"
The snippet above returned "CodeSweetly" because of the following reasons:
- The
newkeyword caused thebestWebsiteobject to inherit thecompanyProfile'sprototypeproperty. companyProfile'sprototypehas anameproperty whichbestWebsitealso inherited.
Want tech support right now?
2. An object is prototype's default value
The prototype property's default value is an object containing constructor and [[Prototype]] properties.
For instance, consider the following code:
// Define a function:
function companyProfile() {}
// Check the companyProfile's prototype property's content:
companyProfile.prototype;
// The invocation above will return:
// {...}:
// constructor: function companyProfile()
// [[Prototype]]: Object {...}
constructorreferences the function itself.[[Prototype]]references theprototypeproperty the function inherited from its constructor. We sometimes call it "dunder proto."
3. The prototype property is mutable
Although an object is prototype's default value, you can change it to any data type or add extra items.
Here's an example:
// Define a function:
function companyProfile() {}
// Check the companyProfile's prototype property's content:
companyProfile.prototype;
// The invocation above will return:
// {...}:
// constructor: function companyProfile()
// [[Prototype]]: Object {...}
// Add a new property to the companyProfile's prototype property:
companyProfile.prototype.name = "CodeSweetly";
// Check the companyProfile's prototype property's content:
companyProfile.prototype;
// The invocation above will return:
// {...}:
// constructor: function companyProfile()
// name: "CodeSweetly"
// [[Prototype]]: Object {...}
// Change the constructor property's value:
companyProfile.prototype.constructor = "You were a function but now a string!";
// Check the companyProfile's prototype property's content:
companyProfile.prototype;
// The invocation above will return:
// {...}:
// constructor: "You were a function but now a string!"
// name: "CodeSweetly"
// [[Prototype]]: Object {...}
// Replace the entire content of the companyProfile's prototype property:
companyProfile.prototype = {
totalReplacement: "This is a complete replacement!!!",
};
// Check the companyProfile's prototype property's content:
companyProfile.prototype;
// The invocation above will return:
// {...}:
// totalReplacement: "This is a complete replacement!!!"
// [[Prototype]]: Object {...}
You can see that JavaScript gives you complete control of the prototype property. But "with great freedom comes great responsibility—Eleanor Roosevelt."
4. Modify prototype with caution!
Some alterations on the prototype property will break the inheritance chain of the function and its subsequent object instances. So, be careful while modifying it.
You should prefer adding items to prototype's default object rather than replacing it.
For instance, companyProfile.prototype = { name: "value" } will break companyProfile's prototype chain—which you should avoid.
A better alternative is to update the default object by adding items like this: companyProfile.prototype.name = "value".
5. New prototype object needs a new constructor
Suppose you choose to replace prototype's default object with a new value. In that case, remember to define a new constructor property. Otherwise, your function's prototype will have no constructor feature. And its object instances will inherit Object()'s prototype directly.
Here's an example:
// Define a function:
function Box() {}
// Create an object based on the Box() function:
const boxObject1 = new Box();
// Check if the boxObject1's dunder proto is the same as the global Object's prototype property:
Object.getPrototypeOf(boxObject1) === Object.prototype; // returns false
// Note: The invocation above returned false because boxObject1 inherited Box's prototype—not Object()'s.
// Replace the entire content of Box's prototype property:
Box.prototype = "Toys";
// Note: Replacing the default prototype alters Box's inheritance system.
// Create a new object based on the Box() function:
const boxObject2 = new Box();
// Check if the boxObject2's dunder proto is the same as the global Object's prototype property:
Object.getPrototypeOf(boxObject2) === Object.prototype; // returns true
// Note: The invocation above returned true because boxObject2 inherited Object()'s prototype directly—not Box's.
boxObject2 inherited the global Object's prototype directly because we replaced Box's prototype without providing a new constructor property.
Design and develop at the same time
6. Avoid modifying built-in objects' prototype properties
Extending any built-in prototypes, such as the Object.prototype, is a bad coding practice because it breaks JavaScript's prototype chain.
In other words, avoid altering the prototype property of the objects you did not create.
- Monkey patching is the act of extending a built-in object's
prototype. - Although you may find monkey patching in some popular frameworks, it is best to avoid cluttering built-in objects' prototypes with additional non-standard features—except if you want to backport newer JavaScript features, like
Array.forEach. - "Extending an object" means adding to or modifying the object's features.
7. Put static items in the prototype property
Developers typically structure a constructor function as follows:
- Define dynamic items, like variables, in the constructor function's body.
- Define static data, like methods, in the constructor function's
prototypeproperty.
Here's an example:
// Define a constructor with only properties:
function MyCar(whl, gBox, mirr) {
this.wheel = whl;
this.gearbox = gBox;
this.mirrors = mirr;
}
// Define MyCar's methods inside its prototype:
MyCar.prototype.showFeatures = function () {
return `My car has ${this.wheel} wheels, ${this.gearbox} gearbox, and ${this.mirrors} mirrors.`;
};
The snippet above structured the constructor function as follows:
MyCar's body contains items whose values users may change (dynamic values).MyCar'sprototypehas items whose value we do not expect users to alter (static value).
Note the following:
- A constructor function contains own and prototype items.
- Own properties are the items in an object's body.
- Prototype features are the items in an object's
prototypeproperty. wheel,gearbox, andmirrorsare the owned properties because they are not inheritable through theprototypeproperty.showFeaturesis a shared feature becauseMyCar's object instances will inherit the method through the constructor'sprototypeproperty.- We used the
thiskeyword to assign the own properties toMyCar's object instances. - JavaScript creates new own properties whenever you use the
newkeyword to construct a new object instance. In contrast, the computer shares a constructor's prototype features with all object instances. It doesn't create new prototype items.
8. Some functions do not have a default prototype property
Arrow functions, methods, and asynchronous functions do not have built-in prototype properties. Therefore, you cannot use them as constructor functions—even if you later add a prototype manually.
For instance, consider the following code:
const myArrowFunction = () => {};
const myMethod = { oluwatobi() {} };
async function myAsyncFunction() {}
myArrowFunction.prototype; // returns undefined
myMethod.oluwatobi.prototype; // returns undefined
myAsyncFunction.prototype; // returns undefined
The invocations in the snippet above returned undefined because arrow functions, methods, and asynchronous functions do not have built-in prototype properties.
What Is the Default [[Prototype]] Property in JavaScript Functions?
[[Prototype]] is the prototype property a function (or object) inherits from its constructor.
- The
[[Prototype]]property is sometimes called the dunder proto, inherited prototype,<prototype>, or__proto__. __proto__has two underscore characters on either side ofproto.
Here's an example:
// Define a function:
function companyProfile() {}
// Check the companyProfile's prototype property's content:
companyProfile.prototype;
// The invocation above will return:
// {...}:
// constructor: function companyProfile()
// [[Prototype]]: Object {...}
The snippet above returned an object that all the companyProfile's object instances will inherit.
In other words, companyProfile.prototype is equivalent to the companyProfile's object instances' dunder proto.
Here's an example:
// Define a function:
function companyProfile() {}
// Create an object based on the companyProfile function:
const bestWebsite = new companyProfile();
// Check bestWebsite's dunder proto's content:
Object.getPrototypeOf(bestWebsite);
// The invocation above will return:
// {...}:
// constructor: function companyProfile()
// [[Prototype]]: Object {...}
// Check if companyProfile's prototype is equivalent to bestWebsite's dunder proto:
companyProfile.prototype === Object.getPrototypeOf(bestWebsite);
// The invocation above will return: true
You can see that Object.getPrototypeOf(bestWebsite) returned the same value as companyProfile.prototype. The reason is that bestWebsite's dunder proto contains the prototype that the object inherited from its constructor (companyProfile).
__proto__ is now deprecated. We previously used it to check the content of an object's dunder proto.
Here's an example:
// Define a function:
function companyProfile() {}
// Create an object based on the companyProfile function above:
const bestWebsite = new companyProfile();
// Instead of Object.getPrototypeOf(bestWebsite), we previously __proto__ to check an object's dunder proto:
bestWebsite.__proto__;
// The invocation above will return:
// {...}:
// constructor: function companyProfile()
// [[Prototype]]: Object {...}
// Check if companyProfile's prototype is equivalent to bestWebsite's dunder proto:
companyProfile.prototype === bestWebsite.__proto__;
// The invocation above will return: true
// Instead of Object.getPrototypeOf(Object.getPrototypeOf(bestWebsite)), we previously used:
bestWebsite.__proto__.__proto__;
// The invocation above will return an output similar to the following:
// {constructor: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}:
// constructor: ƒ Object()
// hasOwnProperty: ƒ hasOwnProperty()
// isPrototypeOf: ƒ isPrototypeOf()
// propertyIsEnumerable: ƒ propertyIsEnumerable()
// toLocaleString: ƒ toLocaleString()
// toString: ƒ toString()
// valueOf: ƒ valueOf()
Developers typically use the term "prototype chain" to reference JavaScript's inheritance system. Let's see how it works.
A slick computer trick that makes mistakes disappear
How JavaScript's Inheritance System Works
Consider the constructor function below and its object instance.
// Define a constructor function:
function MyCar(whl, gBox, mirr) {
this.wheel = whl;
this.gearbox = gBox;
this.mirrors = mirr;
}
// Create an object based on MyCar:
const mySpecialCar = new MyCar(35, 1, 7);
The snippet above created mySpecialCar object from MyCar() constructor function.
Suppose you invoke a feature that isn't one of MyCar()'s own properties (for instance, mySpecialCar.valueOf()). In that case, here is what JavaScript will do:
- The steps below use the
[[Prototype]]syntax for simplicity and readability. [[Prototype]]is equivalent to theObject.getPrototypeOf()method (or the deprecated__proto__accessor property).
1. Check if mySpecialCar object has a valueOf() method
The computer will check for a valueOf() method in the mySpecialCar object instance. But it will find none, so it moves to the next scope to continue its quest.
2. Check if mySpecialCar's dunder proto has a valueOf() method
Since valueOf() is not in the mySpecialCar object, JavaScript will check if mySpecialCar's dunder proto has a valueOf() method as one of its properties.
In other words, the computer looks for valueOf() in mySpecialCar.[[Prototype]]. But it will find none there either, so it climbs up the ladder to the next scope.
mySpecialCar.[[Prototype]]'s value is equivalent to MyCar.prototype.
3. Check if mySpecialCar's dunder proto's [[Prototype]] has a valueOf() method
JavaScript will check if the dunder proto of mySpecialCar's [[Prototype]] has a valueOf() method as one of its properties.
In other words, the computer looks for valueOf() in mySpecialCar.[[Prototype]].[[Prototype]]. And it finds it there!!!
mySpecialCar.[[Prototype]].[[Prototype]]'s value is equivalent to Object.prototype.
Therefore, the mySpecialCar instance object will inherit the valueOf() method from Object.prototype.
As a result, the mySpecialCar.valueOf() invocation will successfully return mySpecialCar's value ({wheel: 35, gearbox: 1, mirrors: 7}).
Here's an example:
// Define a constructor function:
function MyCar(whl, gBox, mirr) {
this.wheel = whl;
this.gearbox = gBox;
this.mirrors = mirr;
}
// Create an object based on MyCar() constructor function:
const mySpecialCar = new MyCar(35, 1, 7);
// Display mySpecialCar's value:
mySpecialCar.valueOf();
// The invocation above will return:
// {wheel: 35, gearbox: 1, mirrors: 7}
JavaScript's inheritance system is sometimes called "prototype chain" or "prototypal inheritance."
Prototypal inheritance refers to objects inheriting a constructor's prototype.
In other words, you can say that mySpecialCar prototypically inherits the valueOf() method from the Object() constructor's prototype property.
TLDR
The main gist of the walk-through above is that JavaScript does not limit its search for a feature to an object instance's scope only. Instead, it also checks the following environments:
- The object instance's dunder proto.
- The dunder proto of the object instance's dunder proto.
- And so on till the computer finds a matching feature or the search reaches the end of the prototype chain.
JavaScript returns undefined if it does not find the searched feature in the prototype chain.
Build your website with Namecheap
What Scope Ends JavaScript's Prototype Chain?
The Object() constructor function's scope ends JavaScript's prototype chain.
In other words, Object() has no dunder proto. It sits at the top of the JavaScript prototype chain.
Below are examples of the prototype chain in JavaScript.
What ends an Object instance's prototype chain?
// Create an object:
const myObject = Object();
// Check myObject's prototype chain:
Object.getPrototypeOf(Object.getPrototypeOf(myObject)); // Equivalent to: myObject.__proto__.__proto__
// The invocation above will return: null
The snippet above returned null because Object() is the prototype chain's final link.
myObjectinheritedObject()'sprototype(myObject.[[Prototype]]).Object()inherits no constructor'sprototype. So,myObject.[[Prototype]].[[Prototype]]'s value isnull.
Therefore, myObject's prototype chain looks like this:
{} ---> Object.prototype ---> null
What ends an Array instance's prototype chain?
// Create an array:
const myArray = Array();
// Check myArray's prototype chain:
Object.getPrototypeOf(Object.getPrototypeOf(Object.getPrototypeOf(myArray))); // Equivalent to: myArray.__proto__.__proto__.__proto__
// The invocation above will return: null
The snippet above returned null because Object() is the prototype chain's final link.
myArrayinheritedArray()'sprototype(myArray.[[Prototype]]).Array()inheritedObject()'sprototype(myArray.[[Prototype]].[[Prototype]]).Object()inherits no constructor'sprototype. So,myArray.[[Prototype]].[[Prototype]].[[Prototype]]'s value isnull.
Therefore, myArray's prototype chain looks like this:
[] ---> Array.prototype ---> Object.prototype ---> null
What ends a Function instance's prototype chain?
// Create a function:
const myFunction = Function();
// Check myFunction's prototype chain:
Object.getPrototypeOf(Object.getPrototypeOf(Object.getPrototypeOf(myFunction))); // Equivalent to: myFunction.__proto__.__proto__.__proto__
// The invocation above will return: null
The snippet above returned null because Object() is the prototype chain's final link.
myFunctioninheritedFunction()'sprototype(myFunction.[[Prototype]]).Function()inheritedObject()'sprototype(myFunction.[[Prototype]].[[Prototype]]).Object()inherits no constructor'sprototype. So,myFunction.[[Prototype]].[[Prototype]].[[Prototype]]'s value isnull.
Therefore, myFunction's prototype chain looks like this:
function anonymous() {} ---> Function.prototype ---> Object.prototype ---> null
What ends the wifeProfile instance's prototype chain?
// Create an object:
const myName = { name: "Oluwatobi" };
// Create another object based on myName:
const bestFriend = Object.create(myName);
// Create a third object based on bestFriend:
const wifeProfile = Object.create(bestFriend);
// Check wifeProfile's prototype chain:
Object.getPrototypeOf(
Object.getPrototypeOf(
Object.getPrototypeOf(Object.getPrototypeOf(wifeProfile))
)
); // Equivalent to: wifeProfile.__proto__.__proto__.__proto__.__proto__
// The invocation above will return: null
The new object the Object.create() method creates uses the method's first argument as its prototype.
The snippet above returned null because Object() is the prototype chain's final link.
wifeProfileinheritedbestFriendas its dunder proto (wifeProfile.[[Prototype]]).bestFriendinheritedmyNameas its dunder proto (wifeProfile.[[Prototype]].[[Prototype]]).myNameinheritedObject()'sprototype(myName.[[Prototype]].[[Prototype]].[[Prototype]]).Object()inherits no constructor'sprototype. So,myFunction.[[Prototype]].[[Prototype]].[[Prototype]].[[Prototype]]'s value isnull.
Therefore, wifeProfile's prototype chain looks like this:
{} ---> {} ---> { name: "Oluwatobi" } ---> Object.prototype ---> null
The four examples above show that JavaScript's inheritance chain ends at the Object() constructor function's scope.
Let's use a diagram to illustrate the prototype chain.
A slick computer trick that makes mistakes disappear
The JavaScript prototype chain diagram
The code below describes mySpecialCar's prototype chain.
// Define a constructor function:
function MyCar(whl) {
this.wheel = whl;
}
// Create an object based on the MyCar constructor function:
const mySpecialCar = new MyCar(35);
// Check mySpecialCar's prototype chain:
Object.getPrototypeOf(
Object.getPrototypeOf(Object.getPrototypeOf(mySpecialCar))
); // Equivalent to: mySpecialCar.__proto__.__proto__.__proto__
// The invocation above will return: null
The snippet above returned null because Object() is the prototype chain's final link.
mySpecialCarinheritedMyCar'sprototype(mySpecialCar.[[Prototype]]).MyCarinheritedObject()'sprototype(mySpecialCar.[[Prototype]].[[Prototype]]).Object()inherits no constructor'sprototype. So,mySpecialCar.[[Prototype]].[[Prototype]].[[Prototype]]'s value isnull.
Therefore, mySpecialCar's prototype chain looks like this:
{ wheel: 35 } ---> MyCar.prototype ---> Object.prototype ---> null
Below is the diagram illustrating mySpecialCar's prototype chain.
mySpecialCar has the prototypes of only MyCar and Object in its
prototype chain.
The diagram above shows that the Object() constructor function is the prototype chain's last link—it inherits nothing (null) from any other constructor.
Although we used a constructor function in the illustration above, the diagram works for all JavaScript objects—regardless of how you've created them.
Suppose you wish to set an object's dunder proto during its creation rather than alter its prototype chain afterward. How can you do this? Let's find out.
How to Specify an Object's Dunder Proto at Creation Time
There are two main ways to specify an object's dunder proto ([[Prototype]]) at creation time (when you are creating the object).
- Use the
Object.create()method. - Use
__proto__as an object literal's own property.
To use __proto__ as an object literal's own property is acceptable, optimized, and not deprecated. We will discuss this in detail later in this article.
Let's discuss the two techniques now.
How to use the Object.create() method to specify an object's dunder proto
The Object.create() method does the following:
- It creates a new object.
- It makes its first argument the newly created object's dunder proto.
Therefore, you can use Object.create() to specify an object's dunder proto like so:
// Create an object:
const myName = { name: "Oluwatobi" };
// Create another object based on myName:
const bestFriend = Object.create(myName);
// Check bestFriend's content:
bestFriend;
// The invocation above will return: {}
// Check bestFriend's dunder proto:
Object.getPrototypeOf(bestFriend); // Equivalent to: bestFriend.__proto__
// The invocation above will return: { name: "Oluwatobi" }
The snippet above used Object.create() to create a new object and assign myName as the newly created object's dunder proto.
Let's see the second way to specify an object's dunder proto at creation time.
Turn your passion into a business
How to use __proto__ to specify an object's dunder proto
Instead of the Object.create() method, you can define a __proto__ property directly in an object literal like so:
// Create an object:
const myName = { name: "Oluwatobi" };
// Create another object based on myName:
const bestFriend = { __proto__: myName };
// Check bestFriend's content:
bestFriend;
// The invocation above will return: {}
// Check bestFriend's prototype:
Object.getPrototypeOf(bestFriend); // Equivalent to: bestFriend.__proto__
// The invocation above will return: { name: "Oluwatobi" }
The snippet above used __proto__ as an own property to assign myName as the newly created object's dunder prototype.
JavaScript allows only one __proto__ property in an object literal. Otherwise, it will throw a SyntaxError.
__proto__ Own Property vs. __proto__ Prototype Accessor: What's the Difference?
To use __proto__ as an own property and to use it as a prototype accessor works in different ways. The sections below discuss the main distinctions between them.
What is a __proto__ own property?
A __proto__ own property allows you to define an object literal's dunder proto at creation time.
Here's an example:
const myName = { name: "Oluwatobi" };
const bestFriend = { __proto__: myName };
The snippet above used __proto__ as the object literal ({})'s own property.
In this instance, __proto__ is standardized, optimized, and not deprecated. You can freely use it in your codebase. Its performance may even be better than the Object.create() method.
- The
__proto__: valuesyntax does not create a property named__proto__. We use it to define the value of an object literal's dunder proto. __proto__'s value must be an object ornull. Otherwise, JavaScript will not change the object literal's dunder proto.
What is a __proto__ prototype accessor?
A __proto__ accessor allows you to access an object's inherited prototype.
Here's an example:
const bestFriend = {};
bestFriend.__proto__;
The snippet above used __proto__ to access the prototype bestFriend inherited from its constructor.
In this instance, __proto__ is non-standard, deprecated, and no longer recommended. A better alternative is to use Object.getPrototypeOf() like so:
const bestFriend = {};
Object.getPrototypeOf(bestFriend);
Suppose you wish to check whether a specific prototype exists in an object's prototype chain. How can you do this? Let's find out.
How to Confirm If a Specific prototype Exists in an Object's Prototype Chain
Use the isPrototypeOf() method to check if a specific prototype exists in an object's prototype chain.
Example 1: How to check if Object.prototype is in MyCar's prototype chain
// Define a constructor function:
function MyCar() {}
// Check if Object.prototype exists in MyCar's prototype chain:
Object.prototype.isPrototypeOf(MyCar);
// The invocation above will return: true
The snippet above returned true because MyCar inherited the global Object()'s prototype from Function.prototype. Therefore, Object's prototype is one of MyCar's dunder protos.
In other words,
Object.prototype === Object.getPrototypeOf(Object.getPrototypeOf(MyCar));
// The code above is equivalent to the deprecated __proto__ syntax:
// Object.prototype === MyCar.__proto__.__proto__
Use Flexbox like a pro
Example 2: How to check if two given prototypes exist in mySpecialCar's prototype chain
// Define a constructor function:
function MyCar() {}
// Create an object based on the MyCar constructor function:
const mySpecialCar = new MyCar();
// Check if MyCar.prototype exists in mySpecialCar's prototype chain:
MyCar.prototype.isPrototypeOf(mySpecialCar);
// The invocation above will return: true
// Check if Object.prototype exists in mySpecialCar's prototype chain:
Object.prototype.isPrototypeOf(mySpecialCar);
// The invocation above will return: true
The snippet above returned true because mySpecialCar inherited MyCar's prototype. Therefore, MyCar.prototype and Object.prototype are part of MyCar's dunder protos.
Example 3: How to check if MyCar.prototype is in mySpecialCar's prototype chain
// Define a constructor function:
function MyCar() {}
// Define another constructor function:
function WifeCar() {}
// Define a third constructor function:
function ChildCar() {}
// Change the WifeCar's dunder proto to MyCar's prototype:
WifeCar.prototype = {
constructor: WifeCar, // Added to retain WifeCar's constructor.
__proto__: MyCar.prototype,
};
// Change the ChildCar's dunder proto to WifeCar's prototype:
ChildCar.prototype = {
constructor: ChildCar, // Added to retain ChildCar's constructor.
__proto__: WifeCar.prototype,
};
// Create an object based on the ChildCar constructor function:
const mySpecialCar = new ChildCar();
// Check if MyCar.prototype exists in mySpecialCar's prototype chain:
MyCar.prototype.isPrototypeOf(mySpecialCar);
// The invocation above will return: true
The snippet above returned true because mySpecialCar inherited MyCar's prototype from WifeCar.prototype. Therefore, MyCar's prototype is one of mySpecialCar's dunder protos.
Now that you know what prototype is, we can discuss why it is an essential JavaScript feature.
Why Is Prototype Essential in JavaScript?
Prototype helps you optimize your code by allowing objects to inherit one another's features.
In other words, a JavaScript prototype is the chain linking one object to another object.
For instance, suppose you want users to use a getInfo() method to access some books' data. In that case, you can add the method as each book's own property like so:
// Define a book object:
const book1 = {
name: "React Explained Clearly",
pages: 269,
formats: ["kindle", "paperback", "hardcover"],
getInfo(key) {
return this[key];
},
};
// Define another book object:
const book2 = {
name: "Creating NPM Package",
pages: 174,
formats: ["kindle", "paperback"],
getInfo(key) {
return this[key];
},
};
// Define a third book object:
const book3 = {
name: "The CSS Grid Guidebook",
pages: 123,
formats: ["kindle", "paperback"],
getInfo(key) {
return this[key];
},
};
// Get the second book's total pages:
book2.getInfo("pages");
// The invocation above will return: 174
The snippet above works—but it is subpar. Repeating the same method in each object is redundant and unnecessary. A better way to lower memory usage is to set getInfo() as each book's dunder proto on creation.
Here's an example:
// Define a getInfo method:
const getInfoMethod = {
getInfo(key) {
return this[key];
},
};
// Define a book object:
const book1 = {
name: "React Explained Clearly",
pages: 269,
formats: ["kindle", "paperback", "hardcover"],
__proto__: getInfoMethod,
};
// Define another book object:
const book2 = {
name: "Creating NPM Package",
pages: 174,
formats: ["kindle", "paperback"],
__proto__: getInfoMethod,
};
// Define a third book object:
const book3 = {
name: "The CSS Grid Guidebook",
pages: 123,
formats: ["kindle", "paperback"],
__proto__: getInfoMethod,
};
// Get the second book's total pages:
book2.getInfo("pages");
// The invocation above will return: 174
You can see that we now have only one getInfo() method rather than three for the three books.
Although the code above is more performant than using the getInfo() method as each book's own feature, you can better optimize memory usage by using a constructor function's prototype property to predefine each book's dunder proto.
Here's an example:
// Define a constructor function:
function Book(name, pages, formats) {
this.name = name;
this.pages = pages;
this.formats = formats;
}
// Add the getInfo method to Book's prototype property:
Book.prototype.getInfo = function (key) {
return this[key];
};
// Define a book object:
const book1 = new Book("React Explained Clearly", 269, [
"kindle",
"paperback",
"hardcover",
]);
// Define another book object:
const book2 = new Book("Creating NPM Package", 174, ["kindle", "paperback"]);
// Define a third book object:
const book3 = new Book("The CSS Grid Guidebook", 123, ["kindle", "paperback"]);
// Get the second book's total pages:
book2.getInfo("pages");
// The invocation above will return: 174
The snippet above created each book instance from the Book() constructor function, which has a getInfo() method predefined in its prototype.
Therefore, every new book object you create from the Book() constructor will inherit the getInfo() method automatically, which reduces the memory required to create new books.
Overview
This article discussed the six default function properties. We also used examples to discuss how JavaScript's inheritance system works.
Your support matters: Buy me a coffee to support CodeSweetly's mission of simplifying coding concepts.
Join CodeSweetly Newsletter