[혼공JS] 클래스 chapter 9

추상화

프로그램에 필요한 요소만 사용해서 객체를 표현하는 것을 추상화라고 함

같은 형태의 객체 만들기

학생들의 이름 및 성적을 배열로 만들고 반복문 출력을 통해 평균과 총합을 구함

 

 

객체를 처리하는 함수

직접 출력부분에 넣어서 처리하기보단 함수로 처리하면 더 쉽게 유지보수 가능하며 필요한 부분에서 다시 가져다 쓸 수 있다

객체의 기능을 메소드에 추가하기 

객체가 하나일때는 그냥 함수를 따로따로 만들어서 사용해도 좋지만 객체가 늘어날 수록 함수 이름이 충돌할 수 있습니다.

따라서 객체내부에 메소드를 사용하여 사용하기 편하게 만듭니다.

추가로 객체를 찍어 낼수 있는 함수도 만들었습니다.

 

이렇게 객체를 함수로 만들게되면 

-오탈자의 위험이 줄어들고

-코드 입력이 줄어들고

마지막으로 속성과 메소드를 하나의 함수로 관리하여 유지보수하기 쉽습니다.

 

그러나 이렇게 함수로 만들어지는 객체의 경우 객체별로 getSum(),getAverage()같은 메소드를 생성하여 기본자료형보다 무겁습니다.

클래스?

클래스는 이러한 객체를 좀 더 효율적으로 만들기 위해 만들어진 문법입니다.

즉 클래스는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 틀로,

객체를 정의하기 위한 상태(멤버 변수)와 메서드(함수)로 구성된다.

클래스 선언하기

class 클래스 이름 {   // 클래스 생성

}

new 클래스 이름() // 인스턴스를 생성할떄 == 객체를 생성할때

 

 

생성자

생성자는 클래스를 기반으로 인스턴스를 생성할 때 처음으로 호출되는 메소드입니다.

따라서 생성자에서 객체의 초기화 처리를 합니다.

 

메소드

클래스 내부 함수 == 메소드

 

클래스의 고급 기능

상속

사각형의 둘레와 넓이를 구하는 클래스를 정사각형,직사각형으로 나눠서 사용해도 좋지만

사각형 클래스의 메소드를 상속하여 클래스 선언부분을 좀더 깔끔하게 관리할 수 있습니다.

상속은 이름처럼 어떤 클래스가 가진 유산(속성과 메소드)을 다른 클래스에게 물려주는 형태이며

유산을 주는 클래스를 "부모 클래스" 받는 클래스를 "자식클래스" 라고 합니다.

 

이 상속을 제대로 공부해야 나중에 나올 React와 Express같은 웹프레임워크를 공부하기 편합니다.

 

private속성과 메소드

사용자가 클래스 속성 또는 메소드를 잘못된 방향으로 사용하는 것을 막는 방법으로 private 속성과 메소드입니다.

사용방법 : 클래스, 메소드 앞에 #을 붙이면 끝

private 속성을 지정하면서 외부 접근이 차단되었기 때문에 보다싶이 결과에 영향을 못줍니다. 

직접적으로 사용하려고하면

private 속성이라 클래스 내부에서 선언해야한다고  오류가 나옵니다.

 

게터와 세터

게터와 세터는 private 속성을 읽고 쓸수 있게 만들어주는 메소드 입니다.

get length() , get preimeter() ,get area() 를 이용하여 함수를 호출하는게 아닌 속성을 사용하는 형태처럼 사용이 가능해집니다.

 

static  속성과 메소드

디자인 패턴 : 개발자들이 더 효율적으로 프레임워크를 개발할 수 있게 만드는 다양한 패턴

여러 디자인 패턴을 사용하기 위해 문법적으로 추가된  static 속성과 메소드

static 속성 & 메소드 : 인스턴스를 만들지 않고 사용할 수 있는 속성과 메소드

<script>
      class Square {
        #length
        static #conuter = 0
        static get counter () {
          return Square.#conuter
        }
        constructor (length) {
          this.length = length
          Square.#conuter += 1
        }

        static perimeterOf (length) {
          return length * 4
        }
        static areaOf (length) {
          return length * length
        }
        
        get length () { return this.#length }
        get perimeter () { return this.#length * 4 }
        get area () { return this.#length * this.#length }

        set length (length) {
          if (length < 10) {
            throw '길이는 0보다 커야 합니다.'
          }
          this.#length = length
        }
      }
      // static 속성 사용하기
      const squareA = new Square(10)
      const squareB = new Square(20)
      const squareC = new Square(30)
      console.log(`지금까지 생성된 Square 인스턴스는 ${Square.counter}개입니다.`)
      // static 메소드 사용하기
      console.log(`한 변의 길이가 20인 정사각형의 둘레는 ${Square.perimeterOf(20)}입니다.`)
      console.log(`한 변의 길이가 30인 정사각형의 둘레는 ${Square.areaOf(30)}입니다.`)
    </script>

 

클래스가 생성되면서 생성자에서 정정속성 couter를 +1 합니다. -> 3개 인스턴트

인스턴트 선언 (new~~~)를 사용하지 않고 사용가능  Square.perimeterOf(20) -->80

 

결론

외부함수가 아닌 클래스를 사용하여 변수와 함수를 작성하면 어떤 속성과 함수가 클래스 내부에 있는지 명시적으로 나타낼수 있다.

게터와 세터로 더 안전하게 변수와 함수를 사용할 수 있다.

 

---

오버라이드

오버라이드 : 부모가 가지고 있는 메소드와 같은 이름으로 메소드를 선언해서 덮어쓰는것을 의미한다 

즉 상속받은 메소드의 내용물만 재정의하는것이다.

예시

본래 toString(자바스크립트 객체 메소드) 이라는 메소드는 존재하여 객체를 문자열로 반환해주지만

이를 클래스에서 상속받아 내용물을 변경하여 사용하는 예제이다.

인스턴스를 호출하면 오버라이드된 메소드가 호출되는걸 확인할 수 있다.