Javascript 자바스크립트 코딩의 기술 8장 클래스로 인터페이스를 간결하게 유지하라 (1)

---

8장 클래스로 인터페이스를 간결하게 유지하라

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

우선 자바스크립트에서 클래스를 작성하는 방법을 살펴보자.

class Coupon {
  constructor(price, expiration) {
    this.price = price;
    this.expiration = expiration || "2주";
  }
}

const coupon = new Coupon();
coupon.price; // undefined
coupon["expiration"]; // 2주

• class : 클래스를 선언
• 클래스는 일반적인 JavaScript 함수일 뿐이며 클래스 구문을 사용하지 않고 완전히 복제 가능하여, 복잡한 객체를 보다 쉽게 선언하고 상속 할 수 있도록 한다!
• new : 새로운 인스턴스 생성
• 생성자 함수 constructor(price, expiration)에서는 여러 속성 정의 가능
  • 반드시 생성해야되는건 아니지만 속성을 선언해야 하므로 대부분 사용
  • this 문맥을 생성, 클래스에 속성(this.price, this.expiration) 추가 가능
  • 생성자에 인수 전달이 가능하므로 동적으로 속성 설정 할 수 있다.

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);
coupon.getPriceText(); // '$ 5'
coupon.getExpirationMessage(); // '이 쿠폰은 2주 뒤에 만료됩니다.'

• 14 line : Coupon 클래스의 인스턴스를 생성하며 금액은 5, 만료 기간은 기본값인 "2주"로 설정

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

• 클래스를 확장하고 부모 클래스의 메서드를 호출하는 방법을 살펴보자.
• 이전에 배운 Coupon 클래스를 extends(상속)해서 짧은 기간만 사용하는 FlashCoupon를 만들어보자.

import Coupon from "./extend";
class FlashCoupon extends Coupon {}

• FlashCoupon은 Coupon 클래스가 정의되어 있는 파일 extend.js에서 extends 키워드를 사용해 Coupon 클래스를 상속받는다.
• 이를 통해, Coupon의 기존 속성, 메서드 접근 가능하다.
• 새로운 속성, 메서드를 추가할 것이 아니라면, 상속할 이유가 없다.

import Coupon from "./extend";

class FlashCoupon extends Coupon {

  constructor(price, expiration) {
    super(price);
    this.expiration = expiration || "2시간";
  }
  
  isRewardsEligible(user) {
    super.isRewardsEligible(user) && this.price > 20;
  }
}

const flash = new FlashCoupon(10);

flash.price; // 10
flash.getExpirationMessage(); // '이 쿠폰은 2시간 뒤에 만료됩니다.'

 

• super : 부모 클래스의 생성자에 접근 가능
• super.isRewardsEligible()는 부모클래스에 메서드를 불러온다.
• 같은 이름의 메서드를 추가하고 부모 메서드를 부를때 super를 사용한다.
• getExpirationMessage 메서드 실행할때 FlashCoupon에 있는지 확인 후 없으면 부모클래스에서 찾는다.

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

• 자바스크립트는 프로토타입언어로, 새로운 인스턴스를 생성할때 메서드를 복제하지 않는다.
  (전통 적인 객체 지향 언어에서는 모든 속성, 메서드가 복사된다.)
• 객체 인스턴스에 있는 메서드를 호출하면 프로토타입에 있는 메서드를 호출한다.
• ES5이전 new키워드를 이용한 생성자 함수를 통해 살펴보자.

function Coupon(price, expiration) {
  this.price = price;
  this.expiration = expiration || "2주";
}
const coupon = new Coupon(5, "2개월");
coupon.price; // 5

• 함수를 생성자로 사용하고 this 문맥을 생성되는 인스턴스에 바인딩
• 이때 함수 이름 첫번째는 대문자!
• 여기서 메서드를 추가할 수도 있지만 프로토타입에 직접 추가하는 것이 훨씬 더 효율적이다.
• 인스턴스가 만들어질때마다 메서드를 추가해야되지만, 프로토타입에 추가하면 한번만 추가된다.

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

• class 키워드를 이용해서 객체를 생성할때도 프로토타입을 생성하고 문맥을 바인딩한다.
• 장점은 직관적인 인터페이스로 겉만 다르고 내용은 똑같다.
• 아래와 같이, class 를 사용하면서 프로토타입 생성자 함수를 상속받을 수 있다.

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

Reference

자바스크립트 코딩의 기술 요약 / 정리

쉽게 이해하는 자바스크립트 프로토타입 체인

쉽게 이해하는 자바스크립트 프로토타입 체인 : NHN Cloud Meetup

상속과 프로토타입 MDN

상속과 프로토타입 - JavaScript | MDN