Teaching guide: Intro to JS - Object-oriented design

What the student will learn

• How to define an object using the JavaScript prototype system, so that they can then create multiple instances of that object in their program.
• How to define methods on objects, so that all instances share the same methods.
• How to define an object that inherits from another object, so that it can reuse parent methods but also its own new methods.

The student will be able to write code like:

Where students struggle

• Most students will have some difficulty grasping both the concepts and syntax of object-oriented programming in JavaScript. Object-oriented programming is a technique used across many programming languages, and it’s particularly tricky in JavaScript.
• Students may wonder why object-oriented programming is so important and whether it's worth the difficulty in learning it. OO is a technique that gets more important as programs get bigger and more complex, and it’s particularly useful for the types of programs that are popular on Khan Academy - like games and natural simulations. Those programs all involve objects conceptually - like obstacles and avatars in games, or particles and emitters in simulations. It’s possible to write the programs using just functions, but it’s often easier to write them using object-oriented code, because then you can easily re-use similar functionality in similar objects.
• Students often find the this keyword confusing. That’s the keyword that an object used to refer to itself - in other languages, it’s actually self or me. It’s necessary to use this to tell an object to find a variable that’s a property on itself, instead of a local or global variable.
• Students get confused between the object definition and object instances. One thing that helps is if they pay attention to capitalization, as we use that to distinguish. We use capital letters to define an object type, like Winston, and lowercase when we create instances, like winstonTeen and winstonAdult. Remind them that the first step is to define the object type (Winston) and only then can they create new instances based on that type (winstonTeen, winstonAdult).
• Students might accidentally define object methods before their object constructor. The object constructor must be first, and then the methods.
• Students may have a hard time understanding the way that object inheritance works in JavaScript, even if they’re able to type the lines of code that makes it work. It helps to really talk through each line of code, and to read the alternative explanations from answers under the inheritance talk-through.

Additional materials: Discussion questions

• Discuss how you would program the concept of animals using OO programming. What properties and methods would you define on an Animal object? What objects would inherit from Animal, and what properties and methods would they have? You can have that same discussion about other objects as well, like Cars, Trees, Books, Shapes. There's no right answer, as the actual way you'd code it would depend on the app/game, but it's a useful exercise in thinking about object attributes, behavior, and inheritance.