How to use JavaScript Classes

JavaScript classes, how to use them, what are they, and how can we get the best out of them.A shortened and explained guide covering the class information from the great mozilla developer references and guides here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

What are they?

In short, using a JavaScript Class to make objects, is a way of making data structures that combine variables with functions and keep them very separate from the rest of your application. The point being, you can work together with your coworkers, or with other programmers, and keep your stuff out of their stuff. That’s the main philosophy of Object Oriented Programming as I see it. Most of the time you experience it as a programmer like this.

You find an issue on your website, something that needs to be done. Maybe something like uploading a file to Google Storage. Normally learning the API, getting everything set up, and finding out how to make requests, and in what order, and getting your code to match how the data is expected to be sent up to Google Cloud, it’s just a lot of complexity and difficulty smashed together. It’s enough to make you want to give up. But if you go and download the SDK, the Software Development Kit, for Google Cloud, they’ll give you a class you can use to make an object with. Once you have your object, you can use it to upload a file to google cloud, and it takes less than an afternoon.

Because of this, you can kind of expect to need to use classes, and if you work at a job, it’s nice to structure your code up, so that you don’t put a bunch of variable names into the main namespace. For example. If several programmers are writing code without objects, you’ll have to start finding new names for common variable names like, result, height, max, min, i etc.

Does this help me if I work by myself?

In my view, absolutely. Unless you’re making a very very small page that you somehow know will never need to be combined with anyone elses code, it’ll be worth your time to organize your code.

Even in the case where you have a small game, a little function you are writing to practice with, or you’re just copy and pasting code to learn it for the first time. You’ll benefit from using classes, just because of the practice.

Now, if you are taking special pains to make sure that your code works perfectly on older browsers, you may not be able to use a class. Because unfortunately, they’re not supported all over the web. Just modern browsers.

In fact, for Internet explorer, you’re out of luck for most of these. https://caniuse.com/?search=class

If you’re using node.js, or if you’re willing to use a preprocessor like Babel. Then I would argue it’s hard not to use classes to smooth out your life a little bit. Babel.js is a tool that makes all the newest and greatest JavaScript features available on older browsers.

All right, so what’s the syntax. Here’s how you’ll normally create a class.

// Setup name
class Rectangle {
// constructor is the function that gets called when you create a new class
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}
let objectOfRectangle = new Rectangle(4, 4);

There’s another way to do it. This is called a class expression. While the previous way is called a declaration.

// unnamed
let Rectangle = class {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name);
// output: "Rectangle"


// named
let Rectangle = class Rectangle2 {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
};
console.log(Rectangle.name);
// output: "Rectangle2"

Keep in mind, you’ll need an object of a class, since if you call it right away, you will see an error.

const p = new Rectangle(); // ReferenceError

class Rectangle {}
// ReferenceError

What is this super keyword.

It’s for reaching up and calling the constructor of the object directly above it. It’s direct parent.

So in the case where you have classes inheriting from other classes, you can have a child class, that’s also going to call the constructor above it, and then do more as well.

Here’s an example.

class box {
// constructor is the function that gets called when you create a new class
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}
class coloredBox extends box {
// constructor is the function that gets called when you create a new class
  constructor(height, width, color) {
super(height,width);
this.color = color;
  }
}