어제에 이어 참조타입의 자료형인 Class에 대해서 정리해 보려고 한다.

---

Class

클래스는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 틀로, 객체를 정의하기 위한 멤버 변수(field)와 함수(method)로 구성된다.

클래스 선언(Declaration)

<script>
  class className {
    constructor() { field }
    method1() { ... }
    method2() { ... }
    method3() { ... }
  ...
</script>
}

위와 같이 정의 후 클래스를 이용하려 객체를 생성할 때 new 키워드와 함께 className()으로 호출하면 해당 클래스의 멤버 변수와 함수가 들어가 있는 객체가 만들어 진다. 각 객체의 멤버 변수와 함수는 프로토타입 객체로 호출 된다. 프로토타입 객체 설명>

<script>

  class book {
    constructor(title, price) {   // title과 price를 key값으로 field 생성
      this.title = title;
      this.price = price;
    }
    stock() {    // 객체에 포함된 method
      alert(`${this.title}: 5`)
    }
  }
  
  const book1 = new book('Big Picture','12,000');  // book1 객체 생성
  
  console.log(book1);  // book1의 field값인 {title:'Big Picture', price: '12,000'} 출력
  book1.stock();  // book1의 stock함수 호출하여 'Big Picture: 5' alert 출력 
  
</script>

접근자 속성(Accessor property)

객체 기반 프로그래밍에서는 객체 데이터의 접근을 막는다. 외부에서 데이터에 접근하여 데이터의 무결성이 깨질 것을 우려하기 때문이다. 데이터의 무결성이 깨졌다는 것은 예를 들어 객체가 '몸무게' 데이터를 가지고 있다고 했을 때 외부에서 데이터를 '-1'과 같이 몸무게로 적합하지 않은 데이터를 넣었을 때를 말한다. 그래서 외부에서 데이터에 접근하려고 할 때 메소드를 통해서 데이터에 접근하도록 유도하는 것이다. 이 것을 접근자 속성이라고 한다.

:: getter

외부에서 객체의 필드값을 읽을 수 있도록 가공한 후 외부로 전달해 주는 메소드이다.

<script>
  get age() {
    return this._age;  // age 값을 _age 값으로 가공
  }
</script>

:: setter

외부에서 데이터를 변경하고자 할 때 그 값이 유효한 값인지 검증해 주는 메소드이다.

<script>
  set age(value) {
    this._age = value < 0 ? 0 : value  
    // age의 값이 0보다 작을 경우 0으로 아닐 경우 변경한 데이터 값으로 저장
  }
</script>

접근제어자 (Access Modifier)

클래스나 필드, 메소드 등에 대해 어떤 범위에서 접근을 허가할지 지정하는 것으로, 객체가 가진 고유의 멤버 변수값들이 외부에서 유효하지 않은 값으로 변경할 가능성을 막기 위함이다. 제어자에는 내,외부에서 데이터를 읽고 변경하는 것이 가능한 public 제어자와 자기 자신의 클래스 내에서만 데이터의 접근이 가능한private 제어자가 있다.

<script>

  class Sample {     
    publicField = 100;
    #privateField = 500; // '#'키워드로 private 제어자 지정
  }
  
  const test = new Sample();
  console.log(test.publicField);   // 100출력
  console.log(test.privateField);   // undefined 출력
  
  </script>

정적 필드와 메소드(Static Field & Method)

클래스의 인스턴스(클래스를 객체화 시키는 것)가 없더라도 접근 할 수 있는 필드와 메소드를 말한다. 어디서든 접근이 가능하기 때문에 전역적으로 접근해야 하는 필드와 메소드에 주로 사용 된다. 필드와 메소드 앞에 static 키워드를 사용하여 선언할 수 있고 호출 시에도 클래스로 호출이 가능하다. 인스턴스에 상관없이 출력될 수 있기 때문에 정적 필드,메소드로 선언되었을 경우 사용하여 메모리를 줄여줄 수 있다.

<script>

  class Book {  
    static publisher = 'smy';   // 정적 필드로 선언
    
    constructor(bookNumber) {
      this.bookNumber = bookNumber
    }

    static printPublisher() {  // 정적 메소드로 선언
      console.log(Book.publisher);
    }
  } 

    const book1 = new Book(123);
    
    console.log(book1.bookNumber);  // 123 출력
    console.log(book1.publisher);  // undefined 출력 
    console.log(Book.publisher);  // smy 출력  
    Book.printPublisher();   // smy 출력   
    
</script>

클래스 상속 (Class Inheritance)

하나의 클래스의 필드와 메소드를 확장하여 다른 클래스를 만들어 부모 클래스(Super class)와 자식 클래스(Sub class)의 관계를 만들 수 있다.

:: 확장(extends)

클래스는 class Child extends Parent 방식으로 확장한다.

<script>

  class Shape {   
    constructor(width, height, color) {
            this.width = width;
            this.height = height;
            this.color = color;
    }

    draw() {
      console.log(`drawing color: ${this.color}`);
    }
  }  // 부모 클래스 선언

  class Rectangle extends Shape {} // 자식 클래스 선언

  const rectangle = new Rectangle(20, 20, 'blue'); // 자식 클래스의 객체 생성 
  
  console.log(rectangle.width);  // 20 출력
  rectangle.draw();  // drawing color: blue 출력

</script>

:: 재정의(Overriding)

부모 클래스의 필드와 메소드를 상속을 할 때 그대로 사용 할 수 없이 변경해야 할 경우 자식 클래스에서 이를 재정의 할 수 있다.

<script>

  class Shape {  
    constructor(width, height) {
        this.width = width;
        this.height = height;
    }
    
    getArea() {
      return this.width * this.height;
    }
  }  

  class Rectangle extends Shape {} 

  class Triangle extends Shape {
    getArea() {
      return (this.width * this.height) / 2; 
    }  // Shape의 넓이값을 반환하는 메소드 재정의
  } 

  const rectangle = new Rectangle(20, 20);
  const triangle = new Triangle(20, 20); 
  
  console.log(rectangle.getArea()); // 400 출력
  console.log(triangle.getArea());  // 200 출력

</script>

:: 부모 클래스 호출(super)

자식 클래스를 만들 때 부모 클래스의 전체가 아닌 일부를 활용하여 수정 사용하고자 할 때 자식 클래스에 부모 클래스를 호출하는 super 키워드를 사용한다. super.()로 부모클래스의 생성자를 호출 할 수 있고 super.메소드명으로 메소드를 호출하여 해당하는 값을 반환(return)하는 것이다.

<script>

  class Parent {    
    constructor(name, height, age) {
        this.name = name;
        this.height = height;
        this.age = age;
    }
    
    add() {
      return this.height + this.age
    }
  }  
  
  class Child extends Parent {
    constructor(name, height, age, weight) {
      super(name, height, age);
      this.weight = weight;
    }  // name, height, age은 부모클래스에서 호출하고 weight 필드만 수정
    
    add() {
      return super.add() + this.weight;
    }  // 부모클래스의 weight+age을 반환해 weight 값을 더하는 메소드로 수정
  } 

  const child = new Child('smy', 100, 20, 30);
  const parent = new Parent('par', 1, 3);

  console.log(parent.add());  // 4 출력
  console.log(child.add());  // 150 출력

</script>