Skip to content

4.11 Custom Constructors

Create Constructors

Task 1: Represent a laptop object in JavaScript. This laptop has an Intel i5 processor, 2GB RAM and 0.5TB storage.

var laptop = {
  processor: "i5",
  ram: "2GB",
  storage: "0.5TB"
};

Task 2: Create a constructor that creates laptop instances of different specifications. Hint: use the laptop properties in task 1.

function Laptop(proc, ram, stg){
  this.processor = proc;
  this.ram = ram;
  this.storage = stg;
}

var laptop1 = new Laptop("i5", "2GB", "0.5TB");
var laptop2 = new Laptop("i3", "2GB", "1TB");
var laptop3 = new Laptop("i7", "8GB", "2TB");

console.log(laptop1);
console.log(laptop2);
console.log(laptop3);

The result is as follows:

Laptop {processor: "i5", ram: "2GB", storage: "0.5TB"}
Laptop {processor: "i3", ram: "2GB", storage: "1TB"}
Laptop {processor: "i7", ram: "8GB", storage: "2TB"}

Constructor Naming Convention

It is a good practice to name constructors with the first letter capitalized.

Task 3: Create a constructor that creates user instances. Use the user object below.

/*
var user = {
  firstName: null,
  lastName: null,
  username: null,
  email: null,
  fullName: function(){
    return this.firstName + " " + this.lastName;
  }
}
*/

function User(fstName, lstName, usrname, email){
  this.firstName = fstName;
  this.lastName = lstName;
  this.username = usrname;
  this.email = email;
  this.fullName = function(){
    return this.firstName + " " + this.lastName;
  };
}

var user1 = new User("Ali", "Zaki", "AliZaki88", "alizaki@mail.com");

console.log(user1);
console.log(user1.fullName());

The result is as follows:

User {firstName: "Ali", lastName: "Zaki", username: "AliZaki88", email: "alizaki@mail.com", fullName: ƒ}
Ali Zaki

Task 4: Create a constructor that creates epic instances. Use the epic object below.

/*
var epic = {
  name: null,
  author: null,
  language: null,
  languageVerbose: function(){
    return `${this.name} was written in ${this.language}.`
  }
}
*/

function Epic(name, author, lang){
  this.name = name;
  this.author = author;
  this.language = lang;
  this.languageVerbose =  function(){
    return `${this.name} was written in ${this.language}.`
  }
}

var epic1 = new Epic("Mahabharata", "Vyasa", "Sanskrit");
var epic2 = new Epic("Ramayana", "Valmiki", "Sanskrit");

console.log(epic1);
console.log(epic1.languageVerbose());
console.log(".............................")
console.log(epic2);
console.log(epic2.languageVerbose());

This result is as follows:

Epic {name: "Mahabharata", author: "Vyasa", language: "Sanskrit", languageVerbose: ƒ}
Mahabharata was written in Sanskrit.
.............................
Epic {name: "Ramayana", author: "Valmiki", language: "Sanskrit", languageVerbose: ƒ}
Ramayana was written in Sanskrit.

Task 5: Create a constructor that creates video instances. Use the video object below.

/*
var video = {
  length: null,
  host: null,
  category: null,
  title: null,
  language: null
};
*/

function Video(title, len, h, lang, cat){
  this.title = title;
  this.length = len;
  this.host = h;
  this.language = lang;
  this.category = cat;
}

var video1 = new Video("Create a WordPress Theme", "30min", "Nawras Ali", "Arabic", "Education");

console.log(video1);

The result is: Video {title: "Create a WordPress Theme", length: "30min", host: "Nawras Ali", language: "Arabic", category: "Education"}

Task 6: Create a constructor that creates language instances. Use the language object below.

/*
var programmingLanguage = {
  name: null,
  os: null,
  filenameExtension: null
  stableRelease: null,
  stableReleaseVerbose: function(){
    return `The stable release of ${this.name} is ${this.stableRelease}.`;
  }
}
*/

function Language(name, os, ext, stableRel){
  this.name = name;
  this.os = os;
  this.extension = ext;
  this.stableRelease = stableRel;
  this.stableReleaseVerbose =  function(){
    return `The stable release of ${this.name} is ${this.stableRelease}.`;
  }
}

var lang1 = new Language("Python", "Linux, macOS, and Windows", "py", "3.8.3");
var lang2 = new Language("PHP", "Unix-like, Windows", "php", "7.4.10");

console.log(lang1);
console.log(lang1.stableReleaseVerbose());
console.log(".......................")
console.log(lang2);
console.log(lang2.stableReleaseVerbose());

The result is as follows:

Language {name: "Python", os: "Linux, macOS, and Windows", extension: "py", stableRelease: "3.8.3", stableReleaseVerbose: ƒ}
The stable release of Python is 3.8.3.
.......................
Language {name: "PHP", os: "Unix-like, Windows", extension: "php", stableRelease: "7.4.10", stableReleaseVerbose: ƒ}
The stable release of PHP is 7.4.10.

