[자바스크립트] 클래스

River Moon·2023년 7월 10일
0
post-thumbnail

JavaScript에서 클래스는 객체를 생성하기 위한 템플릿이며, 데이터와 이를 조작하는 코드를 캡슐화하는 데 사용된다. ES6부터 공식적으로 클래스 문법이 도입되었지만, 그 이전에는 함수와 프로토타입을 통해 비슷한 기능을 구현했다. 이 포스트에서는 클래스에 대해 자세히 살펴본다.

클래스의 정의

클래스는 class 키워드를 사용하여 정의한다.

class MyClass {
  constructor() {
    // ...
  }

  method1() {
    // ...
  }

  method2() {
    // ...
  }
}

클래스 본문은 중괄호 {}로 둘러싸인다. 그 내부에는 메소드(함수)들이 정의된다.

생성자 메소드 - constructor

constructor 메소드는 클래스를 통해 객체를 생성하고 초기화하는 데 사용되는 특별한 메소드다. 클래스당 하나의 constructor 메소드만 가질 수 있다. constructor 메소드가 없는 경우, JavaScript는 암묵적으로 빈 constructor 메소드를 생성한다.

class MyClass {
  constructor(prop1, prop2) {
    this.prop1 = prop1;
    this.prop2 = prop2;
  }
}

클래스 인스턴스 생성

new 키워드를 사용해 클래스의 인스턴스를 생성할 수 있다. new 키워드 다음에 클래스 이름과 괄호 ()를 넣는다. 괄호 안에는 생성자 메소드에 전달할 인수를 넣는다.

let instance = new MyClass(arg1, arg2);

메소드와 프로퍼티

클래스의 메소드는 클래스 인스턴스에서 사용할 수 있는 함수다. 메소드는 클래스 본문에 정의된다. 클래스의 프로퍼티는 인스턴스의 상태를 나타내는 값이며, 보통 생성자 메소드에서 초기화한다.

class MyClass {
  constructor(prop) {
    this.prop = prop;
  }

  myMethod() {
    return this.prop;
  }
}

클래스의 상속 / 확장

extends 키워드를 사용해 클래스를 상속받을 수 있다. 상속받은 클래스는 부모 클래스의 모든 메소드와 프로퍼티를 사용할 수 있다.

class MySubClass extends MyClass {
  constructor(prop, prop2) {
    super(prop);
    this.prop2 = prop2;
  }

  myMethod2() {
    return this.prop2;
  }
}

super 키워드는 부모 클래스의 생성자 메소드를 호출하는 데 사용된다.

클래스는 객체지향 프로그래밍의 핵심 요소다. 클래스를 통해 코드 재사용성을 높이고, 가독성을 향상시키며, 유지 보수를 용이하게 할 수 있다.

profile
FE 리버

0개의 댓글