JavaScript OOP Objects

Object-oriented programming (OOP) is a programming paradigm that organizes code into reusable and modular objects that interact with each other. JavaScript is a programming language that supports OOP and has built-in features for creating objects and classes. In this answer, we will explore object-oriented programming in JavaScript and provide examples of how to use it.

Creating Objects in JavaScript:

JavaScript allows you to create objects using object literals, constructor functions, and classes.

a. Object literals:

Object literals are the simplest way to create objects in JavaScript. They allow you to create an object by defining its properties and values enclosed in curly braces {}.

Example:

const person = {

  firstName: “John”,

  lastName: “Doe”,

  age: 30,

  fullName: function() {

    return this.firstName + ” ” + this.lastName;

  }

};

console.log(person.firstName); // “John”

console.log(person.fullName()); // “John Doe”

In the example above, we have created an object person with properties firstName, lastName, and age. The fullName property is a function that returns the full name of the person.

b. Constructor functions:

Constructor functions are functions that are used to create new objects. They are called with the new keyword and have a capitalized name.

Example:

function Person(firstName, lastName, age) {

  this.firstName = firstName;

  this.lastName = lastName;

  this.age = age;

  this.fullName = function() {

    return this.firstName + ” ” + this.lastName;

  }

}

const person1 = new Person(“John”, “Doe”, 30);

const person2 = new Person(“Jane”, “Doe”, 25);

console.log(person1.firstName); // “John”

console.log(person2.fullName()); // “Jane Doe”

In the example above, we have created a Person constructor function that takes three arguments firstName, lastName, and age. We have then used this constructor function to create two objects person1 and person2.

c. Classes:

Classes are a newer feature in JavaScript that provide a more structured way of creating objects. They are syntactic sugar for constructor functions.

Example:

class Person {

  constructor(firstName, lastName, age) {

    this.firstName = firstName;

    this.lastName = lastName;

    this.age = age;

  }

  fullName() {

    return this.firstName + ” ” + this.lastName;

  }

}

const person1 = new Person(“John”, “Doe”, 30);

const person2 = new Person(“Jane”, “Doe”, 25);

console.log(person1.firstName); // “John”

console.log(person2.fullName()); // “Jane Doe”

In the example above, we have created a Person class with a constructor method that takes three arguments firstName, lastName, and age. We have also defined a fullName method on the class. We have then used this class to create two objects person1 and person2.

Inheritance in JavaScript:

Inheritance is the process of creating a new class based on an existing class. In JavaScript, you can achieve inheritance using the extends keyword.

Example:

class Person {

  constructor(firstName, lastName, age) {

    this.firstName = firstName;

    this.lastName = lastName;

    this.age = age;

  }

  fullName() {

    return this.firstName + ” ” + this.lastName;

  }

}

class Employee extends Person {

  constructor(firstName, lastName, age, salary) {

    super(firstName, lastName, age);

    this.salary = salary;

  }

  getSalary() {

    return this.salary;

  }

}

const employee1 = new Employee(“John”, “Doe”, 30, 50000);

console.log(employee1.firstName); // “John”

console.log(employee1.fullName()); // “John Doe”

console.log(employee1.getSalary()); // 50000

In the example above, we have created an Employee class that extends the Person class. The Employee class has a constructor method that takes four arguments firstName, lastName, age, and salary. It also has a getSalary method that returns the salary of the employee. We have then used this class to create an employee1 object.

The extends keyword in the Employee class definition indicates that the Employee class inherits from the Person class. The super keyword in the Employee constructor method is used to call the constructor of the Person class and pass the firstName, lastName, and age arguments.

Encapsulation in JavaScript:

Encapsulation is the practice of hiding the implementation details of an object from the outside world. In JavaScript, encapsulation can be achieved using closures or symbols.

a. Closures:

Closures are functions that have access to the variables of their outer function. They can be used to create private properties and methods.

Example:

function Person(firstName, lastName, age) {

  let salary = 50000;

  function getSalary() {

    return salary;

  }

  this.firstName = firstName;

  this.lastName = lastName;

  this.age = age;

  this.fullName = function() {

    return this.firstName + ” ” + this.lastName;

  };

  this.getSalary = function() {

    return getSalary();

  };

}

const person1 = new Person(“John”, “Doe”, 30);

console.log(person1.firstName); // “John”

console.log(person1.fullName()); // “John Doe”

console.log(person1.getSalary()); // 50000

In the example above, we have created a Person constructor function that has a private salary variable and a private getSalary function. The salary variable and the getSalary function are not accessible from outside the Person constructor function. The fullName method and the getSalary method are public methods that are accessible from outside the Person constructor function.

b. Symbols:

Symbols are unique and immutable values that can be used as property keys. They can be used to create private properties and methods.

Example:

const salarySymbol = Symbol(“salary”);

class Person {

  constructor(firstName, lastName, age) {

    this.firstName = firstName;

    this.lastName = lastName;

    this.age = age;

    this[salarySymbol] = 50000;

  }

  fullName() {

    return this.firstName + ” ” + this.lastName;

  }

  getSalary() {

    return this[salarySymbol];

  }

}

const person1 = new Person(“John”, “Doe”, 30);

console.log(person1.firstName); // “John”

console.log(person1.fullName()); // “John Doe”

console.log(person1.getSalary()); // 50000

In the example above, we have created a salarySymbol symbol and used it as a private property in the Person class. The fullName method and the getSalary method are public methods that are accessible from outside the Person class.

In conclusion, JavaScript provides several ways to implement OOP concepts such as creating objects, inheritance, and encapsulation. By using these OOP concepts, you can write more organized, modular, and reusable code in JavaScript.