[ TypeScript ]- 객체지향 프로그래밍, 클래스와 오브젝트 관계

🟣 타입스크립트에서는 객체지향 프로그래밍의 클래스를 정의 하고 사용할 수 있다.

Object Oriented Programming

어플리케이션을 실제 세상에 존재하는 객체와 같은 단위로 쪼개고 객체들이 서로 상호 작용함으로써 시스템이 동작되는것을
객체지향 프로그래밍 이라고 한다.

연관된 변수와 함수들을 한 덩어리로 묶어서 구조화하여 표현하는 프로그래밍 스타일을 말한다.
(즉, 실제 삶으르 둘러싸고 있는 사물 객체의 개념을 코드에 대입시켜 덩어리 덩어리로 묶어서 코드를 작성 한다고 생각하면 이해하기 쉬울 수 있다. )

객체지향 프로그래밍에서 Class 란 ?

객체지향 프로그래밍에서 클래스와 객체는 땔래야 땔수 없는 관계이다.
객체는 클래스를 통해 만들질 수 있고, 클래스 는 객체가 어떤 모습을 가질지를 정의 하고 묘사하는 객체의 뼈대 즉, 객체를 만들어 내는 설계도 생산 틀이라고 생각 하면 된다.

예시

위 코드를 보면 직원에 대한 정보를 담을 수 있는 변수들 과 직원의 정보를 콘솔에 출력하는 함수 가 있다

이렇게 직원에 관련된 변수들과 함수를 하나로 묶어서 직원 employee 라는 class 를 만드는 방법은

class 키워드를 넣고 대문자로 시작하는 이름을 만들어 준다.
그리고 { } 중괄호를 넣어준다.
중괄호 안에 만들어 놓은 변수들과 함수를 복사해서 클래스 안에 넣어준다.

클래스 내에서는 const 나 let 등의 키워드가 필요 하지 않다.
그리고 함수내에 매개변수도 필요 하지 않다.
매개변수를 따로 적어주지 않아도 되는 이유는 클래스 내에서 정의된 변수들에 this 키워드를 주어 바로 접근이 가능하기 때문이다.

따라서 함수 내 콘솔로그 괄호 속에 변수들 앞에 this 키워드를 그냥 넣어주기만 하면 된다.

class Employee {
  fullName: string;
  age: number;
  jobTitle: string;
  hourlyRate: number;
  workingHoursPerWeek: number;

  printEmployeeDetails = (): void => {
    console.log(
      `${this.fullName}의 직업은 ${this.jobTitle}이고 일주일의 수입은 ${
        this.hourlyRate * this.workingHoursPerWeek
      }달러이다.`
    );
  };
}

클래스 속에서 정의된 함수들은 클래스 내 정의된 변수들에게 바로 접근이 가능 하기때문에, 결과적으로 그렇지 않은 함수들 보다 적은 매개변수를 가지게 되는 장점이 있다. 매개변수가 적을수록 더욱더 쉽게 함수를 사용 할 수 있고, 쉬운 유지보수가 가능하기 때문에 더욱더 깨끗한 코드를 쓸 수 있다.

❕ 객체지향 프로그래밍에서 클래스 내에 정의된 변수들을 property 라고 하고 클래스 내에 정의된 함수들을 Method 라고 부른다.

클래스 인스턴스

위에서 언급했듯이 객체지향 프로그래밍에서 클래스는 객체를 만들어 내기 위한 설계도 생산 틀 이라고 표현 된다.

클래스를 통해서 객체를 생성할 때 클래스의 새로운 인스턴스 를 만든다는 용어를 사용 한다.

class Employee {
  fullName: string;
  age: number;
  jobTitle: string;
  hourlyRate: number;
  workingHoursPerWeek: number;

  printEmployeeDetails = (): void => {
    console.log(
      `${this.fullName}의 직업은 ${this.jobTitle}이고 일주일의 수입은 ${
        this.hourlyRate * this.workingHoursPerWeek
      }달러이다.`
    );
  };
}

let employee1 = new Employee();
employee1.printEmployeeDetails();

클래스의 인스턴스 즉 객체를 만들기 위해 선언된 클래스 아래 내 키워드를 넣어준다.

만들어질 객체 이름을 employee1 이라고 지어준다.
그리고 = equal 사인을 넣고 new 연산자를 넣어 주고, 클래스의 이름인 Employee 그리고 괄호를 넣어준다.
코드가 실행 되면 employee 클래스를 바탕으로 employee1 이라는 객체가 생성 되는데 코드 에디터에서 객체 이름을 넣고 .점을 찍고 p 를 입력 하면
클래스 네임 메소드인 printEmployeeDetails 가 나타난다.
즉 employee1 객체는 Employee 클래스를 뼈대로 삼아 만들어진 객체 이기 때문에 Employee 클래스 내에 선언되 property 와 method 를
그대로 객체 자신의 property 와 method 로 가지게 된다.
//

→ node app.js 로 터미널에서 실행을 시키면 콘솔이 찍히는데 지금 위 코드 그대로 콘솔이 찍히게 되면 undefined의 직업은 undefined 이고 일주일의 수입은 NaN 이다 라고 결과 값이 출력이 된다.

이유는 employee1 객체의 property 의 값이 아직 할당 되지 않았기 때문이다.
따라서 메소드를 부르기 전에

class Employee {
  fullName: string;
  age: number;
  jobTitle: string;
  hourlyRate: number;
  workingHoursPerWeek: number;

  printEmployeeDetails = (): void => {
    console.log(
      `${this.fullName}의 직업은 ${this.jobTitle}이고 일주일의 수입은 ${
        this.hourlyRate * this.workingHoursPerWeek
      }달러이다.`
    );
  };
}

let employee1 = new Employee();
employee1.fullName = "Park";
employee1.age = 30;
employee1.jobTitle = "주니어 개발자";
employee1.hourlyRate = 40;
employee1.workingHoursPerWeek = 35;
employee1.printEmployeeDetails();

변수의 값에 할당을 해주고 다시 터미널에서 확인을하면 정상적으로 출력이 되는것을 확인 할 수 있다.

클래스를 통해서 붕어빵 틀에 붕어빵을 찍어 내듯이 여러가지 독릭된 객체를 만들어 낼 수도 있다.