Site icon Teaching Newbies since 2014

Classes in JavaScript – a newbie friendly introduction

Classes

In object-oriented programming, class types are templates for creating objects. As we just
learned that in prototypal inheritance, objects inherit properties and methods from a
prototype. Classes build upon prototypal inheritance. Classes were introduced in ES6 to
mimic the class data type found in Java and other object-oriented programming languages.

Till now developers used constructor functions to mimic object-oriented design patterns.
JavaScript does not have the class type, so we create functions in a way that they behave
as classes to allow us to easily create objects. A class is a function and when invoked as a
constructor will create an instance of that class.

Classes introduced in ES6 allow you to create objects easily from a template function. We
will discuss classes in detail later on in this chapter. For now, we will look at how to create classes and then instantiate objects from a class using the new keyword.
A class is a special type of function which is declared with the class keyword:

class Character{
constructor(){…}
method(){…}
}

Class declarations are not hoisted; therefore you cannot use them prior to declaration.
Inside the class Character, a constructor() method is used which will add
properties to instances of the Character class. A class can only have one constructor
method():

class Character {
    constructor(food, energy, points) {
        this.food = food;
        this.energy = energy
        this.points = points;
    }
    friendship() {
        return(this.energy + this.points);
    }
}

The constructor() method takes three parameters food, energy and points. Add
then inside the constructor method called friendship(), the this keyword is used to
bind the values of the food, energy and points parameters passed to an instance of
an object created using class. friendship() is a class method which will return this sum
of parameters energy and points of an object instance.

We can now use the class Character template to spawn new objects like so using the
new keyword and the name of class:

let tomNook = new Character('bread',100, 2340);
let kidCat = new Character('milk', 10, 1340);
let baaBara = new Character('apples', 40, 1870);

In the code example, we have spawned three new object instances using the Character
class. If we log one of these to the console, a list of key : value pairs will be returned for
that particular instance. For example:

console.log(baaBara);

Object {
energy: 40,
food: "apples",
points: 1870
}

You need not only use class declarations. Class assignments are possible as well, just like
function assignments. For example:

let Character = class {
    constructor(food, energy, points) {
        this.food = food;
        this.energy = energy
        this.points = points;
    }
    friendship() {
        console.log(this.energy + this.points);
    }
};

This is a brief introduction to classes in JavaScript.

Exit mobile version