OOP in JavaScript

The most notable appearance of the term object in relation to programming languages took place in the 1980s. Since then, object-oriented programming has become the most important way to create software. Object-oriented programming at the most basic level is the use of objects as building blocks for an application. In this week's blog we will explore some important object oriented mechanisms supported by JavaScript and their implementations.

Defining an Object

In Javascript, objects do all the heavy lifting. The objects are self-contained. They store all related data and functionality to be implemented during development. Object contains properties that describe the instance and methods that perform actions on the instance. Let's create some objects!

// Create an object using an object literal
const location = {
  // characteristics of the instance
  city: 'New Orleans',
  state: 'Louisiana',
  // methods of the object
  getLocation: ()=>{
    return (`Welcome to ${location.city}, ${location.state}!`)
  },
}

console.info(location.getLocation()); // Prints 'Welcome to New Orleans, Louisiana!'

// Create an object using an constructor
const Location = (city, state) => {
  // characteristics of the instance
  this.city = city;
  this.state = state;
}
const location1 = new Location('New Orleans', 'Louisiana');
const location2 = new Location('New York', 'New York');

console.info(`Welcome to ${location2.city}, ${location2.state}!`); // Prints 'Welcome to New York, New York!'

// Create an object using Object.create method
// initialize an object literal
const location = {
  greeting: function(){
    console.info(`Welcome to ${this.city}, ${this.state}!`)
  }
}
// assign the new instance to a variable
const vacaLocation = Object.create(location);
// add properiest to the new instance
vacaLocation.city = 'Sao Paulo';
vacaLocation.state = 'Brazil';

vacaLocation.greeting(); // Prints 'Welcome to Sao Paulo, Brazil!'

Encapsulation

Encapsulation is the localization of all of the functionalities of an object inside of that object. The Constructor/Prototype pattern is the most common way to define objects of a type. The constructor pattern defines the properties of the object and the prototype pattern defined the methods and shared properties.

class Location {
  construction(city, state){
    // initialize the objects properties and methods
    this.city = city;
    this.state = state;
  }
  addDestination(destination){
    this.destination = destination;
  }
  getPlan(){
    console.info(`From ${this.city}, ${this.state} to ${this.destination}`)
  }
}

const trip1 = new Location('New Orleans', 'Louisiana');
trip1.addDestination('Bali, Indonesia');
trip1.getPlan(); // Prints 'From New Orleans, Louisiana to Bali, Indonesia'

Abstraction

Abstraction can be implemented by simply changing how properties and functions are defined. Abstraction is the process of restricting the scope or hiding the data in the background.

// abstract the properties and method by setting them to a variable
function Location(city, state){
  let city = city;
  let state = state; 

  let privateLocation = function(){
    return (`Welcome to ${city}, ${state}!`);
  }
  // use the this keyword to give access to instances
  this.publicLocation = function(){
    return (`Welcome to ${city}, ${state}!`);
  }
}

const location1 = new Location('Seattle', 'Washington');
console.info(location1.privateLocation()); // Prints undefined
console.info(location1.publicLocation()); // Prints 'Welcome to Seattle, Washington!'

Inheritance

A class is an abstract template or parent of object instances. Javascript is specially prototypical oriented language where there isn't a distinction between an instance and a class. What is typically referred to as a class is a prototypical object in JS. The class keyword was added simply as syntax-tical sugar for developers from class-based languages. Inheritance is the process of passing properties and methods of one object to another.

// Class model
class Location{
  constructor(city, state){
    this.city = city;
    this.state = state;
  }
  getLocation(){
    return (`Welcome to ${city}, ${state}!`);
  }
}

// Use the extends keyword to create an subclass of the Location class
class CityByCountry extends Location {
  constructor(city, state, country){
    // Prototype-based inheritance: call related method of the super class (Location)
    super(city, state);
    this.country = country;
  }
  getLocation(){
    return (`Welcome to ${city}, ${state} ${country}!`);
  }
}
const location1 = new CityByCountry('Denver', 'Colorado', 'USA');
console.info(location1.getLocation()); // Prints 'Welcome to Denver, Colorado USA!'

Conclusion

As a JavaScript developer, it is important to understand prototypical inheritance but also explore class-oriented languages such as C++. There are key differences between prototype-based and class-based languages that I will cover in a later blog. In the meantime, see the credits below to expand your understanding of object-oriented programming in JavaScript. Happy coding! See you next time.

Credits
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes
https://javascriptissexy.com/oop-in-javascript-what-you-need-to-know/

Comments

[Eckehard]

The concept of HTML and CSS makes it really hard to gain the full potential of object oriented code. I just released the Document Makeup Library (DML) to solve this issue. Maybe you like to check it out and have fun!

Best regards, Eckehard