Task 7: Create a constructor that creates book instances. Use the book object below.

/*
var book = {
  weight: null,
  pages: null
};
*/

function Book(weight, pages){
  this.weight = weight;
  this.pages = pages;
}

var book1 = new Book(0.2, 200);

console.log(book1);

The result is: Book {weight: 0.2, pages: 200}


Prototype

Task 8: Refer to task 2; What is the constructor of laptop1 object?

function Laptop(proc, ram, stg){
  this.processor = proc;
  this.ram = ram;
  this.storage = stg;
}

var laptop1 = new Laptop("i5", "2GB", "0.5TB");
var laptop2 = new Laptop("i3", "2GB", "1TB");
var laptop3 = new Laptop("i7", "8GB", "2TB");

console.log(laptop1.constructor);

The result is as follows:

ƒ Laptop(proc, ram, stg){
  this.processor = proc;
  this.ram = ram;
  this.storage = stg;
}

Task 9: Refer to task 2; is laptop1 an instance of Laptop constructor?

function Laptop(proc, ram, stg){
  this.processor = proc;
  this.ram = ram;
  this.storage = stg;
}

var laptop1 = new Laptop("i5", "2GB", "0.5TB");
var laptop2 = new Laptop("i3", "2GB", "1TB");
var laptop3 = new Laptop("i7", "8GB", "2TB");

console.log(laptop1 instanceof Laptop);

The result is: true

Task 10: Refer to task 2; is laptop1 an instance of Object constructor?

function Laptop(proc, ram, stg){
  this.processor = proc;
  this.ram = ram;
  this.storage = stg;
}

var laptop1 = new Laptop("i5", "2GB", "0.5TB");
var laptop2 = new Laptop("i3", "2GB", "1TB");
var laptop3 = new Laptop("i7", "8GB", "2TB");

console.log(laptop1 instanceof Object);

The result is: true

Task 11: Refer to task 2; is Laptop constructor itself an instance of Object constructor?

function Laptop(proc, ram, stg){
  this.processor = proc;
  this.ram = ram;
  this.storage = stg;
}

var laptop1 = new Laptop("i5", "2GB", "0.5TB");
var laptop2 = new Laptop("i3", "2GB", "1TB");
var laptop3 = new Laptop("i7", "8GB", "2TB");

console.log(Laptop instanceof Object);

The result is: true

Functions are objects

We have learned before that functions are objects in JavaScript. A constructor itself is a function. Hence, a constructor is an instance of Object constructor.

Task 12: Use a dictionary of your choice, and find the meaning of the word prototype.

A prototype is a first or preliminary version of a device or vehicle from which other forms are developed.

Task 13: Refer to task 2; What is the prototype of Laptopconstructor? Hint: use Laptop.prototype.

function Laptop(proc, ram, stg){
  this.processor = proc;
  this.ram = ram;
  this.storage = stg;
}

var laptop1 = new Laptop("i5", "2GB", "0.5TB");
var laptop2 = new Laptop("i3", "2GB", "1TB");
var laptop3 = new Laptop("i7", "8GB", "2TB");

console.log(Laptop.prototype);

The result is: {constructor: ƒ}

Task 14: Refer to task 2; What is the type of Laptop prototype ? Hint: use typeof Laptop.prototype.

function Laptop(proc, ram, stg){
  this.processor = proc;
  this.ram = ram;
  this.storage = stg;
}

var laptop1 = new Laptop("i5", "2GB", "0.5TB");
var laptop2 = new Laptop("i3", "2GB", "1TB");
var laptop3 = new Laptop("i7", "8GB", "2TB");

console.log(typeof Laptop.prototype);

The result is: object

Prototype

A prototype is an object from which other objects can inherit properties and methods.

You can access the prototype of a constructor using constructorName.prototype.

Task 15: What is the prototype of Date constructor?

console.log(Date.prototype);

The result is: {constructor: ƒ, toString: ƒ, toDateString: ƒ, toTimeString: ƒ, toISOString: ƒ, …}

Task 16: Refer to task 15; what is the type of Date prototype?

console.log(typeof Date.prototype);

The result is: object

Task 17: What is the prototype of the Array constructor?

console.log(Array.prototype);

The result is: [constructor: ƒ, concat: ƒ, copyWithin: ƒ, fill: ƒ, find: ƒ, …]

Task 18: Refer to task 17; what is the type of Array prototype?

console.log(typeof Array.prototype);

The result is: object

Task 19: What is the prototype of the Object constructor?

console.log(Object.prototype);

The result is: {constructor: ƒ, defineGetter: ƒ, defineSetter: ƒ, hasOwnProperty: ƒ, lookupGetter: ƒ, …}

Task 20: Refer to task 19; what is the type of Object prototype?

console.log(typeof Object.prototype);

The result is: object