Forem: Cat Perry

Learn JavaScript Classes & Prototyping Using A CoronaVirus Class

Cat Perry — Wed, 06 May 2020 16:42:31 +0000

To learn the basics of JavaScript Classes and the key native-JavaScript concepts of prototypes and inheritance, and let's build a modern example: CoronaVirus Class!

See the CoronaVirus Class on Github; and follow me on Twitter.

Why learn how to write native JavaScript classes?

Technical interviews.

No, seriously. Learning how to write native JavaScript classes and deepening your understanding of prototypes may save you some sweating during technical interviews. This is a common interview question, especially for those without a CS degree, i.e., bootcamp grads, and if you don't know how to build them sans Frameworks like React or Angular, you'll be quickly skipped over. Plus, classes are the basis for all the components you'll whip up in JS frameworks. So knowing what's happening under the hood will make you a better engineer.

Read the Documentation about JS Classes

Read MDN docs, this SitePoint Classes article, or W3Schools doc on JavaScript Classes for everything related to writing classes.

Disclaimer: You MAY notice a touch of opinionated text in the base CoronaVirus Class. It's just a means of venting, but I want others to add their own flair/venting. If you want to directly contribute to this CoronaVirus Class and its docs, just open an issue on github and let's get it PR'd.

Use this open source project to explore the native JavaScript functionalities that include Classes, inheritance, prototyping, hoisting, etc! This class is for all of us!

About JavaScript Classes

As per the MDN JavaScript Classes documentation, Classes are just syntax sugar to declare a function. They are JavaScript's approach to Object Oriented Programming (OOP), and they create an object template. The components for a class are its declaration, Constructor keyword, Super keyword, class properties, class methods (both public and private), and special class methods called Getters and Setters.

How Prototypes Factor In

These methods and properties are all then available via the class-object's prototype, and behind the scenes, you'll reference these via dot notation (e.g., coronaDay42.newMethodName). But instead of coronaDay42.newMethodName, JavaScript is actually writing coronaDay42.prototype.newMethodName. Another very common example of a prototype is Array.prototype.map(). So when you call myArray.map(), what's really being called behind the scenes by JS is Array.prototype.map(). The same can be said for other very common JS methods like .split(), .splice(), .reverse() etc. Read more about Inheritance and the Prototype Chain.

Subclasses and Extends

And then there are Sub classes or Child classes, in which you will extend the parent class to use it with a subclass. A subclass inherits the prototypes of the parent class.

How to Declare a Class

Class Declarations (example from MDN docs)

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

Class Expression(ex. from MDN docs)

let Rectangle = class { 
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};// this class can be named or unnamed (e.g. this can also be `let Rectangle = class RectangleFactory {}`)

For the CoronaVirus Class exercise we use a class declaration.

Parts of a Class

Constructor

The constructor keyword initializes the object and sets the included initial properties.

For CoronaVirus Class, the properties are this.people, this.virus, and this.ppeNumber.

The methods that can be accessed in this class are these:

Getters

get theVirus()
get deliverableSafetyItems()
get ppeNow()
get teamwork()
get fullStory()

These methods can be accessed on any instance of the CoronaVirus Class, as in console.log(coronaDay42.fullStory);

Setters

set teamwork(isThereTeamwork)
set safetyItems(item)

Setters are used to define a value; thus they require a parameter/value to set. Then it can be modified like the last line of code below does. coronaDay42.teamwork = randomYesOrNo;

let randomYesOrNo = Math.floor(Math.random() * 2);
const coronaDay42 = new CoronaVirus(randomPeopleNumber, 1000, randomPpeNumber);
coronaDay42.teamwork = randomYesOrNo;

Methods

The class methods/functions multiplies() and randomCountry() can be used very similarly to the class getters except that when they are invoked, you must use the trailing parens (). So, coronaDay42.ppeNow is a getter and this.multiplies() is the function. For the subtle differences in behavior and performance between the two, check out this really helpful Quora response on "difference between using a getter method or a regular function in JavaScript".

Creating Class Instances (and Invoking them)

At the bottom of the CoronaVirus Class, you'll see the following:

let randomPeopleNumber = Math.floor(Math.random() * 58494);
let randomPpeNumber = Math.floor(Math.random() * 58492084);
let randomYesOrNo = Math.floor(Math.random() * 2);
const coronaDay42 = new CoronaVirus(randomPeopleNumber, 1000, randomPpeNumber);
coronaDay42.teamwork = randomYesOrNo;

console.log(coronaDay42.fullStory);

This const coronaDay42 = new CoronaVirus(randomPeopleNumber, 1000, randomPpeNumber); is how the Class instance is created, setting a variable to a new CoronaVirus(). Then we pass in the class properties of:

