Classes in JavaScript
Tags: javascript
Published: 2020-10-06 01:54:46

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.

```javascript
// 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.


```javascript
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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes). There are some great experimental features that are worth checking out such as private and public field declarations. Happy Coding!