5.1 Call()¶

Basic Call()¶

Task 1: Create a regular function that displays Hello in the console.

function displayHello(){
  console.log("Hello");
}

displayHello();

The result is: Hello

Task 2: Refer to task 1; call displayHello using displayHello.call().

function displayHello(){
  console.log("Hello");
}

displayHello.call();

The result is: Hello

Task 3: Create a regular function that greets a user by his/name.

function greetUser(name){
  console.log(`Hello ${name}`);
}

greetUser("Nawras");

The result is: Hello Nawras

Task 4: Refer to task 3; call greetUser using greetUser.call(this, "Nawras").

function greetUser(name){
  console.log(`Hello ${name}`);
}

greetUser.call(this, "Nawras");

The result is: Hello Nawras

Task 5: Create a regular function that returns this keyword. Call this function using funcName.call()

function returnsThis(){
  return this;
}

var val = returnsThis.call();

console.log(val);

The result is: Window {parent: Window, opener: null, top: Window, length: 0, frames: Window, …}

Task 6: Create a regular function that returns a * b. Call the function using functionName.call().

function mul(a, b){
  return a * b;
}

var res = mul.call(this, 20, 8);
console.log(res);

The result is: 160

Task 7: Create a regular function that returns num1 + num2 + num3 + num4. Call the function using functionName.call().

function add(num1, num2, num3, num4){
  return num1 + num2 + num3 + num4;
}

var res = add.call(this, 5, 6, 0, 1);
console.log(res);

The result is: 12

Task 8: Create a function that returns the boolean representation of a value. Call the function using functionName.call().

function validateValue(value){
  return !!value;
}

var res1 = validateValue.call(this, null);
var res2 = validateValue.call(this, 1);
var res3 = validateValue.call(this, undefined);

console.log(res1, res2, res3);

The result is: false true false

More on Call()¶

Task 9: Refer to task 5; call the function using returnsThis.call({})

function returnsThis(){
  return this;
}

var val = returnsThis.call({});

console.log(val);

The result is: {}

Task 10: Refer to task 9; call the function using returnsThis.call(obj).

function returnsThis(){
  return this;
}

var obj = {
  a: 1,
  b: 2,
  c: 3
}
var val = returnsThis.call(obj);

console.log(val);

The result is: {a: 1, b: 2, c: 3}

Task 11: Refer to task 9; call the function using returnsThis.call(window).

function returnsThis(){
  return this;
}

var val = returnsThis.call(window);

console.log(val);

The result is: Window {window: Window, self: Window, document: document, name: "", location: Location, …}

Task 12: Refer to task 7; call the function with this=window.

function add(num1, num2, num3, num4){
  return num1 + num2 + num3 + num4;
}

var res = add.call(window, 5, 6, 0, 1);
console.log(res);

The result is: 12

Task 13: Refer to task 12; call the function with this=obj.

function add(num1, num2, num3, num4){
  return num1 + num2 + num3 + num4;
}

var obj = {
  a: 1,
  b: 2,
  c: 2
};

var res = add.call(obj, 5, 6, 0, 1);

console.log(res);

The result is: 12

Task 14: Given the object below, call the returning method using call(window)

var obj = {
  returning: function(){
    return this;
  }
}

var result = obj.returning.call(window);
console.log(result);

The result is: Window {window: Window, self: Window, document: document, name: "", location: Location, …}

Task 15: Refer to task 14; call the returning method using call(obj).

var obj = {
  returning: function(){
    return this;
  }
}

var result = obj.returning.call(obj);
console.log(result);

The result is: {returning: ƒ}

Task 16: Refer to task 14; call the returning method using call({}).

var obj = {
  returning: function(){
    return this;
  }
}

var result = obj.returning.call({});
console.log(result);

The result is: {}

Task 17: Refer to task 14; call the returning method using call(obj2).

var obj = {
  returning: function(){
    return this;
  }
}

var obj2 = {
  a: 1,
  b: 2,
  c: 3
};

var result = obj.returning.call(obj2);
console.log(result);

The result is: {a: 1, b: 2, c: 3}

Call() & Object methods¶

Task 18: Given the objects below; call person1.bio method on person2 object.

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

person2 = {
  name: "Ali",
  profession: "joy creator",
  hobby: "Creating new things"
};

var result = person1.bio.call(person2);
console.log(result);

The result is: Ali is a joy creator and she loves Creating new things

Task 19: Given the objects below; call song1.description method on song2 object.

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

var song2 = {
  album: "Purple Rain",
  artist: "Prince"
};

var result = song1.description.call(song2);
console.log(result);

The result is: A beautiful song by Prince from his Purple Rain album.

Task 20: Given the objects below; call lang1.stableReleaseVerbose method on lang2 object.

var lang1 = {
  name: "Python",
  stableRelease: "3.8.3",
  stableReleaseVerbose:  function(){
    return `The stable release of ${this.name} is ${this.stableRelease}.`;
  }
};

var lang2 = {
  name: "PHP",
  stableRelease: "7.4.10"
};

var result = lang1.stableReleaseVerbose.call(lang2);
console.log(result);

The result is: The stable release of PHP is 7.4.10.

