Discussion: The FCC Curriculum around OOP in JavaScript misses out on developing a complete understanding of what happens under the covers.
See original GitHub issueIs your feature request related to a problem? Please describe. In the Object-Oriented JavaScript section, the curriculum is heavily invested in using single inheritance (classical inheritance) in almost all the challenges. In my opinion, this approach leaves the student an inadequate understanding of JavaScript’s prototypal inheritance.
Describe the solution you’d like I suggest we offer a more chronological approach that builds upon how OOP was developed in JavaScript.
This flow offers a better route to building the right understanding:
- Building Objects (using curly bracket notation and
Object.create
) - Introduce functions to generate Objects
In the curriculum,
this
is immediately introduced followed by theconstructor
, which, in my opinion, is not the logical progression. Instead, the curriculum should show how we can reduce code repetition by using functions to return objects. - Introduce the Prototype Chain We discuss the cons of using the previous approach to create Objects, i.e the memory issue that results due to copies of methods in each instance. This logically introduces the need to pass methods by reference.
Here is an example:
const animalMethods = {
eat: function(){console.log("nom nom nom")},
describe: function(){console.log(this.name)}
}
const dog = Object.create(animalMethods);
dog.name = "bingo";
dog.eat();
This allows to introduce how the interpreter works, i.e it looks for the .eat
method on dog
, doesn’t find it, looks a level up the prototype chain and finds it there in the animalMethods
. We also get a chance to introduce how this lookup is done - allowing the student to build a better mental model. This then can be shown to resolve the memory problem introduced in 2
function animal (name) {
const newAnimal = Object.create(animalMethods);
newAnimal.name = name;
return newAnimal;
}
const dog = animal("dog");
dog.eat();
This is true OOP in JS and the next progression is simply the automation part, i.e why new
and class
were introduced.
-
Introduce
new
Show the student hownew
keyword automates the linking part between theanimalMethods
andanimal
function. Here, we get a chance to show the property calledprototype
and why it was created. -
Introduce
class
Builds uponnew
and solidifies the understanding of underlying automation. Also, introduceconstructor
.
Additional context This is a follow-up to the discussion with @ojeytonwilliams on Gitter.
Issue Analytics
- State:
- Created 4 years ago
- Comments:9 (9 by maintainers)
Top GitHub Comments
I agree that we should include a lot of the suggestions of @hassaanp in the new curriculum. In fact, it wouldn’t take that much change to the new curriculum projects to introduce OO in the method suggested. However, I agree with @raisedadead that we don’t need to go into too much detail on all the parts, especially the prototype chain.
I think we can teach OO using the 5 steps laid out, but go light on step 3 and leave out details about memory issues and the interpreter.
@hassaanp Thanks for your detailed feedback and ideas here.
Would you be interested in helping design this project so that it introduces learners to OOP in the way you think is optimal? https://github.com/freeCodeCamp/CurriculumExpansion/issues/254
I agree with @beaucarnes, @RandellDawson, and @raisedadead that we needn’t update the current challenges to reflect this, and can instead stay focused on the upcoming project-oriented learning, so I’m closing this issue for now.