[JavaScript] class 기본 개념

자바스크립트의 클래스 개념과 도입 이유

자바스크립트는 객체지향 언어이나 전통적 객체지향과 차이가 존재함. Java 등의 클래스 기반 객체지향과 달리 프로토타입 기반 객체지향 사용.

⇒ 이를 보완하기 위해 ES6에서 클래스 문법 도입

---

객체지향 언어의 두 가지 유형

1. 클래스 기반 객체지향: Java, C++ 등이 사용. 일반적인 객체지향 언어로 지칭
2. 프로토타입 기반 객체지향: 자바스크립트 방식. 객체가 프로토타입 체인으로 상속과 속성 공유 구현

자바스크립트 클래스란? 새로운 객체지향 개념이 아닌 프로토타입 기반 상속을 쉽게 사용할 수 있는 문법적 설탕. 기존 개념을 쉽게 활용하도록 도움

클래스의 기본 구조

class ClassName {
  constructor() {
    // 생성자 메서드
  }

  method1() {
    // 메서드 1
  }

  method2() {
    // 메서드 2
  }
}

클래스 정의 요소

• class 키워드: 클래스 정의
• ClassName: 클래스 이름. 일반적으로 대문자로 시작
• constructor: 생성자 메서드. 클래스 인스턴스 생성 시 한 번만 호출. new 키워드로 호출. 매개변수로 인스턴스 속성 초기화 가능
• method1, method2: 클래스의 메서드들

생성자 메서드(constructor)

생성자 메서드 constructor: 클래스의 인스턴스를 생성하고 초기화하는 특별한 메서드

• 클래스 내 단 하나만 존재, 여러 개 정의 시 SyntaxError 발생
• 인스턴스 생성 시 자동으로 호출
• 인스턴스의 초기 상태 설정에 사용, 필요한 매개변수 정의

클래스 사용 예시

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  getInfo() {
    return `${this.name}, ${this.age}`;
  }
}

const personC = new Person("철수", 30);
console.log(personC.getInfo()); // 출력: 철수, 30

생성자 함수와 클래스의 비교

1. 생성자 함수 방식

function PersonF(name, age) {
  this.name = name;
  this.age = age;
  
  this.getInfo = function() {
    console.log(`${this.name}, ${this.age}`);
  };
}

const personF = new PersonF("철수", 20);

• 특징: 생성자 함수로 객체 생성. 함수로 선언되어 각 인스턴스에 메서드 저장
• 비효율성: 생성자 함수 방식에서 각 인스턴스마다 메서드 중복 저장. 메모리 사용 비효율적 가능성
• 해결 방법: 프로토타입 사용해 메서드 추가 시 메모리 효율 개선 가능

PersonF.prototype.getInfo = function() {
  console.log(`${this.name}, ${this.age}`);
};

getInfo 메서드: 프로토타입 객체에 저장. 모든 인스턴스가 이 메서드 공유. 메모리 사용량 감소

2. 클래스 방식

class PersonC {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  getInfo() {
    return `${this.name}, ${this.age}`;
  }
}

const personC = new PersonC("영희", 30);

• 특징: 클래스 메서드 자동으로 프로토타입에 저장. 메모리 사용량 감소, 재사용성 향상
• 자동화: 메서드 프로토타입 추가 불필요. 클래스 내부에 메서드 직접 작성 가능
• 설명: constructor 메서드 인스턴스 생성 시 자동 호출. 인스턴스의 초기 속성 설정 역할

두 방식의 차이점

1. 구문: 생성자 함수는 function 키워드를, 클래스는 class 키워드를 사용한다.
2. 생성자 메서드: 함수는 매개변수를 직접 정의하지만, 클래스는 constructor 메서드 내에서 정의한다.
3. 프로토타입 메서드 정의: 함수는 prototype 객체를 통해 메서드를 추가하지만, 클래스는 내부에 직접 메서드를 정의한다.
4. 편의성: 클래스는 더 직관적이고 명확한 객체지향 문법을 제공한다.
5. 유지보수: 클래스는 ES6 이후 표준화되어 코드의 가독성과 유지보수성이 향상되었다.

클래스 사용이 권장되는 이유

클래스와 생성자 함수: 둘 다 자바스크립트의 객체지향 특성 반영. ES6 이후 클래스 사용 권장

• 가독성: 클래스 구문이 더 직관적. 객체지향 구조 쉽게 구현 가능
• 메모리 효율성: 메서드가 자동으로 프로토타입에 저장. 여러 인스턴스가 공용으로 사용