this.people = people;
this.virus = virus;
this.ppeNumber = ppeNumber;

From there, you can access the getters/setters/methods of the Class and build from there!

That's it for this class, but wait there's more!

Other JavaScript Class functions and syntax

The current CoronaVirus class is pretty simple and doesn't have some other core JS class functionality, including the following:

Inheritance through Subclasses! e.g.

  class Covid19 extends CoronaVirus {}

Private methods
Static methods
Field declarations (public and private)
Super() (refers to the parent class)
And more.

I hope this guide helps you understand and manipulate JavaScript classes a bit more.

These are crucial parts of core JavaScript functionality to understand. They're often skimmed over by junior engineers, until they're asked about them during technical interviews. So learn them now, and never be stumped again by this classic and fundamental JavaScript knowledge again.

Have you ever been asked to build a class during a JavaScript interview? If so, how hard was it? Or what was the craziest "Build a JS class" interview question you were ever asked? Leave a note in the comments.

Full CoronaVirus Class

class CoronaVirus {
  constructor(people, virus, ppeNumber) {
    this.people = people;
    this.virus = virus;
    this.ppeNumber = ppeNumber;
  }

  // getters
  get theVirus() {
    return "I'm a freakin virus! I'm infecting " + this.multiplies() + " people today." 
  }

  get deliverableSafetyItems() {
    return this.item;
  }

  get ppeNow() {
    let ppes = ['masks', 'all PPE (personal protective equipment)', 'gowns', 'gloves'];
    let i = Math.floor(Math.random() * ppes.length);
    let typesOfPpe = () => {
      return this.item !== undefined ? this.item : ppes[i]
    }

    let injectAmericanIndividualism = (country) => {
      return country + ". HAHA! Syyyyyke!! It's all about " + country + " " + country + "!";
    }

    let curveBall = (country) => {
      return country === 'USA' ? injectAmericanIndividualism(country) : (country + ". ");
    }

    return "The amount of " + typesOfPpe() + " you'll get today is " + this.ppeNumber + " units. " + "And it's coming from " + curveBall(this.randomCountry())
  }

  get teamwork() {
    return "Does worldwide teamwork make the dream work? " + (this.isThereTeamwork === 1 ? "Yes!" : "It depends on who you ask!")
  }

  get fullStory() {
    return coronaDay42.theVirus + coronaDay42.ppeNow + coronaDay42.teamwork;
  }

  // setters
  set teamwork(isThereTeamwork) {
    this.isThereTeamwork = isThereTeamwork;
  }

  // Set in class instance declaration below if desired
  // Otherwise will default to one of four values in getter ppeNow()
  set safetyItems(item) {
    if (item !== undefined) {
    this.item = item;
    } else {
      this.item = 'PPE (personal protective equipment)';
    }
  }

  // methods
  multiplies() {
    return this.virus * this.people;
  }

  randomCountry() {
    let countryArray = ['China', 'South Korea', 'Germany', 'USA', 'Singapore', 'Spain', 'France', 'Italy', 'Canada'];
    let i = Math.floor(Math.random() * countryArray.length);
    return this.country = countryArray[i];
  }
}

let randomPeopleNumber = Math.floor(Math.random() * 58494);
let randomPpeNumber = Math.floor(Math.random() * 58492084);
let randomYesOrNo = Math.floor(Math.random() * 2);
// creates a new instance of the class
const coronaDay42 = new CoronaVirus(randomPeopleNumber, 1000, randomPpeNumber);
coronaDay42.teamwork = randomYesOrNo;

console.log(coronaDay42.fullStory);

Happy coding

Build A Simple Quiz App, with React Hooks & Typescript

Cat Perry — Sun, 03 May 2020 14:10:19 +0000

Let's build a quiz app using React Hooks and Typescript. This little application will help us learn how to use React Hooks and Typescript in progressively complex ways. Until using them comes easily and finally 'hooks' into our brains.

So let's get in there: 🧠 🧠 🧠

What are React Hooks?

React Hooks were stabilized and shipped with React 16.8. Without Hooks, React Functional Components would not have a means to use React Lifecycle methods (RLMs), among other things. And instead, you'd have to use Class Components to use the RLMs.

But React Hooks right that ship. With them you can 'hook' into React Lifecycle Methods, manage your application state, and even create reducers on the fly without having to use heavier (but equally great, and sometimes preferable) state-management libraries such as Redux.

Why add Typescript?

JavaScript is a weakly typed language, which means that on variable declaration you aren't required to declare its type, and JavaScript will change the type of a variable as your whims change. For example, here's something we may try (if we had no idea what we were doing, perhaps? Been there!):

