Object-Oriented Programming in JavaScript (Part II)

Classes

Last time I was just beginning to cover object prototypes. If you haven't read part I of this series about object prototyping you can catch up on Part I of OOP here.

Classes are a widely used take on prototypes. Classes define methods and properties for a type of object known as an instance of a class. Classes contain constructor functions, which ensures your instances share the parent class's properties. ReactJS classes explicitly call constructors for defining properties such as this.state and this.handleChange.

Outside of React, you can use new in front of your function to make it into a constructor function. It returns an object bound to your function with this. Your constructor function contains a prototype property, which can be called.

Since 2015 we have a simpler notation for classes:

class Hamburger {
  constructor(type) {
    this.type = type;
  }
  order(build) {
   console.log('Give me a ${this.type}, ${build}`)
  }
}
let doubleMeat = new Hamburger('Double Meat');
let fourByFour = new Hamburger('Four by Four');

As you can see, our constructor function is present along with methods declared. In this class notation the constructor and any methods are now packed together within the class's brackets. The methods declared within the constructor function, however, are bound to this particular instance using this. Other methods defined in a class are bound by default to the class's prototype.

This is where you need to be careful when adding properties to your class declarations. If the property already exists in the object prototype, the existing property will be replaced, or overwritten. Contrary to its risks there is also use in being able to override properties, such as creating exceptional property values for specific instances of a class while allowing other instances of a class to continue deriving from their prototype. This is part of a pattern that is preeminent in JavaScript called prototypal inheritance (adding functions with the .prototype property to a class.)

Maps

JavaScript Maps (not to be confused with the map(), which applies a function to each element in a data structure) are data structures that associate keys with values in the form of pairs. As an example, you may want to associate names of Pokemon in your party with their levels, so you may want to create an object like

let pokemonLevels = {
  Charizard: 100,
  Metagross: 100,
  Garchomp: 92,
  Gyarados: 96,
  Naganadiel: 98,
  Obstagoon: 100
  };

  console.log(`Charizard is at level ${pokemonLevels["Charizard"]}`);

Objects aren't recommended for use as maps if you need keys that shouldn't be converted to strings with something as simple as toString(). However you can store any type of value as a key in a Map thanks to the methods get, set, and has. This idea of being able to convert object properties (of different types) into strings is called polymorphism. On a side note, you should remember that locally scoped variables shadow global ones. You'll find some standard objects include a version of toString() that differs from the standard definition of toString().

Javascript objects provide another interface known as iterator, used for iterating over objects in a for/of loop. Iterator includes next and done properties, which respectively return the next value, and a boolean when there are no results left, in the object. To iterate over key/value pairs in an object (key referring to a property), you can use Object.keys, which returns an array with your object's keys.

Well that's it for Part II of Object Oriented Programming! I'll leave it at that so as to not make myself dizzy. I'll be posting rather frequently so stay tuned for Part III!

Works Cited

Haverbeke, Martin "The Secret Life of Objects", Eloquent JavaScript - A Modern Introduction to Programming, 3rd Edition, 2019, Chapter 6, No Starch Press, Inc.