Call() with Arguments¶

Task 21: Given the objects below; call epic1.comment method on epic2 object with epic2.author="Valmiki".

var epic1 = {
  name: "Mahabharata",
  author: "Vyasa",
  language: "Sanskrit",
  verses: 200000,
  comment: function(){
    return `${this.name} is a worth-reading epic. It is written in the ${this.language} language by ${this.author}.`
  }
};

var epic2 = {
  name: "Ramayana",
  language: "Sanskrit"
};

var result = epic1.comment.call(epic2, epic2.author="Valmiki");
console.log(result);

The result is: Ramayana is a worth-reading epic. It is written in the Sanskrit language by Valmiki.

Task 22: Given the object below; call obj1.average method on {total:60} object with count=3.

var obj1 = {
  total: 80,
  average: function(count){
    return this.total/count;
  }
};

var result = obj1.average.call({total:60}, 3);
console.log(result);

The result is: 20

Task 23: Given the object below; call obj1.calc method on {a: 5, b: 2}} object with randomNumber=10.

var obj1 = {
  a: 1,
  b: 2,
  calc: function(randomNumber){
    return this.a + this.b + randomNumber;
  }
};

var result = obj1.calc.call({a: 5, b: 2}, 10);
console.log(result);

The result is: 17

Task 24: Given the objects below; call user1.more method on user2 object with group="group nine".

var user1 = {
  name: "Sanad",
  more: function(group){
    return `${this.name} is from ${group}`
  }
};

var user2 = {
  name: "Jad"
};

var result = user1.more.call(user2, "group nine");
console.log(result);

The result is: Jad is from group nine

Task 25: Given the objects below; call galaxy1.info method on galaxy2 object with user1, user2, and user3 arguments.

var galaxy1 = {
  name: "Milky Way",
  desc: "the galaxy containing the solar system, sun and earth",
  info: function(user1, user2, user3){
    return `${this.name} is ${this.desc}. Here is what people say about this galaxy: ${user1.comment}, ${user2.comment}, ${user3.comment}...etc.`
  }
}

var galaxy2 = {
  name: "Large Magellanic Cloud",
  desc: "visible only from the southern hemisphere"
}

var user1 = {
  name: "Jad",
  comment: "It is amazing"
};

var user2 = {
  name: "Sanad",
  comment: "Wow!"
};

var user3 = {
  name: "Ali",
  comment: "I love stars!"
};


var result = galaxy1.info.call(galaxy2, user1, user2, user3);
console.log(result);

The result is: Large Magellanic Cloud is visible only from the southern hemisphere. Here is what people say about this galaxy: It is amazing, Wow!, I love stars!...etc.

Call() & Constructor Inheritance¶

Task 26: Check the following code.

function Food(group){
  this.group = group;
}

function Fruit(name, group){
  Food.call(this, group)
  this.name = name;
}

var apple = new Fruit("apple", "fruits");
console.log(apple.name);
console.log(apple.group);

The result is as follows:

apple
fruits

Task 27: Call Entity constructor in Organization using Call().

function Entity(name){
  this.name = name;
}

function Organization(name, goal){
  this.goal = goal;
  Entity.call(this, name);
}

var org1 = new Organization("UN", "To achieve international cooperation");

console.log(org1.name);
console.log(org1.goal);

The result is as follows:

UN
To achieve international cooperation

Task 28: Call Device constructor in WashingMachine using Call().

function Device(name, energyUsed){
  this.name = name;
  this.energyUsed = energyUsed;
}

function WashingMaching(name, energyUsed, automatic){
  this.automatic = automatic;
  Device.call(this, name, energyUsed);
}

var wM1= new WashingMaching("Washing Machine", "Electrical", true);

console.log(wM1.name);
console.log(wM1.energyUsed);
console.log(wM1.automatic);

The result is as follows:

Washing Machine
Electrical
true

Task 29: Call Person constructor in Programmer using Call().

function Person(name, height, weight, eyesColor, country){
  this.name = name;
  this.height = height;
  this.weight = weight;
  this.eyesColor = eyesColor;
  this.country = country;
}

function Programmer(name, height, weight, eyesColor, country, languagesUsed, yearsOfExperience){
  this.languagesUsed = languagesUsed;
  this.yearsOfExperience = yearsOfExperience;
  Person.call(this, name, height, weight, eyesColor, country);
}

var programmer1 = new Programmer("Ali", "100cm", "30KG", "blue", "Jordan", "secretLanguage", 4);

console.log(programmer1)

The result is: Programmer {languagesUsed: "secretLanguage", yearsOfExperience: 4, name: "Ali", height: "100cm", weight: "30KG", …}

Task 30: Call Thing constructor in Laptop using Call().

function Thing(name, func){
  this.name = name;
  this.func = func;
}

function Laptop(name, func, processor, priceRange){
  this.processor = processor;
  this.priceRange = priceRange;
  Thing.call(this, name, func);
}

var laptop1 = new Laptop("Laptop", "computation", "Intel i7", "500-1000USD");

console.log(laptop1);

The result is: Laptop {processor: "Intel i7", priceRange: "500-1000USD", name: "Laptop", func: "computation"}