Implement new Concept Exercise: Classes

[junedev]

Getting started

Here you can read about what Concept Exercises are and how they are structured:

• What are Concept Exercises?
• Concept Exercises
• Concepts

If you have not done so yet, it is probably also helpful to do a couple of "Learning Exercises" (this is how they are called on the site) yourself. You can also look at the code of an existing concept exercise like bird-watcher (concept for-loops) for reference.

Goal

The goal of this exercise is to introduce prototypes and classes.

Concepts

The following concept pages need to be created. You can combine the introduction.md files from the concepts and use that as introduction.md for the concept exercise. No need to create different content at this point.

• classes

Learning Objectives

In the concepts the student should learn about the following topics and then practice them in the concept exercise.

• Simple intro to OOP (e.g. "building objects that encapsulate values, called instance properties, and functions that work on these values, these functions are called methods") and why it is useful (structure code, re-use etc.)
• Javascript is a "prototype-based language", what does that mean?
  The explanation from this MDN link might be helpful in phrasing this:

  you define a constructor function to create objects with a particular initial set of properties and values. [...] You use the new operator with a constructor function to create a new object.

• How to a constructor function to create a "template object" with properties and methods using prototype syntax, e.g.

  function Person (name) {
      this.name = name;
      this.canTalk = true;
  };
  
  Person.prototype.greet = function() {
      if (this.canTalk) {
          console.log('Hi, I am ' + this.name);
      }
  };

• What does this mean/do
• What is an instance and how to create one with new
• How to write the same code as above with class syntax as syntactic sugar (explain what that means)

Out of Scope

• Inheritance, extends, super (will be taught later)

About.md of the Concept

Here some ideas of what could be mentioned.

• Why was class syntax introduced to the language
• Pitfall: this problem when nesting functions, mitigation via self/that or arrow functions
• Explain the meaning and status of private properties and static methods in JS

Prerequisites

• objects
• functions

At this point the student only knows about objects as simple key-value maps. this was not introduced before. See this list for details on the learning curve we are aiming for.

Exercise Idea

C# Elons Toys Exercise could serve as template.

Help

You can choose to do this solo-style, or collaborate with multiple people on this. The suggested approach is to

1. First accept this issue by saying "I'd like to work on this" (no need to wait for a response, just go with it) and optionally request that someone works with you (and wait for a second person to accept your request).
2. Use this issue to discuss any questions you have, what should be included in the content and what not and to collect reference material.
3. Create a PR and set "exercism/javascript" as reviewers. Additionally you can write in #maintaining-javascript that your PR is ready for review. Once you incorporated any critical feedback that the reviewer might give you and the PR is approved, it will be merged by a maintainer.

[junedev]

I will work on this but it could take some time.

[junedev]

Originally, I wanted to use Elon's Toys as story for this exercise. However, in the Go track we noticed a couple of shortcomings of that exercise and it didn't allow to practice prototype and class syntax. Instead, I found the Swift Windowing System exercise to be a better fit so I used that one instead.