(Javascript) My learning journey: Object Oriented Programming (OOP)

An essential point to remember a training course is to take notes and discuss the subject with others. That's why every day I will post on dev.to the concepts and notes that I learned the day before.

If you want to miss nothing click follow and you are welcome to comments and discuss with me.

Without further ado here is a summary of my notes for today.

OOP in JS

In javascript OOP:

• We create objects
• We link them to a prototype object
• Then the objects inherit all the methods of the prototype

How can we create objects and their Prototype?

We have many ways in JS to do that:

• Constructor Functions (see below)
• Classes (ES6)
• Object.create (Will not be covered here)

Constructor

// Constructor by convention have capital case
const Person = function(firstName, birthYear) {
  // this keyword will set the property to object instance
  this.firstName = firstName
  this.birthYear = birthYear
}
// create new object instance (set this keyword and link to prototype)
const person1 = new Person('Mike', 1990)

// Check object type
console.log(person1 instanceof Person) // {firstName: 'Mike', birthYear: 1990}

Prototype

// Define prototype method
Person.prototype.calcAge = function() {
  console.log(2021 - this.birthYear)
}

// Now this method is available for all object instance
person1.calcAge()

// We can also add a prototype property
Person.prototype.maxAge = 100

// This property is shared with all of his object instances
console.log(person1.maxAge) // 100

Class

class Person {
  constructor(firstName, birthYear) {
    this.firstName = firstName
    this.birthYear = birthYear
  }

  calcAge() {
    console.log(2021 - this.birthYear)
  }
}

const person1 = new Person('Mike', 1990)

Getters, Setters and Static methods

class Post {
  constructor(title, body) {
    // use _title to avoid name conflict with get and set
    // it is also a convention to mark the property as read only
    this._title = title
    this.body = body
    this.tags = ['web', 'dev', 'js']
  }
  get title() {
    return this._title.trim().toUpperCase()
  }

  set title(value) {
    this._title = value
  }

  // create a static method
  // static method do not exist in object instance
  static displayHello() {
    console.log('hello World')
  }
}

// Access get and set like a property
post = new Post('My blog', 'blog body...')
console.log(post.title) // MY BLOG
post.title = 'New title'
console.log(post.title) // NEW TITLE

// call static method
Post.displayHello() // 'Hello World'

Inheritance

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName
    this.lastName = lastName
  }
  greeting() {
    console.log(`${this.firstName} is a person`)
  }
}

// use extends keyword to create inheritance
class Customer extends Person {
  constructor(firstName, lastName, creditLimit) {
    // super() will call parent constructor
    super(firstName, lastName)
    this.creditLimit = creditLimit
  }

  // if a greeting() method exist in parent, it will be override
  greeting() {
    console.log(`${this.firstName} is a customer`)
  }
}
client = new Customer('Mike', 'Taylor', 2500)
client.greeting() // 'Mike is a customer'

Encapsulation (private and protected)

Actually in JS real private and protected do not exist. We use the convention underscore _ to mark the property or method as private/protected

class Person {
  constructor(firstName, lastName) {
    // mark private/protected by convention
    this._firstName = firstName
    this._lastName = lastName
  }
  // If we want to expose a public property, we use a getter and setter
  get firstName() {
    return this._firstName
  }
  set firstName(value) {
    this._firstName = value
  }
  greeting() {
    console.log(`${this._firstName} is a person`)
  }
}

const person1 = new Person('Mike', 'Taylor')
console.log(person1.firstName) // Mike

Comments

[Lars Moelleken]

OOP !== classes

In object oriented programming you have states instead of functional programming, so it's important to manage this states. Many dev teams try to minimise the maintaining hell by restrictions e.g. access to this states or communication between the objects, and this is what OOP is.

Good OOP is mostly related to the SOLID principles.