let number = '22' // variable is a string
number = {
  age: 22,
  birthdayYear: 2020 
}
console.log(number) // variable is now an object { age: 22, birthdayYear: 2020 }

JavaScript just shrugs... ¯_(ツ)_/¯ This loosey-goosey behavior can, overall, make applications buggier and far harder to maintain. Typescript stops this madness. As a superset of JavaScript, Typescript evaluates your code during compile-time (as opposed to run-time) to be sure your variables and props are what you intend them to be. So the above will turn into this:

let number: string = '22' // variable is a string
number = {
  age: 22,
  birthdayYear: 2020 
} // Type '{ age: number; birthdayYear: number; }' is not assignable to type 'string'.

Typescript says, oh heck NO! 😱 And thank goodness it does! It may seem like a chore to add Typescript and type declarations on smaller applications, but as you build larger applications and work with more engineers, it will go a long way to writing cleaner, more-testable code. So now that we know why it may be good to use React Hooks and Typescript, let's start writing some code!

Setting up the app

I wont go into great detail about setup, because that's the easy part. But easiest route is to use Create React App (CRA); another resource: CRA Github page. For CRA, in your terminal, type this:

npx create-react-app my-app
cd my-app

Now install typescript and the other packages you may need if you'll also use Lodash, Jest, or Sass:

npm install --save typescript @types/jest @types/lodash @types/node @types/node-sass @types/react @types/react-dom lodash node-sass react-dom
npm install // to install all the packages in package.json file

Then type

npm start // to run the app at http://localhost:3000

To officially change the app to Typescript, change the .js files in which you'll use JSX into .tsx files. Any other .js file can become a .ts file.

// src/components/App.tsx
import React, { FunctionComponent } from 'react';

import MainContainer from './Main';

const App: FunctionComponent = () => {
  return (
    <div>
      <MainContainer />
    </div>
  );
};

export default App;

The FunctionComponent type declaration is a Typescript typing for a functional component. Previously, you'd type it as a StatelessComponent, but that is now deprecated because technically any functional component can now have state.

This next component is the MainContainer. Here we'll import useEffect, useState from React to start using our Hooks. In the below file, you'll see const MainContainer: FunctionComponent<{ initial?: Models.QuizResponse; }> = ({ initial }). This sets the type of the FunctionComponent and also declares the data type we expect back from the data fetch to opentdb.com: Models.QuizResponse.

useEffect is a React hook that allows side effects in function components and enables access to the React Lifecycle Methods (RLMs) componenDidMount(), componentDidUpdate(), and componentWillUnmount() all in one. See more about the React useEffect() Hook in the docs.

// src/components/MainContainer.tsx
import React, { FunctionComponent, useEffect, useState } from 'react';

import * as Models from './../models';
import Card from './Card';
import './Main.scss';

const MainContainer: FunctionComponent<{ initial?: Models.QuizResponse; }> = ({ initial }) => {
  // Below is one way state is set using React Hooks, where the first deconstructed variable`quizzes` is the state variable name 
  // and `setQuizzes` is the methodName called to update the quizzes state if needed. Here, use it after the data is fetched successfully. 
  const [quizzes, setQuizzes] = useState(initial);
  const [shouldShowCards, setShouldShowCards] = useState(false);

  const fetchData = async (): Promise<void> => {
    const res = await fetch('https://opentdb.com/api.php?amount=10&type=boolean');
    res.json()
      .then((res) => setQuizzes(res))
      .catch((err) => console.log(err));
  };

  // useEffect is a React hook that allows side effects in function components and enables the React Lifecycle Method (RLM)
 // componenDidMount(), componentDidUpdate(), and componentWillUnmount() lifecycles combined. See more about 
 // the [React useEffect() Hook](https://reactjs.org/docs/hooks-effect.html) in the docs.
  useEffect(() => {
    fetchData();
  }, []);

  const handleButtonClick = (): void => {
    setShouldShowCards(true);
  };

  return (
    <main className='Main'>
      {!shouldShowCards ? (
        <>
          <h2>Welcome to the Trivia Challenge!</h2>
          <div className='StartEndCard'>
            <h2>You will answer 10 of the most rando true or false questions</h2>
            <p>Can you score 10/10?</p>

            <button type='submit' className='Button' onClick={() => handleButtonClick()}>Get Started!</button>
          </div>
        </>
      ) : <Card quizQuestions={quizzes} />}
    </main>
  );
};

export default MainContainer;

Here is how I've set up the Typescript models for this quiz app:

