OOP in JavaScript

In JavaScript, objects, it their simplest form represent collections of keys paired with values. JS also offers a lot of OOP features that we can use to structure and hone our code even more. Here is a little example to being with:

var computer = {
    name: "Intel",
    cpuCores: 4,
    webCam: true
};

There are several ways to access those values: using array notation or dot notation. Array notation is only available if the key is defined as a string, i.e. enclosed in quotes. Here are several examples of accessing those values:

computer.name;
“Intel”
computer.cpuCores;
4

In the same manner we can assign or create new variables within the object:

computer.cpuCores = 2;
computer.ram = 4096;

And now we have a full object information:

computer;
Object {name: “Intel”, cpuCores: 2, webCam: true, ram; 4096}

In the same manner as we have assigned variables to an object, we can also assign functions. When we assign functions, they become class’ methods.

computer.print = function () {
    console.log(“Computer Info: ” + this.name + “, ” + cpuCores + “ this.cores, ” + this.ram + “ RAM.”);
};
computer.print();
Computer Info: Intel, 2 cores, 4096 RAM.

As a matter of fact, the method can be shared among many different objects. We just need to assign it to a variable and then pass this variable to the objects that we want to have this method.

var print = function () {
    console.log(“Computer Info: ” + this.name + “, ” + cpuCores + “ this.cores, ” + this.ram + “ RAM.”);
};
var computer_1 = {
    name: “Dell”,
    cpuCores: 4,
    webCam: false,
    ram: 4096,
    print: print
}
computer_1.print();
Computer Info: Dell, 4 cores, 4096 RAM.

If you are familiar with OOP, a lot of languages create objects using constructors. JS also allows for the use of constructors. It is even easier in here. Once you declare constructor and call it, you have your object.

var Computer = function (name, cores, ram) {
    this.name = name;
    this.cores = cores;
    this.ram = ram;
};
var computer_2 = new Computer(“Asus”, 2, 2048);
computer_2;
Computer {name: “Asus”, cores: 2, ram: 2048}

There is also a better way to customize object in JS using OOP approach. In OOP we want objects to have their own functionality built-in as methods. JS prototypes make it easy to share such functionality between different objects. All constructors have prototype property, and that’s how we can add methods to it. Once we add methods with prototype to that object’s constructor, it will be available to all objects created by this constructor later on. We can do following:

Computer.prototype.print = function () {
    console.log(“Computer Info: ” + this.name + “, ” + cpuCores + “ this.cores, ” + this.ram + “ RAM.”);
}

From now on, all objects created will have this method available to them.

JavaScript makes it incredibly easy to add functionality and variables. Our decision to route those assignments and accesses through OOP is a desire to improve the code, make it more readable, and reusable. You were able to see that with something like prototype we no longer need to care for assignment of the method to every single object. OOP approach has helped us to make things simpler.