자바스크립트 코딩의 기술_클래스로 인터페이스를 간결하게 유지하라_2

(본 포스팅은 길벗의 '자바스크립트-코딩의 기술' 책을 공부하면서 작성되었습니다_내돈내산)

 

2021.06.27 - [자바스크립트] - 자바스크립트 코딩의 기술_클래스로 인터페이스를 간결하게 유지하라_1

자바스크립트 코딩의 기술_클래스로 인터페이스를 간결하게 유지하라_1

3. 클래스로 기존의 프로토타입을 확장하라.

• 기존 객채지향언어에서는 클래스를 통해 객체를 생성하면 클래스의 모든 속성과 메서드가 복제된다. 하지만 자바스크립트에서는 메서드를 복제하는게 아닌 프로토타입에 대한 연결을 생성한다. (객체의 인스턴스에 있는 메서드를 호출하면 프로토타입에 저장된 메서드를 호출하게 된다.)
• 자바스크립트에서  class는 프로토타입을 사용하기 위한 속기법이다. 이는 기존의 코드베이스와 클래스 문법이 통합 가능함을 의미한다.

// 생성자 함수를 이용한 클래스 작성- 기존 클래스에 있던 conturctor 메서드를 꺼내 독립적으로 작동하게 함.
function Coupon(price, expiration) {
  this.price = price;
  this.expiration = expiration || '2주';
}
const coupon = new Coupon(5, '2개월');
coupon.price; // 5

• 자바스크립트에서는 생성자 함수를 이용해 객체인스턴스를 만들수 있다. coding convention으로 함수명을 대문자로 시작하며, 함수내부에서 this 키워드를 사용해 속성을 연결할 수 있다.
• new 키워드로 새로운 인스턴스를 생성할 때, 생성자를 실행하고 this 문맥을 바인딩하지만 메서드를 복제하지는 않는다. 
• 프로토타입은 생성자 함수의 기반이 되는 개체이며, 모든 객체 인스턴스는 프로토타입에서 속성을 가져온다. 게다가 새로운 인스턴스도 프로토타입에 있는 메서드를 사용할 수 있다.

// prototype 에 메서드 추가하기.
Coupon.prototype.getExpirationMessage = function () {
  return `이 쿠폰은 ${this.expiration} 후에 만료됩니다.` 
};
coupon.getExpirationMessage(); // 이 쿠폰은 2개월 후에 만료됩니다.

• 프로토타입에 메서드를 추가하기 위해서 위와같이 작성할 수 있다.
• 작동하는 Coupon 인스턴스가 이미 있지만, 인스턴스의 프로토타입을 다루고 있기 때문에 새로운 인스턴스를 생성한 후에도 추가한 메서드에 접근이 가능하다.
• class 키워드를 이용해서 객체를 생성할 때도 여전히 프로토타입을 생성하고 문맥을 바인딩한다. 단지  class 키워드를 이용하면 더욱 직관적인 인터페이스를 사용할수 있다.
• 생성자 함수와 프로토타입을 사용해 작성한 코드는 클래스와 동일하다. 겉으로는 다르게 보이지만, 내부적으로는 단지 프로토타입을 생성한 것일 뿐이다.

class FlashCoupon extends Coupon {
  constructor(price, expiration) {
    super(price);
    this.expiration = expiration || '2시간';
  }
  getExpirationMessage() {
    return `이 쿠폰은 깜짝 쿠폰이며 ${this.expiration} 후에 만료됩니다.`;
  }
};

• 위의 과정들을 class 문법을 이용해 나타낸것이다. 단지 위의 생성자를 이용한 객체에서 메서드를 확장하고싶은 경우 prototype을 명시해 class의 prototype을 확장하도록 해주어야 하는 점이 다른점이다.

---

4. get과 set으로 인터페이스를 단순하게 만들어라.

• get과 set을 사용하면 단순한 인터페이스 후반에 로직을 숨길 수 있다.
• public과 private 기능이 없는 자바스크립트의 클래스에서는 점표기법을 이용해 객체의 인스턴스값을 변경할 수 있다. 이는 클래스의 작동에 의도치않은 버그를 가져올 수 있게 된다. 이러한 부분에 대해 한가지 해결책으로 게터와 세터를 이용해 로직을 추가하고 속성을 뒤로 숨기는 것이다. 이때 getter 또는 setter는 함수를 속성처럼 보이게 해서 복잡성을 숨길수 있다.

// getter 설정
class Coupon {
  constuctor(price, expiration) {
    this.price = price;
    this.expiration = expiration || '2주';
  }
  get priceText(){
    return `$ ${this.price}`;
  }
  get expirationMessage() {
    return `이 쿠폰은 ${this.expiration} 후에 만료됩니다.`;
  }
}
const coupon = new Coupon(5);
coupon.price = 10;
coupon.priceText; // '$10'
coupon.messageText; // '이 쿠폰은 2주 후에 만료됩니다.'

• 위는 메서드를 getter로 바꾼것이다. get 키워드 이외에는 바뀐것이 없다. 점 표기법으로 메서드를 호출할 수 있으며, 이경우에는 괄호를 쓰지 않는다. 
• 정보를 가져오긴 쉬워지지만, 누군가 값을 설정하는것을 막을 수 없다. 이를위해서는 setter도 설정해야 한다.

// setter 설정
class Coupon{
  constructor(price, expiration) {
    this.price = price;
    this.expiration = expiration || '2주';
  }
  
  set halfPrice(price){
    this.price = price / 2;
  }
}
const coupon = new Coupon(5);
coupon.price; // 5
coupon.halfPrice = 20;
coupon.price; // 10
coupon.galfPrice; // undefined

• setter도 getter와같이 점표기법으로 가져와 괄효가 없이 작동한다. 메서드를 속성처럼 보이게 해서 메서드를 줌겨준다.
• setter의 경우 인수를 하나만 받고, 정보를 노출하는것이 아니라 속성을 변경한다. setter에 인수를 전달할때는 괄호를 사용하지 않고 대신 객체에 값을 설정하는 것 처럼 등호를 사용해 값을 전달한다.
• setter에 대응되는 getter가 없으면 문제가 발생할수 있다. getter와 setter는 항상 짝을 맞춰서 만드는것이 좋으며, 실제로 같은이름을 가져야 한다. 다만 getter나 setter의 이름과 같은 이름을 가진 속성은 둘 수 없다.

// getter와 setter 사용 예시
class Coupon {
  constructor(price, expiration) {
    this._price = price;
    this.expiration = expiration || '2주';
  }
  get priceText() {
    return `$${this._price}`;
  }
  get price() {
    return this._price;
  }
  set price(price) {
    const newPrice = price.toString().replace(/[^\d]/g, '');
    this._price = parseInt(newPrice,10);
  }
  get expirationMessage() {
    return `이 쿠폰은 ${this.expiration} 후에 만료됩니다.`;
  }
}
const coupon = new Coupon(5);
coupon.price ; // 5  (getter)
coupon.price = '$10';  // (setter) 속성값 변경
coupon.price; // 10   (getter)
coupon.priceText; // $10 (getter)
export default Coupon;