Back to Freecodecamp

Make Code More Reusable with the this Keyword

curriculum/challenges/english/blocks/object-oriented-programming/587d7dad367417b2b2512b76.md

latest1.8 KB
Original Source

--description--

The last challenge introduced a method to the duck object. It used duck.name dot notation to access the value for the name property within the return statement:

js
sayName: function() {return "The name of this duck is " + duck.name + ".";}

While this is a valid way to access the object's property, there is a pitfall here. If the variable name changes, any code referencing the original name would need to be updated as well. In a short object definition, it isn't a problem, but if an object has many references to its properties there is a greater chance for error.

A way to avoid these issues is with the this keyword:

js
let duck = {
  name: "Aflac",
  numLegs: 2,
  sayName: function() {return "The name of this duck is " + this.name + ".";}
};

this is a deep topic, and the above example is only one way to use it. In the current context, this refers to the object that the method is associated with: duck. If the object's name is changed to mallard, it is not necessary to find all the references to duck in the code. It makes the code reusable and easier to read.

--instructions--

Modify the dog.sayLegs method to remove any references to dog. Use the duck example for guidance.

--hints--

dog.sayLegs() should return the given string.

js
assert(dog.sayLegs() === 'This dog has 4 legs.');

Your code should use the this keyword to access the numLegs property of dog.

js
assert(__helpers.removeJSComments(code).match(/this\.numLegs/g));

--seed--

--seed-contents--

js
let dog = {
  name: "Spot",
  numLegs: 4,
  sayLegs: function() {return "This dog has " + dog.numLegs + " legs.";}
};

dog.sayLegs();

--solutions--

js
let dog = {
  name: "Spot",
  numLegs: 4,
  sayLegs () {
    return 'This dog has ' + this.numLegs + ' legs.';
  }
};

dog.sayLegs();