[자바스크립트] ES6 클래스 문법 완전 정복 - 클래스 선언, 초기화, 메서드 정의, 상속 등

자바스크립트의 Class는 ES6(ES2015)에 도입된 새로운 문법이다. 이전 버전의 자바스크립트에서는 함수와 프로토타입을 이용한 객체 지향 프로그래밍이 주를 이루었다. 그러나 Class 문법의 도입으로 객체 지향적인 프로그래밍이 더욱 직관적이고 명확하게 표현될 수 있게 되었다.

Class를 사용하는 이유와 장점

• 직관성: Class 문법은 다른 객체 지향 언어에서의 클래스와 유사하여, 개발자들에게 더 익숙하고 이해하기 쉽다.
• 재사용성: 클래스와 상속을 활용하면 코드의 재사용성이 크게 향상된다.
• 모듈성: 코드의 구조가 더욱 체계적으로 관리될 수 있다.

기본 문법

Class 선언

자바스크립트에서 Class는 class 키워드를 사용하여 선언한다.

class 사람 {}

Constructor 메서드를 사용한 초기화

constructor 메서드는 클래스의 인스턴스가 생성될 때 호출되는 특별한 메서드이다. 이를 통해 인스턴스의 초기 상태를 설정할 수 있다.

class 사람 {
  constructor(이름, 나이) {
    this.이름 = 이름;
    this.나이 = 나이;
  }
}

위의 코드에서 사람 클래스는 이름과 나이라는 두 개의 속성을 가지고 있다. new 키워드를 사용하여 이 클래스의 인스턴스를 생성할 때, constructor 메서드가 호출되면서 전달받은 이름과 나이가 해당 인스턴스에 설정된다.

const 홍길동 = new 사람('홍길동', 25);
console.log(홍길동.이름);  // 홍길동

메서드 정의

클래스 내부에서는 함수를 메서드로 정의할 수 있다. 이 메서드는 해당 클래스의 인스턴스에서 호출될 수 있다.

class 사람 {
  constructor(이름, 나이) {
    this.이름 = 이름;
    this.나이 = 나이;
  }

  소개() {
    console.log(`이름은 ${this.이름}이고, 나이는 ${this.나이}살이다.`);
  }
}

인스턴스 메서드 vs 정적(static) 메서드

• 인스턴스 메서드: 클래스의 인스턴스에서 호출되는 메서드이다. 위의 소개 메서드는 인스턴스 메서드의 예이다.
• 정적 메서드: static 키워드를 사용하여 정의되며, 클래스 자체에서 호출된다. 인스턴스를 생성하지 않아도 사용할 수 있다.

class 사람 {
  static 인류의수() {
    console.log('인류는 수십억 명이다.');
  }
}
사람.인류의수();  // 인류는 수십억 명이다.

앞서 정의한 사람 클래스의 소개 메서드는 다음과 같이 호출할 수 있다.

const 홍길동 = new 사람('홍길동', 25);
홍길동.소개();  // 이름은 홍길동이고, 나이는 25살이다.

정적 메서드 인류의수는 인스턴스를 생성하지 않고 클래스 이름으로 직접 호출할 수 있다.

사람.인류의수();  // 인류는 수천만 명이다.

상속과 확장

자바스크립트의 클래스에서 상속은 기존 클래스의 속성과 메서드를 새로운 클래스에 전달하는 메커니즘을 의미한다. 이를 통해 기존 코드의 재사용성을 높일 수 있고, 클래스 간의 계층적 관계를 구축할 수 있다.

상속 개념 이해

자바스크립트에서 클래스의 상속은 extends 키워드를 사용하여 구현된다.

class 동물 {
  소리내기() {
    console.log('동물의 소리');
  }
}

class 개 extends 동물 {

}

상속을 사용하면, 자식 클래스는 부모 클래스의 모든 속성과 메서드를 물려받게 된다. 위의 예시에서 개 클래스는 동물 클래스의 모든 메서드와 속성을 상속받게 된다.

상속을 통한 코드 재사용성

상속을 활용하면 공통의 로직이나 데이터 구조를 부모 클래스에 정의하고, 특별한 기능이나 속성만 자식 클래스에 추가하는 방식으로 코드의 중복을 줄일 수 있다. 이는 개발의 효율성을 높이고, 유지 관리도 쉬워진다.

메서드 오버라이딩

자식 클래스에서는 부모 클래스의 메서드를 동일한 이름으로 재정의 할 수 있다. 이를 메서드 오버라이딩이라고 한다. 오버라이딩된 메서드는 부모 클래스의 원래 메서드를 덮어쓴다.

class 동물 {
  소리내기() {
    console.log('동물의 소리');
  }
}

class 개 extends 동물 {
  소리내기() {
    console.log('멍멍');
  }
}

const 댕댕이 = new 개();
댕댕이.소리내기();  // 멍멍

