JavaScript Fundamentals: Classes + Constructor Functions

JavaScript’s class functionality was added with the ES6 update in 2015 to allow programmers who work within other languages that already have class capabilities to be able to move between languages a bit easier. They don’t necessarily offer deeper functionality but they do help to organize and create more elegant, readable code.

Before classes were created in JS ES6, programmers used a type of function called a constructor function. They can both be used for the same purpose, to be a blueprint for the creation of objects.

The syntax is also very similar for both but the JS class is certainly more straightforward.

While it is common practice to capitalize the first letter of a constructor function’s name, this is also optional . Confusion could arise as this would leave the programmer to either be familiar with the context of the function and the general syntax of a constructor function to recognize it as such. A JS class helps to clear up any mystery.

JavaScript classes, introduced in ECMAScript 2015, are primarily syntactical sugar over JavaScript’s existing prototype-based inheritance. The class syntax does not introduce a new object-oriented inheritance model to JavaScript.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

Basic syntax of a constructor function:

function MyConstructorFunction (name, age) {
   this.name = 'name';
   this.age = 29;
}

And here is the basic syntax for a class:

class MyClass {
   constructor (name, age) {
     this.name = 'name';
     this.age = 29;
  }
}

If we compare the syntax of a constructor function and a class, we can see that they are very similar. The JS class is essentially a container for a constructor function which itself already acts as a blueprint for objects.

A class can be thought of as a template or cookie cutter form that is used to create as many or as little objects as we want, in a way that keeps your code concise, useable and organized.

Some examples of a useful way of implementing classes are when you need to gather and organize input from a check-out process, a sign-up process, a form, a blog, or even a map.

Classes offer a predefined structure for this data to get filed intoa program and allows for minor tweaks when desired through the use of optional arguments.

The basic syntax for creating an object with a class might look like:

class myClass {
   constructor(arg1, arg2, arg3) {    
   this.age = arg1;         
   this.name = arg2;
   this.location = arg3;
   }
}

let myNewObj = new myClass(arg1, arg2, arg3);     // arguments are optional but can allow each new object to have unique values

It is important to note the use of the ‘this’ keyword within classes. Read more about the ‘this’ keyword here.