강의 출처 : The Complete JavaScript Course 2022 Jonas (Udemy)

Encapsulation

Properties와 Methods를 보호하는 캡슐화
1. 클래스 밖의 코드 또는 클래스 내의 데이터가 실수로 조작되는 것을 막아준다.
2. 캡슐화를 통하여 조금의 interface만을 노출시킬 때 (a small API consisiting only of a few public methods) 개발자들이 좀 더 안전하게 다른 내부의 method들을 수정할 수 있다.

1)Public fields
2)Private fields
3)Public methods
4)Private methods
(there is also an static version) => static 앞에 붙히기

class Account {
  //1) Public fields (instances)-> instances 자체에 저장됌. not in prototype
  locale = navigator.language;

  //2) Private fields (instances)
  #movements = [];
  #pin;

  constructor(owner, currency, pin) {
    this.owner = owner;
    this.currency = currency;
    //Protected property
    this.#pin = pin;
    //this._movements = [];
    //this.locale = navigator.language;

    console.log(`Thanks for opening an account, ${owner}`);
  }

  //3) Public methods

  //Public interface
  getMovements() {
    return this.#movements;
  }

  deposit(val) {
    this.#movements.push(val);
    return this;
  }
  withdraw(val) {
    this.deposit(-val);
    return this;
  }

  requestLoan(val) {
    if (this.#approveLoan(val)) {
      this.deposit(val);
      console.log(`Loan approved`);
    }
    return this;
  }
  //4) Private methods
  //_approveLoan(val){
  #approveLoan(val) {
    return true;
  }
}

const acc1 = new Account('Jonas', 'EUR', 1111);
console.log(acc1);
//Account {owner: 'Jonas', currency: 'EUR', pin: 1111, movements: Array(0), locale: 'ko-KR'}

// 일일히 movements 내 item 추가하는 것보다 이를 처리할 수 있는 method를 만들어주는 것이 좋다!
// acc1.movements.push(250);
// acc1.movements.push(-140);
acc1.deposit(250);
acc1.withdraw(140);
acc1.requestLoan(1000);
console.log(acc1.getMovements()); //private 한 정보 접근하는 법 => 해당 item들을 return 해주는 method 만들기 [250, -140, 1000]

// this._movements

// console.log(acc1.#movements);error => private field 접근 불가
// console.log(acc1.#pin); => error
// console.log(acc1.#approveLoan(100)); ==> error

Chaining Methods

각각의 함수에 return this 를 적어줌으로써 class 자체를 return하하게 되면 chaining 이 가능해진다.

acc1.deposit(300).deposit(500).withdraw(35).requestLoan(25000).withdraw(4000);
//
console.log(acc1.getMovements());
// [250, -140, 1000, 300, 500, -35, 25000, -4000]

ES6 Summary

• Classes are just "Syntactic Sugar" over constructor functions
• Classes are not hoisted
• Classes are first-class citizens
• Class is always executed in strict mode.