[JavaScript] 클래스

딥다이브를 읽으면서 클래스를 대강 이해하긴 했지만 실제로 사용해본 적은 없었는데,

타입스크립트 강의를 듣던 중 강사님이 자바스크립트의 클래스에 대해서 간단하게 소개해주셨다.

 

클래스

클래스는 동일한 모양의 객체를 더 쉽게 생성하도록 도와주는 문법이다.

붕어빵 틀이라고 생각하면 된다.

let studentA = {
  name: 'summermong',
  grade: 'A+',
  age: 27,
  study() {
    console.log('열심 공부');
  },
  introduce() {
    console.log('hi');
  },
};

 

앞으로 studentB, studentC를 만들 때마다 똑같은 구조의 코드를 짜야 하는데, 이러면 번거로워진다.

하나의 틀(클래스)을 만들고 거기에 재료(매개변수)를 넣을 때마다 붕어빵(객체)가 만들어지도록 해본다.

 

class Student {
  // 필드 (클래스가 만들 객체 프로퍼티)
  name;
  grade;
  age;

  // 생성자 (클래스 호출 시 객체를 생성하는 역할을 하는 함수 = 메서드)
  constructor(name, grade, age) {
    this.name = name;
    this.grade = grade;
    this.age = age;
  }

  // 메서드
  study() {
    console.log('열심 공부');
  }

  introduce() {
    console.log(`안녕하세요, ${this.name}입니다.`);
  }
}

Student라는 붕어빵 틀(클래스)을 만들었다.

이 안에는 붕어빵 틀(클래스)로 만들 붕어빵(객체)에 들어갈 기본 재료(필드)를 적어준다.

이 재료는 객체 프로퍼티로 세미콜론으로 구분지어준다.

 

생성자는 실질적으로 붕어빵을 만들어주는 역할을 하는 함수(메서드)로 constructor라고 쓰고 안에 재료(매개변수)를 넣어준다.

this는 이 틀로 만들 붕어빵(객체)을 가리킨다.

 

메서드도 설정할 수 있다.  

 

let studentB = new Student('wintermong', 'A', 27);
console.log(studentB);
studentB.study();

// Student { name: 'wintermong', grade: 'A', age: 27 }
// 열심 공부
// 안녕하세요, wintermong입니다.

붕어빵 틀을 사용하기 위해선 new 연산자와 붕어빵 틀(클래스) 이름을 적어준다.

그리고 그 안에 들어갈 재료들을 넣어주고 콘솔에 찍어보면 예쁘게 찍히는 걸 볼 수 있다.

 

이번엔 이 붕어빵 틀이랑 비슷하지만 조금 더 생긴 게 다른 틀을 만들어보려고 한다.

programming이라는 메서드도 넣고, 좋아하는 기술인 favoriteSkill이라는 필드(재료)도 넣어보려고 한다.

그러면 처음부터 틀을 다시 만들어야 할까?

 

그렇지 않다. 기존의 틀을 가져와 조금만 수정해주면 된다.

이 과정을 상속(확장)이라고 한다.

 

class StudentDeveloper extends Student {
  // 필드
  favoriteSkill;

  // 생성자
  constructor(name, grade, age, favoriteSkill) {
    super(name, grade, age);
    this.favoriteSkill = favoriteSkill;
  }

  // 메서드
  programming() {
    console.log(`${this.favoriteSkill}로 프로그래밍 함`);
  }
}

extends 클래스명 을 작성해 상속 받으려는 붕어빵 틀의 이름을 적어준다.

그러면 지금 Student라는 클래스를 상속 받은 StudentDeveloper라는 붕어빵 틀이 만들어진다.

 

상속을 받았기 때문에 필드에 똑같이 name, grade, age를 써줄 필요가 없다.

하지만 붕어빵을 만들기 위해선 만드는 과정(생성자)에 재료는 똑같이 넣어줘야 하고,

상속을 받았다는 뜻으로 super()를 적어 안에 상속 받을 재료들을 넣어준다.

 

붕어빵으로 비유해서 조금 중구난방이지만, 결론은

 

1. 똑같은 객체를 만들기 위해 클래스를 사용한다.

2. 클래스는 확장할 수 있으며, 확장 시 필드는 작성하지 않아도 되지만 생성자 메서드 안의 매개변수에는 적어줘야 한다.

3. 생성자 메서드 자체에는 super() 키워드로 상속 받은 매개변수들을 따로 적어주고, 새로 작성한 필드는 원래 문법대로 적어준다.

 

---

 

**출처: 한 입 크기로 잘라먹는 타입스크립트 (인프런, 이정환 강사님)