Organizing Your JavaScript Code: Add more context as to why objects are useful for organizing code

[takinabradley]

Checks

• [X] This is not a duplicate of an existing issue (please have a look through our open issues list to make sure)
• [X] I have thoroughly read and understand The Odin Project Contributing Guide
• [X] Would you like to work on this issue?

Describe your suggestion

I feel that the content in the Organizing Your JavaScript Code section of the curriculum rushes into all sorts of fancy ways to create objects, inherit methods, and encapsulate code, without ever giving very clear explanations or examples of why we're doing it and how it's all that useful in the first place.

I think a good place to start addressing it might be in the Object and Object Constructors lesson.

Things I think could be improved:

• The "Objects as a design pattern" section of this lesson really just shows a simple example of how objects are commonly used to group related data. While I think do think this is probably a useful reminder coming in, I think it would be helpful to learners to also start introducing the idea/importance of grouping related functionality into an object as well by adding methods and using the this keyword. A nice little example might be creating an object literal with a simple Rock Paper Scissors interface on it.

Though, I honestly feel it might be nice to have a dedicated lesson previous to this one on the topic, and adding additional resources on the idea that meets learners at their level, if anyone has good resources. That might require a bit of restructuring of the Objects and Object Constructors lesson, though.

I'm very open to working on this, sharing my ideas, and discussing what could be done further. I really do feel a lot of learners are struggling with understanding the point of the content here. I previously got the Building A House From The Inside Out article added to the Tic Tac Toe lesson, and I think that's helped a lot of learners, but I think there's more we could do here.

Path

Node / JS

Lesson Url

The first couple lessons of the Organizing Your JS Code section

(Optional) Discord Name

takinabradley

(Optional) Additional Comments

No response

[takinabradley]

I made a PR relating to this issue, kind of hoping to start a discussion.

The PR provides a small way that we could introduce some good ideas about how objects can be useful for doing more than just organize data to the "Objects and Object Constructors" lesson. I think that might be a good way to do that in the framework of the current lesson structure.

I would love if the curriculum had a dedicated lesson that talked more generally about approaching organizing functionality into objects, and would also love the opportunity to write it.

I sat down today, and wrote out some of the initial stuff that I feel would be good to cover in more detail in the form of another lesson. I know I probably shouldn't have, but I've been feeling more and more strongly about the curriculum including content like this as I help out learners in the discord.

What I wrote can be found on a fork I have of the project here: https://github.com/takinabradley/curriculum/blob/organizing_code_with_objects/javascript/organizing_your_javascript_code/organizing_code_with_objects.md

In the sections I didn't decide to write up ideas on, I would probably want to give more of an 'explainer' on object inheritance, before diving into how inheritance works in JavaScript. I would love to hear any feedback and thoughts on this issue.

[damon314159]

I think this is a good idea. Instead of starting with "here's a factory, here's a constructor", start by explaining that they group related information about something, and then after that you can say "Here's a factory, it lets us compose an object and keep some bits hidden. Here's a constructor, it has an inheritance chain" - but of course more fleshed out.

I think this is one of those cases where the why helps a great deal in understanding the what - and it might also help learners avoid some common pitfalls if they understand why its not all too common to go around directly manipulating the proto chain of a given object.

Takina's example md seems like a good jumping off point imo, but seems like a substantial enough change for a more formal plan

[takinabradley]

I think this is one of those cases where the why helps a great deal in understanding the what

I think my thoughts on this issue are very in line with what Damon said.

Part of the reason I'm feeling the want to bring up this issue has been helping people through the Todo project. I've helped three or four people this week struggling through the this project, and none of them seemed to see much value in objects past what one might do in the Library project- meaning their extent of their use was creating a factory(or similar) for creating Todo objects that contained some data, an array, then attempted to manage everything through a mess of event listeners.

In my experience this is a common approach and a real tough spot for learners. People seem to often even end up abandoning their array in the mess they create as they try to get something working, use the the DOM to store data, and get very stuck once they have to store data using localStorage.

I think the issue further gets exacerbated with the fact that many people also seem to have the false impression they should be using JavaScript to create everything on the page after the Restaurant Page project, instead of having some basic content in an HTML file. Many people also seem to never figure out how to manage HTML files through their src/ folder, though it's most definitely covered in the linked webpack content. Something could possibly be done about that as well as a separate issue.

[fabulousgk]

Just to add that I think this is also a good idea. I think we propab;y cover some of it later in the CS sections, but by then it is likely to late. And I agree with @damon314159 that this seems to be a case of the why being a really good idea.

For folks coming from OOP languages you already know it, but for those with no previous programing knowledge this lesson is a bit rough and lacking context.

[MaoShizhong]

Would also like to express my agreement with the points made here, both observing them guiding learners through those exact struggled outlined, as well as similar issues I've noticed with others before - they share many common factors.

@takinabradley just FYI, @advait0603 is working on a more substantial Webpack refresh which should hopefully be able to address some of the Webpack pains a little more thoroughly (e.g. the "whys" and "hows", not just the "whats").

100% on board with what you've raised though, and like the ideas shared thus far.

[takinabradley]

Just to add that I think this is also a good idea. I think we propab;y cover some of it later in the CS sections, but by then it is likely to late. And I agree with @damon314159 that this seems to be a case of the why being a really good idea.

I don't believe these general ideas are exactly covered in the CS section (at least on the JavaScript Path), but learners are definitely expected to organize code into objects in many of those lessons there. Those lessons are very descriptive on what the expected objects should look like, though, and I think the learners that get there are generally able to figure something out with what's been taught.

It's hard to say how comfortable learners are at that point with the reasons for organizing code into objects, but the section may definitely enforce some vague ideas they may have about it, whatever those may be.

[takinabradley]

@MaoShizhong

I know you've likely contributed more than me by now, but I'm unsure if you've made any significant changes. Do you know of anyone's eyes we might want to get on this issue, before I decide to put more thought and time into it?

[MaoShizhong]

@MaoShizhong

I know you've likely contributed more than me by now, but I'm unsure if you've made any significant changes. Do you know of anyone's eyes we might want to get on this issue, before I decide to put more thought and time into it?

I'm honestly not too sure other than any of the maintainers.

[takinabradley]

I updated my current pull request with pretty much all the content I would like to see added with this issue. It makes the lesson rather long, and I feel a dedicated lesson would do it more justice.

It'd be great to hear anyone's thoughts and opinions on it.

[cakegod]

I think this is a great idea. We should expand on why we use objects and their benefits. Although our current approach tends to be OOP-like, it does not explicitly explain the advantages or main concepts. This knowledge gap contributes to Odinites' difficulties in projects such as the Todo project.

One of the most common issues I have observed is using objects as merely data containers. Odinites don't understand that objects can encapsulate data and behavior, leading them to spread the behavior everywhere.

Introducing OOP's main concepts, such as encapsulation through an existing lesson or by having a dedicated lesson(s), could significantly alleviate this knowledge gap.

[github-actions[bot]]

This issue is stale because it has had no activity for the last 30 days.