question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:9 (9 by maintainers)

github_iconTop GitHub Comments

2reactions
beaucarnescommented, Mar 13, 2020

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.

1reaction
QuincyLarsoncommented, Mar 13, 2020

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

My review on freeCodeCamp's curriculum - DEV Community ‍ ‍
freeCodeCamp's curriculum offers six certifications which take you around 300 hours each to earn while doing challenges and coding your own ...
Read more >
Learn React JS in This Free 7-Hour Course - freeCodeCamp
You will learn by building a real app. You will learn: React; JSX; Styled Components; React Router; State and Props; Context; CSS; API...
Read more >
Course Descriptions - Santa Monica College
This course covers special accounting topics including accounting for foreign currency ... to their experience, students develop a deeper understand-.
Read more >
2020-2021 Chesterton High School Course Description ...
Students must complete the Core 40 to be considered for admission to. Indiana's four-year colleges, and the same courses are strongly recommended for...
Read more >
Recommendation on Preference for Overcoming Disadvantage
The FCC Advisory Committee on Diversity For Communications In The ... In the case of FCC licenses to provide broadcast services to the ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found