Methods in JavaScript are not bound to their object by default (as they are in languages like Python and Go). So if you use a method as a "callback" function, you may run into issues with the this keyword:
const user = {
name: "Lane",
sayHi() {
console.log(`Hi, my name is ${this.name}`);
},
};
user.sayHi();
// Hi, my name is Lane
const sayHi = user.sayHi;
sayHi();
// TypeError: Cannot read properties of undefined (reading 'name')
This happens a lot when passing a method as a callback function to another function:
const user = {
firstName: "Lane",
lastName: "Wagner",
getFullName() {
return `${this.firstName} ${this.lastName}`;
},
};
function getGreeting(introduction, nameCallback) {
return `${introduction}, ${nameCallback()}`;
}
console.log(user.getFullName());
// Lane Wagner
console.log(getGreeting("Hello", user.getFullName));
// TypeError: Cannot read properties of undefined (reading 'firstName')
If you want to use a method as a callback function, you'll need to bind it to the object using the bind method:
const boundGetFullName = user.getFullName.bind(user);
console.log(getGreeting("Hello", boundGetFullName));
Fix the bug on line 19 so that this correctly references the scope of the campaign object.