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