(Javascript) My learning journey: Object Oriented Programming (OOP)
Tags: javascript, beginners, tutorial
Published: 2021-02-28 19:00:23

---
title: (Javascript) My learning journey: Object Oriented Programming (OOP)
published: true
description: 
tags: javascript, beginner, tutorial
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ik1c8mr2sz8zi3g466dq.jpg
series: (Javascript) My learning journey
---

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.

<h2>OOP in JS</h2>
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)

<h2>Constructor</h2>
```js
// 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}

```

<h2>Prototype</h2>
```js
// 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
```
<h2>Class</h2>
```js
class Person {
  constructor(firstName, birthYear) {
    this.firstName = firstName
    this.birthYear = birthYear
  }

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

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

<h2>Getters, Setters and Static methods</h2>
```js
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'
```

<h2>Inheritance</h2>
```js
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'

```

<h2>Encapsulation (private and protected)</h2>
Actually in JS real private and protected do not exist. We use the convention underscore _ to mark the property or method as private/protected
```js
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
```