Skip to content

5.2 Apply()

Apply() VS Call()

Task 1: Call the function below using call().

function returnOne(){
  return 1;
}

var result = returnOne.call();
console.log(result);

The result is: 1

Task 2: Refer to task 1; replace call with apply.

function returnOne(){
  return 1;
}

var result = returnOne.apply();
console.log(result);

The result is: 1

Task 3: Call the following function using call.

function calc(num){
  return num / 2;
};

var result = calc.call(this, 100);
console.log(result);

The result is: 50

Task 4: Refer to task 3; replace call with apply.

function calc(num){
  return num / 2;
};

var result = calc.apply(this, 100);
console.log(result);

The result is: Uncaught TypeError: CreateListFromArrayLike called on non-object

Task 5: Refer to task 4; replace 100 with [100].

function calc(num){
  return num / 2;
};

var result = calc.apply(this, [100]);
console.log(result);

The result is: 50

Task 6: Call the following function using call.

function calc(num1, num2, num3){
  return (num1 + num2) / num3;
}

var result = calc.call(this, 4, 6, 2);
console.log(result);

The result is: 5

Task 7: Refer to task 7; replace call with apply. Hint: provide the arguments in an array.

function calc(num1, num2, num3){
  return (num1 + num2) / num3;
}

var result = calc.apply(this, [4, 6, 2]);
console.log(result);

The result is: 5

apply()

apply() has the same functionality of call(). However, apply accepts the arguments in an array.


Extra Practice

Task 8: Call obj.allWords using apply.

var obj = {
  firstWord: "Mama",
  secondWord: "Papa",
  allWords: function(){
    return `${this.firstWord}, ${this.secondWord}...etc.`
  }
};

var result = obj.allWords.apply(obj);
console.log(result);

The result is: Mama, Papa...etc.

Task 9: Call Entity constructor in Organization using apply().

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

function Organization(name, goal){
  this.goal = goal;
  Entity.apply(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 10: Call Person constructor in Programmer using apply().

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.apply(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 11: Given the objects below; call song1.description method on song2 object using apply().

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.apply(song2);
console.log(result);

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

Task 12: Given the objects below; call lang1.stableReleaseVerbose method on lang2 object using apply().

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.apply(lang2);
console.log(result);

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

Task 13: Given the object below; call obj1.average method on {total:60} object with count=3. Hint: use apply().

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

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

The result is: 20