Super 키워드를 사용한 부모 메서드 호출 방법

super 키워드를 사용하면, 자식 클래스에서 부모 클래스의 메서드를 호출할 수 있다.

class 개 extends 동물 {
  소리내기() {
    super.소리내기();
    console.log('멍멍');
  }
}

const 댕댕이 = new 개();
댕댕이.소리내기();  
// 동물의 소리
// 멍멍

Constructor 오버라이딩

자식 클래스에서는 부모 클래스의 constructor를 오버라이딩 할 수 있다. 그러나 자식 클래스의 constructor에서 super를 호출하지 않으면 오류가 발생한다.

자식 클래스의 constructor에서 super 키워드를 사용하면 부모 클래스의 constructor를 호출할 수 있다. 이를 통해 부모 클래스에서 필요한 초기화 작업을 수행할 수 있다.

class 동물 {
  constructor(name) {
    this.name = name;
  }
}

class 개 extends 동물 {
  constructor(name, breed) {
    super(name);
    this.breed = breed;
  }
}

const 댕댕이 = new 개('댕댕이', '진돗개');
console.log(댕댕이.name);   // 댕댕이
console.log(댕댕이.breed); // 진돗개

접근 제어자

자바스크립트 클래스에서 데이터와 메서드의 접근 권한을 제한하기 위해 사용되는 접근 제어자에 대해 알아본다.

Public, Private, Protected

접근 제어자는 클래스의 멤버(속성 및 메서드)에 대한 접근 권한을 지정하는데 사용된다. 이를 통해 클래스의 내부 구현을 숨기거나, 특정 멤버에만 제한적으로 접근을 허용하여 객체 지향의 캡슐화 원칙을 지키는데 도움을 준다.

• Public: 기본적으로 모든 멤버는 public이다. 어디서든지 접근 가능하다.
• Private: # 기호 또는 언더스코어(_)로 시작하는 멤버는 private이다. 해당 클래스 내부에서만 접근 가능하다.
• Protected: 현재 자바스크립트에는 protected 접근 제어자가 공식적으로 존재하지 않는다. 그러나 언더스코어(_)를 사용하여 암묵적으로 protected처럼 활용하는 경우가 있다. 이는 클래스 및 그 서브클래스에서 접근이 가능하도록 하는 것을 의미한다.

언더스코어(_)와 #을 사용한 Private 멤버 변수와 메서드

class 예제 {
  _protected멤버 = "protected처럼 활용할 수 있다.";
  #private멤버 = "이것은 private 변수이다.";

  _protected메서드() {
    console.log("이것은 protected처럼 활용할 수 있는 메서드이다.");
  }

  #private메서드() {
    console.log("이것은 private 메서드이다.");
  }
}

Getter와 Setter 메서드

Getter와 Setter 메서드는 객체의 속성에 접근하고 수정하는 작업을 캡슐화하는데 사용된다. 이를 통해 객체 내부의 데이터에 안전하게 접근하거나, 특정 로직을 실행할 수 있다.

Getter와 Setter 메서드의 정의와 사용법 설명

class 사람 {
  constructor(이름) {
    this._이름 = 이름;
  }

  get 이름() {
    return this._이름;
  }

  set 이름(value) {
    this._이름 = value;
  }
}

const 철수 = new 사람("철수");
console.log(철수.이름); // 철수
철수.이름 = "영희";
console.log(철수.이름); // 영희

정적(static) 멤버

정적 멤버는 클래스 자체에 속하며 인스턴스에는 속하지 않는다. 이는 클래스 전체에 걸쳐 공유되는 속성이나 메서드를 만들 때 사용된다.

Class 레벨에서의 정적 변수와 메서드 정의 방법

class 수학 {
  static 원주율 = 3.141592;

  static 원의넓이(반지름) {
    return this.원주율 * 반지름 * 반지름;
  }
}

console.log(수학.원주율);       // 3.141592
console.log(수학.원의넓이(5)); // 약 78.5398

정적 메서드와 인스턴스 메서드의 차이점과 활용성

정적 메서드는 클래스 레벨에서 호출되며, 인스턴스의 특정 상태와는 무관한 연산을 수행할 때 사용된다. 반면, 인스턴스 메서드는 객체의 내부 상태에 기반하여 작동하며, 해당 객체의 데이터에 접근하거나 수정하는 작업을 수행한다.

자바스크립트에서의 클래스와 관련된 여러 기능들은 객체 지향 프로그래밍 패러다임을 효과적으로 구현하는 데 도움을 준다. 이러한 기능들을 적절하게 활용함으로써, 코드의 재사용성, 확장성, 그리고 유지 보수성을 높일 수 있다. 여러분도 자바스크립트 클래스의 이러한 강력한 기능들을 활용하여 효과적인 프로그래밍을 진행해 보길 바란다.