Help with JS inheritance (DRY)

Help with JS inheritance (DRY)
0

#1

https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/object-oriented-programming/use-inheritance-so-you-dont-repeat-yourself/

I have successfully completed the above challenge, but I am still not clear as to what I did and how it works… :frowning:

Can someone please explain a bit in detail
Thank you :slight_smile:


#2

In programming, we try to find ways to write our code only once and use it as many times as possible.
The principal is also sometimes referred to as ‘functional programming’ but in the given example, it is presented to you in the form of Object Oriented Programming.
The idea is that we find ways to ‘encapsulate’ our most useful bits of code so that they can be re-used without having to type the same lines of code over and over again.

Think about it in general terms first. If you were making 5 web-pages and all of these have navigation bars that are fixed to the top of the page, and all of these also have the exact same menu items and the only difference is their color and font, then how would you save yourself time writing their css?
You could write it once , then cut and paste the same code over and over again, changing the color and font for each web-page as you cut and pasted…
But then what happens if you decide that navigation bars need to be ‘navigation circles’ and you must go to each web-page to fix the css independently, over and over and over and over and over again?
So as a principle, you want to not repeat your code in multiple places. You want to write it once and use it as may times as needed. And if the code changes, you then don’t have to go and change it multiple times in multiple places.

Ok, so back to this specific example which combines this idea with object inheritance.

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

Cat.prototype = {
  constructor: Cat, 
  eat: function() {
    console.log("nom nom nom");
  }
};

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

Bear.prototype = {
  constructor: Bear, 
  eat: function() {
    console.log("nom nom nom");
  }
};

function Animal() { }

Animal.prototype = {
  constructor: Animal,
  
};

You are given the above set of functions and prototypes. You have ‘cat’ , ‘bear’ and ‘animal’.
Both cat and bear perform the same set of code in a function called ‘eat’. So you notice that the code is being repeated exactly in both of these.
Knowing that programmers don’t like to repeat themselves, you decide to think of a way to share the code so that it is not duplicated in both these places. But how? Bears are nothing like Cats. Unless you think of them as Animals. So let’s make a more general object and put the eat method there. Then make Cat and Bear both inherit the eating behaviour from the more general object (Animal).

Again in general terms , you can think of how all human beings inherit certain behaviours from their parents. In OOP (object oriented programming) we copy that idea using object inheritance. And the exact way that Cat and Bear will inherit the eat function is covered in the next sections starting with
https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/object-oriented-programming/inherit-behaviors-from-a-supertype

In the end, you will change the code so that whenever Cat or Bear need to eat(), the code for eat() will be found via inheritance (the Javascript interpreter will know this by the code changes you are about to make in the next challenges). And the principal of not repeating yourself will be achieved.

I hope I’ve helped a bit with this explanation. Just remember that whenever you find yourself cutting and pasting code, to ask yourself if there is a better way to use the code without duplicating it and you will be fine…