Skip to content

4.10 Extra Practice

This and Object Methods

Task 1: Create an object that has 3 properties; originalValue, double, and thrice with values 5, originalValue * 2, and originalValue * 3, respectively.

var obj = {
  originalValue: 5,
  double: function(){
    return this.originalValue * 2;
  },
  thrice: function(){
    return this.originalValue * 3;
  }
}

console.log(obj.double());
console.log(obj.thrice());

The result is as follows:

10
15

Task 2: Re-create the user object below, and add a new method called fullName with value firstName LastName.

/*
var user = {
  firstName: "Ali",
  lastName: "Zaki",
  username: "AliZaki88",
  email: "alizaki@mail.com"
}
*/

var user = {
  firstName: "Ali",
  lastName: "Zaki",
  username: "AliZaki88",
  email: "alizaki@mail.com",
  fullName: function(){
    return this.firstName + " " + this.lastName;
  }
}

console.log(user.fullName());

The result is: Ali Zaki

Task 3: Re-create the person object below, and add a new method called bio with value {name} is a {profession} and she loves {hobby}.

/*
var person = {
  name: "Ola",
  profession: "Doctor",
  hobby: "Cooking"
}
*/

var person = {
  name: "Ola",
  profession: "doctor",
  hobby: "cooking",
  bio: function(){
    return `${this.name} is a ${this.profession} and she loves ${this.hobby}`;
  }
}

console.log(person.bio());

The result is: Ola is a doctor and she loves cooking

Task 4: Re-create the song object below, and add a new method called description with value A beautiful song by {artist} from his {album} album..

/*
var song = {
  title: "Orobroy",
  artist: "Dorantes",
  album: "PASSO A DUE"
}
*/

var song = {
  title: "Orobroy",
  artist: "Dorantes",
  album: "PASSO A DUE",
  description: function(){
    return `A beautiful song by ${this.artist} from his ${this.album} album.`;
  }
}

console.log(song.description());

The result is: A beautiful song by Dorantes from his PASSO A DUE album.

Task 5: Re-create the epic object below, and add a new method called comment with value {name} is a worth-reading epic. It is written in the {language} language by {author}. It has {verses} verses. {summary}.

/*
var epic = {
  name: "Mahabharata",
  author: "Vyasa",
  language: "Sanskrit",
  verses: 200000,
  summary: "It narrates the struggle between two groups of cousins in the Kurukshetra War and the fates of the Kaurava and the Pāṇḍava princes and their successors."
}
*/

var epic = {
  name: "Mahabharata",
  author: "Vyasa",
  language: "Sanskrit",
  verses: 200000,
  summary: "It narrates the struggle between two groups of cousins in the Kurukshetra War and the fates of the Kaurava and the Pāṇḍava princes and their successors.",
  comment: function(){
    return `${this.name} is a worth-reading epic. It is written in the ${this.language} language by ${this.author}. It has ${this.verses} verses. ${this.summary}`;
  }
}

console.log(epic.comment());

This result is: Mahabharata is a worth-reading epic. It is written in the Sanskrit language by Vyasa. It has 200000. It narrates the struggle between two groups of cousins in the Kurukshetra War and the fates of the Kaurava and the Pāṇḍava princes and their successors.

Task 6: Re-create the programmingLanguage object below, and add a new method called stableReleaseVerbose with value The stable release of {name} is {stableRelease}..

/*
var programmingLanguage = {
  name: "Python",
  designer: "Guido van Rossum",
  developer: "Python Software Foundation",
  license: "Python Software Foundation License",
  os: " Linux, macOS, and Windows",
  filenameExtension: ".py",
  paradigm: "Multi-paradigm: functional, imperative, object-oriented, structured, reflective",
  stableRelease: "3.8.5"
}
*/

var programmingLanguage = {
  name: "Python",
  designer: "Guido van Rossum",
  developer: "Python Software Foundation",
  license: "Python Software Foundation License",
  os: " Linux, macOS, and Windows",
  filenameExtension: ".py",
  paradigm: "Multi-paradigm: functional, imperative, object-oriented, structured, reflective",
  stableRelease: "3.8.5",
  stableReleaseVerbose: function(){
    return `The stable release of ${this.name} is ${this.stableRelease}.`;
  }
}

