Classes in JavaScript

This week I wanted to go back a bit to some of the concepts that I had learned during my time at bootcamp but never really took the time to look deeper at. One of those concepts in JavaScript is classes. Learning the basics of Object-Oriented programming, classes were a pretty straightforward concept for me. Creating code based representations of what your data is trying to represent seems like a pretty easy way to think of things. The thing about JavaScript though, is that though it supports the paradigm of Object Oriented Programming, it is not itself an Object Oriented language. It does this through classes like many Object Oriented languages, but things work a little bit differently since JavaScript is a Procedural language.

What is a Class in JavaScript?

To understand what classes are we have to talk a little bit about how JavaScript handles data. Almost everything in JavaScript is an Object, with the exclusion of primitive data types. Classes in JavaScript are just a template for creating objects that encapsulate data. If you're thinking, "Hey that sounds a lot like a function!", you'd be right. Classes are "special functions" and just like functions they can be defined using an expression or a declaration. If that sounds a bit confusing lets take a look at some examples compared to functions.

// Function declaration
function sayHello(){
  return "Hello";
}

// Function expression
let sayHello = () => "Hello";

// Class declaration
class Dog {
  constructor(name) {
    this.name = name;
  }
}

//Class expression
let puppy = class Dog {
  constructor(name) {
    this.name = name;
  }
}

Keep in mind that although classes are special functions, they do not follow the same hoisting rules as functions. This means that you will have to declare your class before you call it unless you want a nasty ReferenceError.

Class Body

The body of a class, like the body of a function, is the part between the curly braces. This is where the magic is so to speak. You can define methods, constructors, and other such things that might be useful for your class.

constructor

One of the most important aspects defined in the body of a class is the constructor method. This method is a special one that allows you to define how your class will be created and initialized. If you look at the constructor for the Dog class up above, it defines how instances of the Dog class will be constructed. It takes one argument, a name, and initializes the name property to the passed in value. Note that you can only have one method with the name "constructor" per class.

If your class has a "super" or "parent" class, you can also use the super keyword to call the constructor of the super class.

Methods

Methods are a way in which you can define actions for your class. There are four types of methods: standard "instance" methods, static methods, getter methods, and setter methods. Let's look at some examples of each of these and then talk a bit more about them.

class Square {
  constructor(side) {
    this.side = side;
  }

  // standard method
  areaMessage() {
    return `The area of this square is ${this.side * this.side}`
  }

  // static method
  static areaFormula() {
    return "A square's area is the length of it's side squared"
  }

  // getter method
  get area() {
    return this.side * this.side;
  }

  // setter method
  set area(newValue) {
    this.side = Math.sqrt(newValue);
  }
}

Standard methods work just like regular methods. The can be called on an instance of a class to execute the code inside specific to that instance of the class. In the example above, if we were to call the areaMessage method on an instance of the Square class, it would return a string with a message telling you the square's area.

Static methods are class level methods. The cannot be called by individual instances of the class, only the class itself. They are generally used for utility methods that do not require a specific instance of the class. In the example above, the areaFormula method returns a message that explains the area formula for squares in general.

Getter methods allow us to define pseudo properties for our class. For example, in a Square class you might want an area property - but the area of a square will change if the length of its sides change. Instead of creating an area property in the constructor that could become inaccurate if other data changes, we can just create a getter method that will return the value of performing area calculations on the square's side value.

Setter methods are similar to getter methods, except that they change a value instead of returning one. For our area example, it might be useful to be able to set the area pseudo-property directly. Since our getter method is based on the value of the square's side, we can just reverse the getter process and set the side value to the square root of the area. Now whenever we change the area or the side value, we can be sure that both values will be updated correctly.

Conclusion

If you want to learn more about classes and object oriented programming in JavaScript, definitely take a look at the MDN Docs. There are some great experimental features that are worth checking out such as private and public field declarations. Happy Coding!