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

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

 

1. 읽기쉬운 클래스를 만들어라.

• 자바스크립트의 클래스는 기본적으로 다른언어와 다른 개념을 사용하고 있다. 프로토타입기반의 언어임은 변함이 없으나 기존의 객체지향 프로그래밍의 일반적인 문법을 사용할수 있도록 ES6부터 채용하고 있다.
• 자바스크립트에서 클래스를 선언할때는 class 키워드를 사용하며, 새로운 인스턴스를 생성할 때는 new 키워드를 사용한다.

class Coupon {
}
const coupon = new Coupon();

• 클래스의 인스턴스를 생성할 때는 가장 먼저 생성자 함수를 실행하며, 생성자 함수에서는 여러가지 속성을 정의할 수 있다. 생성자 함수를 반드시 선언해야하는것은 아니지만, 클래스의 속성을 선언하는 곳이므로 대부분의 경우에는 생성자 함수를 사용하게 될 것이다.
• 클래스를 선언한 후의 다음단계는 생성자 메서드를 생성하는 것이다. constructor( ) 라고 불리며, construnctor( )를 클래스에 추가할 때는 함수를 작성하는 문법과 비슷하지만 function 키워드 없이 작성한다. 생성자는 함수이므로 자유롭게 인수를 전달할 수 있다.
• 생성자의 역할 중 하나는 this 문맥을 생성하는 것이다. 생성자의 내부에서 객체에 키-값 쌍을 추가하는 것처럼 this에 할당하는 방법으로 클래스에 속성을 추가할 수 있다.

class Coupon {
  constructor(price, expiration) {
    this.price = price;
    this.expiration = expiration = expiration || '2주';
  }
}
const coupon = new Coupon(5);
coupon.price; // 5
coupon['expiration']; // '2주'

• 속성을 public 또는 private으로 선언하지 않는다. 현재 모든속성을 공개속성으로 선언하고 있으며, 추후 기능이 추가 될 수도 있다.
• 다음단계는 간단한 메서드를 추가해보자. 생성자와 동일한 문법으로 클래스에 메서드를 추가할 수 있다. 메서드는 화살표함수가 아닌 보통함수로 작성하게 된다. (클래스에서 화살표 함수를 사용하면 보통함수와 다르게 작동함)
• 클래스메서드를 클래스의 인스턴스에서 호출하면 this 문맥에 완전하게 접근할 수 있다. 

class Coupon {
  constructor(price, expiration) {
    this.price = price;
    this.expiration = expiration || '2주';
  }
  
  getPriceText() {
    return `$ ${this.price}`;
  }
  getExpirationMessage() {
    return `이 쿠폰은 ${this.expiration}후에 만료됩니다.`;
  }
}
const coupon = new Coupon(5);
conpon.getPriceText(); // $5
coupon.getExpirationMessage(); // '이 쿠폰은 2주 뒤에 만료됩니다.'

---

2. 상속으로 메서드를 공유하라.

import Coupon from './extend'
class FlashCoupon extends Coupon {
}
const flasg = new FlashCoupon(10);
flash.price; // 10
flash.getPriceText(); // "$ 10"

• 상속을 위해서 extends 키워드를 이용한다.
• 위 코드에서 보면 새로운 FlashCoupon 클래스는 기존의 속성과 메서드를 모두 상속받았다. 예를 들어 price 속성과 getPriceText( ) 메서드에도 접근이 가능하다.

import Coupon from './extend'
class FlashCoupon extends Coupon {
  constructor(price, expiration) {
    super(price);
    this.expiration = expiration || '2시간';
  }
}
const flash = new FlashCoupon(10);
flash.price; // 10
flash.getExpirationMessage(); // '이 쿠폰시간은 2시간 후에 만료됩니다'

• 물론 새로운 속성이나 메서드를 추가할 것이 아니라면 상속에는 아무 의미도 없다. 이 쿠폰을 다르게 만들려면 유효기간 기본값을 새로 추가해야한다. 
• 유효기간을 새로 추가하기 위해서 부모클래스와 마찬가지와 price와 expiration을 받는 생성자 함수를 추가하고, 새로운 생성자에서 부모클래스의 생성자에 접근하려면 super( ) 를 호출한다.(super( ) 는 부모클래스의 생성자를 호출하기 때문에 부모클래스의 생성자에 필요한 인수가 있다면 super( )를 이용해서 넘겨줄수 있다)
• 위 예제를 보면 부모 클래스에 있는 getExpirationMessage( ) 메서드를 사용하지만 expiration 속성은 자식 클래스에 있는 것을 사용하는 것을 확인할 수 있다.

class Coupon {
  constructor(price, expiration){
   this.price = price;
   this.expiration = expiration || '2주';
  }
  getPriceText() {
    return `$ ${this.price}`;
  }
  getExpirationMessage(){
    return `이 쿠폰은 ${this.expiration} 후에 만료됩니다`;
  }
  isRewardsEligibel(user){
    return user.rewardsEligible && user.active;
  }
  getReward(user){
    if (this.isRewardsEligible(user)){
      this.price = this.price * 0.9;
    }
  }
}
export default Coupon;

• 마지막으로 부모메서드를 호출하는 메서드를 작성한다. 
• 일단 부모클래스인 Coupon 클래스에 두개의 메서드 getRewards( )와 isRewardsEligible( ) 을 추가한다. getRewards( ) 는 사용자 정보를 받고 isRewardsEligible( )을 호출해 사용자가 추가 할인을 받을 수 있는지 확인한다.
• 주의할점은 부모클래스에 추가하는 모든 메서드를 자식클래스가 상속받는다는 것이다. 이는 자식클래스에서 필요하지 않은 메서드를 부모클래스에 추가하면 자식클래스가 비대해진다는 것이다.

import Coupon from './extend';
class FlashCoupon extends Coupon {
  constructor(price, expiration){
    super(price);
    this.expiration = expiration || '2시간';
  }
  getExpirationMessage() {
    return `이 쿠폰은 깜짝쿠폰이며 ${this.expiration} 후에 만료됩니다.`;  
  }
  isRewardsEligible(user) {
    return super.isRewardsEligible(user) && this.price>20;
  }
  getRewards(user) {
    if (this.isRewardsEligible(user)) {
      this.price = this.price * 0.8;
    }
  }
}
export { flashCoupon };

• 최근접속한 사용자(user.active)이면서 보상을 받을 자격이 있는 경우(user.rewardsEligible)에 구매한 상품의 가격이 20달러이상일때만 사용할 수 있는 쿠폰을 발급하려고 한다.
• 조건을 추가하기 위해 FlashCoupon 클래스에 같은 이름의 메서드를 추가한다. 그리고 isRewardsEligible( ) 메서드에서 super를 이용해 부모클래스의 메서드를 호출한다. 생성자에서는 super( )를 호출할 때 특정한 메서드를 호출할 필요가 없었지만, 부모클래스의 다른 메서드를 호출할려고 할때는 동일한 명칭의 메서드 내부에서 호출할 때도 꼭 해당 메서드를 명시해야 한다.
• 그 결과 FlashCoupon 클래스는 다음 예제 코드처럼 Coupon 클래스의 몇가지 속성과 메서드를 상속하고 일부는 새롭게 대체하는 결과를 가져왔다.