// src/models/Quiz.ts - not a TSX file, because there is no JSX used here. We'll store all TS models called models or similar.
export type Quiz = {
  category: string;
  type: string;
  difficulty: string;
  question: string;
  correct_answer: string;
  incorrect_answers: [
    string
  ];
};

export type QuizResponse = {
  response_code: number;
  results: Quiz[];
}

And here's where a lot of the magic happens. The Card component uses Hooks in a different way than the MainComponent, because the Card component has more complexity. You'd be declaring variables for days follwing the previous page's pattern. Instead, just create an initialState, similarly to how you would on a React Class component.

And that'll also make the state easier to reset when the user has finished the quiz. On button click, we just pass in the initial state to our setState({}) method.
// src/components/Card.tsx

import _ from 'lodash';
import React, { useState } from 'react';

import * as Models from './../models';
import './Card.scss';

interface Props {
  quizQuestions?: Models.QuizResponse;
}

const Card = (props: Props) => {
  const quizQuestions = _.get(props, 'quizQuestions.results', []);
  // Here is another way to set state using React Hooks. This is a neater approach than setting them individually like you'll see
  // in Main.tsx. This approach is great for larger states.
  const initialState = {
    currentIndex: 0,
    score: 0,
    showFinished: false,
    answered: false,
    selectedOption: '',
    revealAnswer: '',
  };

  // These two variable below can be called anything, but we'll name them `state` and `setState` for convention.
  const [state, setState] = useState(initialState);
  // These are variables that we'll refer to throughout this component, so we'll set them on state here. If there are variables you
  // are not referring to outside of the setState({}) funciton elsewhere, they dont need to be delcared here, but can be just set above.
  const {
    currentIndex,
    score,
    revealAnswer,
    selectedOption,
  } = state;

   // A click event is typed as React.ChangeEvent<HTMLInputElement>
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>, correctAnswer: Models.Quiz): void => {
    e.persist();
    e.preventDefault();
    const isCorrect: boolean = e.target.id.includes(correctAnswer.toString()) ? true : false;
    const renderAnswer: string = isCorrect ? 'Correct!' : 'Sorry, wrong answer!';

    setState({
      ...state,
      selectedOption: e.target.id.toString(),
      answered: isCorrect ? true : false,
      revealAnswer: renderAnswer
    });

    if (currentIndex + 1 > quizQuestions.length) {
      setState({ ...state, showFinished: true });
    } else {
      // delay for question auto-advance, to display 'Correct' or 'Incorrect' feedback
      setTimeout(() => {
        setState({ ...state, score: isCorrect ? score + 1 : score + 0, currentIndex: currentIndex + 1, revealAnswer: '' });
      }, 2000);
    }
  };
  // Below you could return a div, but since we already have an anchor div below, let's return a fragment.
  const renderAnswer = (): React.ReactFragment => {
    return (
      <>{revealAnswer}</>
    );
  };

  return (
    quizQuestions && quizQuestions.length > 0 && (currentIndex < quizQuestions.length) ?
      <div>
        <h2>{quizQuestions[currentIndex].category}</h2>
        <main className='Card'>
          <h1>{_.unescape(quizQuestions[currentIndex].question)}</h1>
          <div>Difficulty: {quizQuestions[currentIndex].difficulty}</div>
        </main>

        <section>
          <div className='Answer'>{renderAnswer()}</div>

          <form className='form'>
            <div className='inputGroup' role='radiogroup'>
              <label id='label' htmlFor='radioTrue' className='container'><input id='radioTrue' name='radio' type='radio' checked={selectedOption === 'True'} onChange={(e) => handleChange(e, quizQuestions[currentIndex].correct_answer)} />
              True<span className='checkmark'></span></label>
            </div>
            <div className='inputGroup' role='radiogroup'>
              <label id='label' htmlFor='radioFalse' className='container'><input id='radioFalse' name='radio' type='radio' checked={selectedOption === 'False'} onChange={(e) => handleChange(e, quizQuestions[currentIndex].correct_answer)} />
              False<span className='checkmark'></span></label>
            </div>
          </form>
        </section>

        <footer className='Badge'>
          Question {currentIndex + 1}/{quizQuestions.length}
        </footer>
      </div>
      :
      <div>
        <main className='Card'>
          <h3>
            You scored {score} / {quizQuestions.length}
          </h3>

          <button className='Button' type='reset' onClick={() => setState(initialState)}>
            Start Over
          </button>
        </main >
      </div>
  );
};

export default Card;

Lastly there some Sass files just to make things look good, but you dont need to follow those if you want to achieve your own aesthetic.

Checkout the full application on my Cat Perry Github page.

If you've found this helpful. Please Share it on Twitter and heart it as well. Happy coding, happy passing it on!