Freecodecamp: Discussion: The FCC Curriculum around OOP in JavaScript misses out on developing a complete understanding of what happens under the covers.

[hassaanp]

Is 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:

1. Building Objects (using curly bracket notation and Object.create)
2. Introduce functions to generate Objects
   In the curriculum, this is immediately introduced followed by the constructor, 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.
3. 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.

1. Introduce new
   Show the student how new keyword automates the linking part between the animalMethods and animal function. Here, we get a chance to show the property called prototype and why it was created.

2. Introduce class
   Builds upon new and solidifies the understanding of underlying automation. Also, introduce constructor.

Additional context
This is a follow-up to the discussion with @ojeytonwilliams on Gitter.

[ojeytonwilliams]

@hassaanp Thanks for going through this in detail, this is great. One other thing that might be worth mentioning is how to get at the prototype from an instance, i.e. Object.getPrototypeOf().

@scissorsneedfoodtoo I'm not sure what the best place for this is. Do you think the existing challenges need modifying/extending or would this be better as one of the new projects?

[RandellDawson]

@hassaanp We currently are not creating new challenges in the existing curriculum (with the exception of the Project Euler and Rosetta Code sections). All new material would need to be presented in the new project-based curriculum. If you can think of a concise way of modifying an existing curriculum challenge to cover the topics, that is fine, but I think what you are wanting to accomplish would be better suited for the new curriculum.

[hassaanp]

@RandellDawson
I agree. This is more of a redesign of the module.

[raisedadead]

I think while this is a great suggestion.

However, IMHO I do not think that adding this to the curriculum would be useful given the fact that a major portion of our target audience who are just getting started to learning to code will be confused by this.

I think we can teach these concepts better with lectures on our Youtube channel.

Get comfortable with abstraction. If you try to understand how everything works, you'll get nothing done.

-- @QuincyLarson via twitter

[beaucarnes]

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.

[QuincyLarson]

@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.

[hassaanp]

@QuincyLarson
I would love to help design this project.

Thank you everyone for the feedback and validation.

[scissorsneedfoodtoo]

@hassaanp, these are all great suggestions. Like @beaucarnes mentioned, we shouldn't take a deep dive into step three, but it's certainly worth teaching a bit about the prototype chain.

Probably the best project to teach these concepts, at least in JavaScript, is the Data Structures Shopping Cart project. There we walk campers through building a shopping cart class and writing some methods for the project.

That project is currently open if you'd like to work these OOP concepts into it.

[hassaanp]

@scissorsneedfoodtoo, thanks for the heads up!
I will take a look at the project. I would definitely like to work on it.