Object-Oriented Programming in JavaScript (Part II)
Tags: codenewbie, javascript, oop, beginners
Published: 2020-11-09 00:00:00

---
title: 'Object-Oriented Programming in JavaScript (Part II)'
subtitle: 'Part II - JavaScript Classes'
date: '2020-11-09'
cover_image: 'https://images.pexels.com/photos/164583/pexels-photo-164583.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'
series: 'Object Oriented Programming in JavaScript'
---

**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](https://next-js-blog-piy6sy7x1.vercel.app/posts/javascript-prototype "Object Oriented Programming in JavaScript (Part I)").

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.