자바스크립트 심화(8) 추상 메서드

추상 메서드는 말 자체가 어렵다. 코딩에서 메서드는 'Do(행동)'이다. 추상적인 행동(?)은 무엇을 의미할까? 추상 메서드를 이해하려면 '추상'이란 의미부터 확실하게 숙지할 필요가 있다. 

사람은 누구나 알게 모르게 추상에 익숙하다. 가령, '냄새'를 생각해보자. 식당에서 밑반찬이 나왔는데, 비릿하면서 쉰 냄새가 난다. 세상에는 '비릿하고 쉰 냄새'를 갖고 있는 물질이 많다. 이는 주로 썩은 음식에서 맡을 수 있는 공통적인 냄새다. 비록 눈앞의 갈비탕이 시각적으로 맛있어 보이더라도 '비릿하고 쉰' 냄새가 난다면 먹지 않는 편이 좋다. 

비릿하고 쉰 냄새(공통점)	- 썩은 고기
	- 썩은 생선
	- 썩은 물
	- 식중독 음식
	- 동물 사체

사람은 사물이나 현상에서 공통적인 부분을 뽑아내 '추상'을 할 수 있다. 마치 피카소가 '선'만으로 소의 형태를 그려낸 것처럼, 추상은 공통적인 부분만 남기고 모두 제거하는 방식이다. 

미술처럼 코딩에서도 '추상'을 사용하는데, 반드시 있어야 할 공통점을 하위 클래스에 강요하는 방식으로 '추상화'를 진행한다. 

가령, '삼성전자'가 만든 가전제품에는 모두 'SAMSUNG'로고가 공통적으로 들어간다. 사람들은 브랜드 로고를 통해 특정 회사의 제품임을 쉽게 유추할 수 있다. 반대로 기업은 사람들이 유추할 수 있도록 브랜드를 만들어 '추상'을 시켜야 한다. 

이제 코딩으로 '추상'을 옮겨보자. '추상'은 공통점을 뽑아내는 것을 의미한다. 코딩에서 이를 실행하려면, 모든 상,하위 클래스에서 공통적인 부분이 있어야 한다. 그래서 상위 클래스에서는 강압적으로 특정 기능을 만들도록 지시한다. '공통적인 부분'을 억지로 만드는 셈이다.

1 『추상메서드 정의하기』

아래 코드를 살펴보자. 자바스크립트에서는 메서드에서 'throw new Error()'방식으로 하위 클래스에서 반드시 해당 메서드를 정의할 것을 요구할 수 있다.

---

  class Car{

   constructor(){

     this.brand = '현대'

   }

   toString(){

     throw new Error('You Have to implement the method Something ')//①추상메서드

    }

 }

  let car = new Car();

  console.log(car.brand); //>>현대

  class Sonata extends Car{ //②

       constructor(){

          super();

     }

}

   let sonata = new Sonata()

     console.log(sonata.brand);

 ③ console.log(sonata.toString()); //>>Uncaught Error:You have to implement the,,,

---

①에서 'throw new Error()'를 사용해서 toString()을 추상메서드로 만들어준다. ②에서 Sonata클래스는 Car클래스를 상속받았다. Car클래스에서 toString()을 추상메서드로 만들지 않았다면, Sonata클래스에서 toString()메서드를 실행시키면 에러가 뜨지 않는다. 위의 코드에는 추상메서드를 선언했기 때문에 ③에서 즉시 에러메시지가 나온다.

에러를 제거하려면, 아래와 같이 추상메서드로 지정된 메서드에 기능을 부여해야 한다.

---

class Sonata extends Car{

      constructor(){

         super();

    }

      toString(){

         return "G80";

     }

}

 

let sonata = new Sonata();

   console.log(sonata.toString()); //>> G80 

---

Sonata클래스에 toString()기능을 부여하면, 에러메시지가 없어지고, 코드가 정상적으로 작동한다.

 2 『상위클래스 메서드 호출하기』

자바스크립트에서는 상속받은 클래스의 'super()'를 이용해서 상위 클래스를 호출할 수 있다.

---

class Car{

     constructor(){

          this.brand = "현대";

   }

     getBrand(){

          return this.brand

   }

     display(){

          return '신모델'

   }

}

   let car = new Car();

   console.log(car.brand);

class Genesis extends Car{   ①

       constructor(){

             super();

      }

        toString(){

          let policy = super.display();  ②

             return "신차 발표"+policy;

     }

}

let genesis = new Genesis();

   console.log(genesis.toString()); //>>신차 발표신모델  ③

---

①에서 Genesis클래스는 Car클래스를 상속받는다. ②에서 super.메서드 방식으로 상위 클래스의 메서드 내용을 변수에 지정한다. 이렇게 super()뒤에 점을 찍는 방식으로 값을 상속받을 수 있다. ③//genesis변수에 상위 클래스의 메서드를 호출하면 내용이 그대로 도출된다. 

추상메서드에 대한 개념은 api를 직접 설계할 때 혹은 분석할 때 기본적으로 알고 있어야 한다.