<script>
    const airasia = {
      airline: 'Airasia',
      iataCode: 'DX',
      bookings: [],
      //book: function(){}
      //New Syntax As Below
      book(flightNum, name){
        console.log(`${name} booked a seat on ${this.airline} flight ${this.iataCode}${flightNum}`);
      },
    };

    airasia.book(2678, 'ChaoJD');

    const masAirline = {
      airline: 'Malaysia Airline',
      iataCode: 'BH',
      bookings: []

    };
    //Direct take airasia.book(function) into here
    const book = airasia.book;
    //Wrong Example
    book(23, 'Not ChaoJD'); // .this point to undefined because its just a function without master
    //USE .call
    book.call(masAirline, 209, 'ChaoChao');
    //apply Method *takes an array
    const flightData = [502, 'Anna Bong'];
    book.apply(masAirline, flightData);
    //Better  Way Using Spread Operator
    book.call(masAirline, ...flightData);
    //Bind Method
    // book.call(masAirline, 789, 'WeyiChai')

    const bookEw = book.bind(masAirline, 778);
    bookEw('Jasmine Chai');
    masAirline.plane = 200;
    masAirline.buyPlane = function(){
      this.plane++;
      console.log(this.plane);
    };
    masAirline.buyPlane();
    document.body.append(document.createElement('button'));
    document.querySelector('button').addEventListener('click', masAirline.buyPlane.bind(masAirline));
    //Partial application(preset parameter)
    const addTax  = (rate, value) => value + value * rate;
    console.log(addTax(0.1, 200));

    const addVat = addTax.bind(null, 0.23);
    // addVat = value => value + value * 0.23;
    console.log(addVat(800));

    //using function returning function
    const taxF = function(rate){
      return function(value){
        console.log(value + value * rate);
      };
    };
    const taxAll = taxF(0.23);
    taxAll(300); //Same Function to the partial app but more complicated
    </script>