Object Oriented JavaScript - Classes

Unlike PHP, Java, and C#, javascript did not have true class-based functionality. Before javascript classes were introduced in ES6 we had to use a constructor function and prototype syntax to mimic class behavior. The prototype keyword allows every instance of Person to have access to the fullName function.

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

Person.prototype.fullName = function() {
  console.log(this.firstName +' ' +this.lastName);
};

const guy = new Person('Manny', 'Jones');

guy.fullName();

//Manny Jones

Starting with ES6 in 2015 we were introduced to the class keyword and the constructor function where the properties are assigned. It is important to note that classes are executed in strict mode.

Let's start with the basic synax:

class className {
  constructor(/*optional arguments*/){
    //properties
  }
  
  method() {
    //code
  }
  method2() {
    //code
  }
  method3() {
    //code
  }
}

class className : all javascript classes start with the class keyword and the name of the class. The name of the class must start with a capital letter.

constructor: the constructor method is where you add the properties that will be associated with all instances.

methods: the methods are all of the functions that can be used on the instances of the class.

Now an example:

class Person {
  constructor(firstName, lastName){
    this.firstName = firstName;
    this.lastName = lastName;
  }
  
  fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

const singer = new Person('Freddie', 'Mercury');
singer.fullName();

//"Freddie Mercury"

Getters and Setters

Setter methods are used to set a value that can be used by a getter method. Setter methods only take one argument. An error will be thrown if not.

class Brand {
  constructor(name){
    this._brandName = name;
  }
  
  get brandName(){
    return this._brandName;
  }
  
  set brandName(str) {
    this._brandName = str;
  }
}

let bag = new Brand('Chanel');
bag.brandName;
//Chanel

//to update the brand name
bag.brandName = 'Coach';
//Coach

Static Methods

Static methods are defined on the class and cannot be used on the instances of the class.

class Person {
  constructor(fName, lName){
    this._first = fName;
    this._last = lName;
    }
    
    fullName(){
      return `${this._first} ${this._last}`;
    }
    
    static greeting() {
      return 'Hello!';
    }
  }

const user = new Person('Mary', 'Shelly');
user.fullName();
//'Mary Shelly'

user.getting();
//error: user.getting is not a function

Person.greeting();
//'Hello!'

Inheritance

If you need another class to have access to methods from another class you use the extend keyword.  All classes that are extended from another become children of the parent class. You must use the super keyword to call the parent class's constructor method.

class Person {
  constructor(fullname){
    this._fullname = fullname;
  }
  
  fullname(){
    return `${this._fullname}`;
  }
  
  greeting(){
    return `Hello ${this._fullname}!`;
  }
}

//class Singer is now a child of the Person class
class Singer extends Person {
  constructor(_fullname){
    super(_fullname);
  }
  
  greeting(){
    return `Hello ${this._fullname}! We love your voice.`;
  }
}

let queen = new Singer('Freddie Mercury');
queen.greeting();

//"Hello Fredie Mercury! We love your voice."

Hoisting

Classes must be defined before they can be utilized unlike other functions in javascript.

const iphone = new Device('iPhone','cell phone');
iphone.deviceType();
//Device is not defined

class Device {
  constructor(name,type){
    this._type = type;
    this._name = name;
  }
  
  deviceType(){
    return this._type;
  }
}
//this code will return the desired value after the class is defined
const samsung = new Device('Samsung', 'cell phone');
samsung.deviceType();
//'cell phone'

As always play with the code and see what happens.