console.log(programmingLanguage.stableReleaseVerbose())

The result is: The stable release of Python is 3.8.5.

Task 7: Refer to task 6; add a new method called supportedPlatforms with value {os} support {name}..

var programmingLanguage = {
  name: "Python",
  designer: "Guido van Rossum",
  developer: "Python Software Foundation",
  license: "Python Software Foundation License",
  os: " Linux, macOS, and Windows",
  filenameExtension: ".py",
  paradigm: "Multi-paradigm: functional, imperative, object-oriented, structured, reflective",
  stableRelease: "3.8.5",
  stableReleaseVerbose: function(){
    return `The stable release of ${this.name} is ${this.stableRelease}.`;
  },
  supportedPlatforms: function(){
    return `${this.os} systems support ${this.name}.`
  }
}

console.log(programmingLanguage.supportedPlatforms());

The result is: Linux, macOS, and Windows systems support Python.


This and Arrow Functions

Task 8: Re-do task 1 using the arrow function.

var obj = {
  originalValue: 5,
  double: () => this.originalValue * 2,
  thrice: () => this.originalValue * 3
}

console.log(obj.double());
console.log(obj.thrice());

The result is as follows:

NaN
NaN

Task 9: Re-do task 8, return this from double method.

var obj = {
  originalValue: 5,
  double: () => this,
  thrice: () => this.originalValue * 3
}

console.log(obj.double());
console.log(obj.thrice());

The result is as follows:

Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}
NaN

This and Arrow Functions

When you use this in arrow function of an object method, this does not refer to the object itself, however, it refers to the window object.


This and Constructors

Task 10: Check the result of the following code.

function Song(title, artist, album){
    this.title = title;
    this.artist = artist;
    this.album = album
}

var song1 = new Song("Orobroy", "Dorantes", "PASSO A DUE");

console.log(song1);

The result is: Song {title: "Orobroy", artist: "Dorantes", album: "PASSO A DUE"}

Constructor

if you use the keyword this inside a function as in task 10, the function turns into an object constructor.

Like other object constructors such as Object, Array, Function, Date...etc, you can create instances from this constructor by calling the constructor with the new keyword.

this in constructors

this in constructors refers to the object that will be created when the constructor is called.

Task 11: Refer to task 10; what is the type of song1?

function Song(title, artist, album){
    this.title = title;
    this.artist = artist;
    this.album = album
}

var song1 = new Song("Orobroy", "Dorantes", "PASSO A DUE");

console.log(`The type of song1: ${typeof song1}`);

The result is: The type of song1: object

Task 12: Refer to task 10; what is the constructor of song1?

function Song(title, artist, album){
    this.title = title;
    this.artist = artist;
    this.album = album
}

var song1 = new Song("Orobroy", "Dorantes", "PASSO A DUE");

console.log(`The constructor of song1: ${song1.constructor}`);

The result is as follows:

The constructor of song1: function Song(title, artist, album){
    this.title = title;
    this.artist = artist;
    this.album = album
}

Task 13: Refer to task 10; is song1 an instance of Object?

function Song(title, artist, album){
    this.title = title;
    this.artist = artist;
    this.album = album
}

var song1 = new Song("Orobroy", "Dorantes", "PASSO A DUE");

console.log(`song1 is an instance of Object: ${song1 instanceof Object}`);

The result is: song1 is an instance of Object: true

Task 14: Refer to task 10; are song1 an instance of Song?

function Song(title, artist, album){
    this.title = title;
    this.artist = artist;
    this.album = album
}

var song1 = new Song("Orobroy", "Dorantes", "PASSO A DUE");

console.log(`song1 is an instance of Song: ${song1 instanceof Song}`);

The result is: song1 is an instance of Song: true

Custom Constructor instances

The objects created from custom constructors are instances of both Object and CustomConstructor constructors.