Intro to Object Oriented JavaScript (ES6) 🔥

⚠️ Prerequisites

• Basic Understanding of functional JS
• JS Data Types: Primitive & Non-Primitive
• Creating POJOs (Plain Old JavaScript Objects)

✅ SWBAT(s)

• Explain the need of Object Orientation
• Drawbacks of conventional JS objects
• Writing your own class in JS

🤔 JS && Object Orientation?

🗄 Declaring Variables

  const numberOne = 10;
  const numberTwo = new Number(10);

  console.log(numberOne == numberTwo) // Output ????
  console.log(numberOne === numberTwo) // Output ????

😯 Different Ways of creating objects (Plain Old JS Objects)

  const mario = {
    first_name: 'Mario',
    last_name: 'Mario',
    introduce: function (){
      console.log(`Hey There! This is ${this.first_name} ${this.last_name}.`)
    }
  }

  const luigi = {
    first_name: 'Luigi',
    last_name: 'Mario',
    introduce: function() {
      console.log(`Hey There! This is ${this.first_name} ${this.last_name}.`)
    }
  }

  function createPerson(first_name, last_name){
    const personObject = {
      first_name: first_name,
      last_name: last_name,
      introduce: function(){
        console.log(`Hey There! This is ${this.first_name} ${this.last_name}.`)
      }
    }
    return personObject
  }

  const mario = createPerson('Mario','Mario')
  const luigi = createPerson('Luigi','Mario')

🤓 Creating a class

  // ES5
  function Person(first_name, last_name){
    this.first_name = first_name
    this.last_name = last_name
  }

  var mario = new Person('Mario','Mario')
  console.log(mario)

  // ES6
  class Person {
    constructor(first_name,last_name){
      this.first_name = first_name
      this.last_name = last_name
    }

    introduce(){
      console.log(`Hey There! This is ${this.first_name} ${this.last_name}.`)
    }
  }

  const luigi = new Person('Luigi','Mario')
  console.log(luigi)
  luigi.introduce()

🙌🏻 Exercise

Solve it here: link

  # Write a JS class that allows `Ash, Brock & Misty` to create a bank account.

  + An Account should have:
    + Full name of the owner
    + Balance
    + Type of the account (checking || savings)

  + It should have a method that logs the account information.

  ++ Bonus:
    + Implement methods to deposit and withdraw from the account.