JavaScript Katas: Classes: People

2020-07-30

Intro 🌐

Problem solving is an important skill, for your career and your life in general.

That's why I take interesting katas of all levels, customize them and explain how to solve them.

Understanding the Exercise❗

First, we need to understand the exercise! If you don't understand it, you can't solve it!.

My personal method:

Input: What do I put in?
Output: What do I want to get out?

Today's exercise

Source: Codewars

Today's kata is a little bit different!

Define a class Person, that accepts four parameters in its constructor:

firstName with the default value of "John"
lastName with the default value of "Doe"
age with the default value of 0
gender with the default value of "Male"

and stores them in this instance.

The class should also have two class methods:

a method sayFullName that accepts no arguments and returns the full name, e.g. "John Doe"
a static method greetExtraTerrestrials that accepts one parameter raceName and returns "Welcome, [raceName]", e.g. "Welcome, Martians"

Thinking about the Solution 💭

I think I understand the exercise (= what I put into the function and what I want to get out of it).

Now, I need the specific steps to get from input to output.

I try to do this in small baby steps:

Create class skeleton
Create constructor
Add parameters and their default values to constructor
Store constructor parameters in instance
Add first method skeleton with parameters
Add return value of method
Add second method (static) skeleton with parameters
Add return value of method

Implementation ⛑

// class skeleton
class Person {
  // constructor with parameters and their default values
  constructor(firstName = "John", lastName = "Doe", age = 0, gender = "Male") {
    // store constructor parameters in instance
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
    this.gender = gender;
  }

  // first method skeleton with parameters
  sayFullName() {
    // return value of method
    return `${this.firstName} ${this.lastName}`;
  }

  // second method (static) skeleton with parameters
  static greetExtraTerrestrials(raceName) {
    // return value of method
    return `Welcome, ${raceName}`;
  }
}

Result

console.log(new Person("Max", "Mustermann", 20, "Male").firstName);
// "Max" ✅

console.log(new Person("Max", "Mustermann", 20, "Male").lastName);
// "Mustermann" ✅

console.log(new Person("Max", "Mustermann", 20, "Male").age);
// 20 ✅

console.log(new Person("Max", "Mustermann", 20, "Male").gender);
// "Male" ✅

console.log(new Person("Max", "Mustermann", 20, "Male").sayFullName());
// "Max Mustermann" ✅

console.log(Person.greetExtraTerrestrials("Martians"));
// "Welcome, Martians" ✅

Playground ⚽

You can play around with the code here

Next Part ➡️

Great work!

We learned how to use ES6 class.

I hope you can use your new learnings to solve problems more easily!

Next time, we'll solve another interesting kata. Stay tuned!

If I should solve a specific kata, shoot me a message here.

If you want to read my latest stuff, get in touch with me!

Questions ❔

Do you use class in your JavaScript code?

miku86