Best Practices for OOP in JavaScript

Object-oriented programming (OOP) is a programming paradigm that uses abstraction to create models based on the real world. OOP in JavaScript has become increasingly popular in recent years and is a powerful way to create maintainable code. In this tutorial, we will discuss the best practices for OOP in JavaScript and how you can use them to write better code.

Creating Objects

One of the key principles of OOP is that objects can be created from templates. In JavaScript, you can use the new keyword to create objects from an existing template, called a constructor. The constructor is a function that is used to initialize the newly created object. To create an object using a constructor, you must call the constructor with the new keyword.

A constructor is a function that has the same name as the object, and is used to initialize the object’s properties. For example, if you wanted to create an object called Person, you would create a constructor function with the same name:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

function Person(name, age) {
    this.name = name;
    this.age = age;
}

[/dm_code_snippet]

In the constructor, you can define any properties that the object should have. In this example, we are defining two properties, name and age. To create an instance of the Person object, you would use the new keyword and pass in any necessary arguments:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

let bob = new Person('Bob', 22);

[/dm_code_snippet]

The bob object now has the name and age properties set to the values that were passed in. We can access these properties using dot notation:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

console.log(bob.name); // prints 'Bob'
console.log(bob.age); // prints 22

[/dm_code_snippet]

Object Properties and Methods

Objects can contain any type of data, including functions. Functions that are contained within objects are called methods. Methods give objects the ability to perform actions. For example, we could add a sayHello() method to the Person object:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

function Person(name, age) {
    this.name = name;
    this.age = age;
    this.sayHello = function() {
        console.log(`Hello, my name is ${this.name}`);
    }
}

[/dm_code_snippet]

The sayHello() method will print a greeting to the console. To call the method, we use dot notation:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

let bob = new Person('Bob', 22);
bob.sayHello(); // prints `Hello, my name is Bob`

[/dm_code_snippet]

Inheritance

Inheritance is one of the key features of OOP and allows objects to inherit properties and methods from parent objects. In JavaScript, inheritance is achieved using the prototype property. The prototype property is an object that is used to define the properties and methods that should be inherited by all instances of the object.

For example, if we wanted to create a Student object that inherits from the Person object, we would create a Student constructor and set the prototype property to the Person object:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

function Student(name, age, grade) {
    this.name = name;
    this.age = age;
    this.grade = grade;
}

Student.prototype = Object.create(Person.prototype);

[/dm_code_snippet]

Now, all instances of the Student object will have access to the properties and methods of the Person object. We can also add methods and properties to the Student object that are specific to the Student object:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

Student.prototype.getGrade = function() {
    return this.grade;
}

[/dm_code_snippet]

Classes

In recent versions of JavaScript, the class syntax has been introduced. This syntax makes it easier to create objects with constructors and prototypes. For example, the Person object from the previous example can be rewritten using the class syntax:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    sayHello() {
        console.log(`Hello, my name is ${this.name}`);
    }
}

[/dm_code_snippet]

The class syntax is much easier to read and understand, and is the preferred way to create objects in JavaScript.

Conclusion

In this tutorial, we have covered the best practices for OOP in JavaScript. By following these best practices, you can create maintainable code that is easy to read and understand. For more information, be sure to read the official documentation on JavaScript classes.