Class 개념정리 (ft. 객체지향적 프로그래밍 OOP) - 1

class 에 대해서 다시 짚고 넘어갈 필요할 것 같아 다시 개념정리를 해본다.

이 class는 객체지향적 프로그래밍과 관련있으므로 이 OOP도 한번 정리해본다.

 

객체지향적 프로그래밍 (OOP / Object-Oriented Programming)

 

1. 캡슐화 Encapsulation

- 데이터와 그 데이터를 활용하는 함수를 한 캡슐, 컨테이너 안에 잘 정리하는 것을 의미한다.

   여기서 그 캡슐 역할을 하는 게 class이며, 위에서 가리키는 데이터는 속성이고 그 속성을 쓰는 함수가 메소드이다. 

- 또한 캡슐화를 통해 공개할 데이터와 숨길 데이터에 대한 구분이 가능해진다. (public,protected,private 사용)

  ( https://yjleekr.tistory.com/73 : 타입스크립트 공부할 때, 정리해둔 포스팅)

 

2. 상속 Inheritance

- 상속성을 이용해서 중복되지않게끔 코드를 작성할 수 있다. (extends, super 키워드)

- 이로 인해 코드를 더 작은 단위로 쪼갤 수 있고, 코드의 재사용성이 높아진다.

 

3. 추상화 Abstraction

- 구현 세부정보를 숨기는 일반 인터페이스를 지정하는 행위?

- 특정 메소드의 내부 작업을 수정한다고 할지라도 그 메소드를 사용하는 누구든 뭔가 바꿀 필요가 없다. 즉, 구현 세부내용이 바꼈더라도 인터페이스는 그대로 유지되기 때문이다..

 

4. 다형성 Polymorphism 

- 부모클래스를 상속해와서 메소드를 변형시킬순 있지만, 그 자체 메소드가 가진 타입이라던지, 어떻게 작동해야하는지는 규칙이 정해져있다. 

 

 

class 

객체를 찍어내는 함수와도 비슷하다. 어렵게 말하자면, 인스턴스를 생성하기 위한 생성자 함수이다.

 

클래스 몸체 내에서 정의할 수 있는 메서드 총 3가지 

 

1. constructor(생성자)

 - 인스턴스를 생성하고 초기화하기 위한 특수한 메서드

 - 프로퍼티가 추가되어 초기화된 인스턴스를 생성하려면, constructor 내부에서 this에 인스턴스 프로퍼티를 추가해준다.

 - 클래스 외부에서 인스턴스 프로퍼티를 만들어주려면, 매개변수를 선언하고 인스턴스 생성시 (new) 인자로 그 값을 전달한다.

 

2. 프로토타입 메소드 

- 클래스 몸체에서 정의한 메소드 / 인스턴스는 클래스의 프로토타입 메소드를 상속받아 사용할 수 있다.

- 해당 메소드를 사용하려면 new 연산자로 인스턴스를 생성한 후 그 인스턴스에서 호출해서 쓴다.

 

3. 정적 메소드 (static)

- 인스턴스를 생성하지 않아도 클래스 자체로 호출할 수 있는 메소드이다. (자바스크립트로 블럭 만들기 :https://yjleekr.tistory.com/71) 

- 정적 메소드가 바인딩된 클래스는 인스턴스의 프로토타입 체인 상에 존재하지 않는다. 즉, 인스턴스로 클래스의 메소드를 상속받을 수 없어서 인스턴스는 클래스의 정적 메소드를 호출하지 못한다.

class Person {
  // 생성자 메서드
  constructor(name) {
    // 인스턴스 생성 및 초기화
    this.name = name;
  }
  // 프로토타입 메서드
  sayHi() {
    console.log(`hi! this is ${this.name}`);
  }
  // 정적 메서드
  static sayMore() {
    console.log("so happy to meet u");
  }
}

// 인스턴스 생성
const me = new Person("yjlee");
console.log(me.name); // yjlee
// 프로토타입 메서드 호출 
me.sayHi(); // hi! this is yjlee
// 정적 메서드 호출
Person.sayMore(); // so happy to meet u

 

클래스를 하나의 완전히 다 만들어진 완전체로 만들기보다는 원하는 기능을 끼워맞춰서 재조립이 가능한 형태로 만드는 것이 중요하다!  아래의 간단한 케이스들로 이 말을 이해할수있다. 

 

case1.

아래처럼 클래스를 하나의 완전체로 만들어버리면 해당 클래스 사용 시 응용하거나 조절하는 것이 불가능하다. 

class Counter {
  constructor() {
    this.counter = 0;
  }

  increase() {
    this.counter++;
    if (this.counter % 5 === 0) {
      console.log(this.counter, "show per 5times");
    }
  }
}

const counter = new Counter();

counter.increase();
counter.increase();
counter.increase();
counter.increase();
counter.increase(); // 5 'show per 5times'

case2.

그래서 increase의 인자로 콜백함수를 전달하면 해당 클래스 사용자가 특정 메소드를 실행함에 있어서 컨트롤이 가능하다.

하지만 매번 해당 메소드를 호출할 때 해당 콜백함수를 인자로 넣어줘야하므로 불편하다. 

class Counter {
  constructor() {
    this.counter = 0;
  }

  increase(run5times) {
    this.counter++;
    if (this.counter % 5 === 0) {
      run5times(this.counter);
    }
  }
}

const counter = new Counter();
function printsth(num) {
  console.log("hi", num);
}
counter.increase(printsth);
counter.increase(printsth);
counter.increase(printsth);
counter.increase(printsth);
counter.increase(printsth); // hi 5

case3. 

따라서, 이를 개선하기 위해 constructor에서 콜백함수를 인자로 받는다.

이렇게 하면 아래 예시처럼 인스턴스 생성시에 콜백함수를 인자로 넣어주면 다양한 기능의 인스턴스 생성이 가능할 뿐만 아니라, 메소드 호출 시 일일이 콜백함수를 넣어주지 않아도 된다.

근데 여기서 만약, 인스턴스 생성 시에 인자로 콜백함수를 안 받는다면, 메서드 호출 시 에러가 난다. 이를 방지해주기 위해서 타입스크립트에선 constructor 인자를 optional하게 받으면 해결되지만, js에선 에러 방지를 위해 아래와 같이 && 연산자를 써줘야한다.

class Counter {
  constructor(runEvery5) {
    this.counter = 0;
    this.callBack = runEvery5;
  }

  increase() {
    this.counter++;
    if (this.counter % 5 === 0) {
      this.callBack(this.counter);
    }
  }
}

function printsth(num) {
  console.log("hi", num);
}

function alertSth(num) {
  alert("hi", num);
}

const printCounter = new Counter(printsth);
const alertCounter = new Counter(alertSth);

printCounter.increase();
printCounter.increase();
printCounter.increase();
printCounter.increase();
printCounter.increase(); // hi 5
alertCounter.increase();
alertCounter.increase();
alertCounter.increase();
alertCounter.increase();
alertCounter.increase(); // hi 5 알림창

 

클래스의 재사용성을 위해 하나의 클래스로 다양한 오브젝트를 생성, 서로 다른 기능을 하는 오브젝트를 만드는게 중요!