04-5. 클래스

1. 생성자 함수 vs. 클래스

생성자 함수는 JavaScript 초기부터 사용된 전통적인 객체 생성 방법입니다. 이 방법은 객체를 만들기 위해 함수의 형태로 정의되며, new 키워드를 사용하여 생성자를 호출함으로써 객체를 생성합니다.

 

클래스는 ECMAScript 2015 (ES6)에서 도입된 객체지향 프로그래밍을 지원하는 방법입니다. 클래스 구조를 사용하여 객체를 생성할 수 있으며, 객체 지향 프로그래밍의 원칙을 보다 쉽게 적용할 수 있습니다. 클래스는 class 예약어로 선언되며, 내부에 프로퍼티와 메서드를 포함할 수 있습니다. 이처럼, 클래스는 객체 생성에 있어 더 명확하고 체계적인 방법을 제공합니다.

2. 클래스 선언 및 객체 생성

클래스를 선언하면, 동일한 구조를 가진 여러 객체를 쉽게 생성할 수 있습니다. 클래스는 다음과 같은 구조로 정의됩니다:

javascript

코드 복사

class ClassName { // 생성자 constructor() { // 프로퍼티 초기화 } // 메서드 정의 methodName() { // 메서드 내용 } }

객체는 new 연산자를 사용하여 생성됩니다:

javascript

코드 복사

const objectName = new ClassName();

---

생성자

1. 생성자의 역할

생성자는 객체가 생성될 때 호출되며, 클래스의 프로퍼티와 메서드를 메모리에 할당하는 역할을 합니다. 개발자가 생성자를 명시적으로 선언하지 않으면 자동으로 매개변수가 없는 기본 생성자(Default Constructor가 추가됩니다. 기본 생성자는 인자를 받지 않으며, 기본값으로 초기화된 프로퍼티를 가질 수 있습니다.

2. 명시적 생성자 추가

개발자는 constructor() 키워드를 사용해 매개변수를 가지는 생성자를 정의할 수 있습니다. 하나의 클래스에는 하나의 생성자만 존재할 수 있으며, 여러 생성자를 추가하고 싶다면 매개변수를 다르게 구성하는 방법은 사용할 수 없습니다.

---

객체 멤버

1. 프로퍼티와 메서드

• 프로퍼티: 클래스의 생성자 내부에서 this.프로퍼티명 형태로 선언됩니다.
• 메서드: 클래스의 영역에서 선언되며, function 예약어를 사용하지 않고 일반적으로 메서드명() 형태로 선언됩니다.

2. 멤버 선언 방법

클래스 내부에서 프로퍼티는 생성자에서만 선언할 수 있으며, 메서드는 생성자 외부에서 선언하는 것이 일반적입니다. 또한 객체가 생성된 이후에도 클래스 외부에서 멤버를 추가할 수 있습니다.

---

private 멤버

JavaScript에서는 전통적인 접근 제한자를 제공하지 않지만, 클래스 내부에서만 사용되는 멤버는 이름 앞에 #을 붙여 외부에서 접근하지 못하도록 설정할 수 있습니다. 이러한 방식으로 private 멤버를 구현할 수 있습니다.

static 멤버

static 예약어로 선언된 멤버는 객체를 생성하지 않고도 클래스명으로 호출할 수 있습니다. Static 멤버는 모든 객체에 대해 공통된 메모리 공간에 할당되며, 객체마다 별도로 메모리에 할당되지 않습니다. 이로 인해 static 멤버는 클래스의 상태를 공유하는 데 유용합니다.

---

상속

1. 상속 구현

상속은 코드의 재사용성을 높여주는 중요한 개념입니다. JavaScript에서 클래스 간의 상속은 extends 예약어로 구현되며, 상위 클래스의 멤버를 하위 클래스에서 재사용할 수 있습니다. 하지만 상위 클래스의 private 멤버는 하위 클래스에 상속되지 않으며, static 멤버는 하위 클래스에서 사용할 수 있습니다.

2. super 키워드

super 키워드는 상위 클래스를 지칭하는 예약어로, 상위 생성자를 호출하거나 상위 멤버에 접근할 때 사용됩니다. 하위 생성자에서 super()를 호출하여 상위 생성자를 명시적으로 호출해야 하며, 이는 항상 생성자 내의 첫 번째 줄에 위치해야 합니다.

오버라이딩(Overriding)은 상위 클래스의 멤버를 하위 클래스에서 동일한 이름으로 재정의하는 기능입니다. 이를 통해 하위 클래스에서 상위 클래스의 동작을 변경할 수 있습니다.

상속 예시 코드

아래는 Shape 클래스와 이를 상속받은 Rect 클래스의 예시입니다:

javascript

코드 복사

class Shape { constructor(name, x, y) { this.name = name; this.x = x; this.y = y; } calcArea() { return `${this.name}의 면적을 계산합니다.`; } } class Rect extends Shape { constructor(name, x, y, width, height) { super(name, x, y); // 상위 클래스의 생성자를 호출 this.width = width; this.height = height; } calcArea() { return this.width * this.height; // 면적 계산 메서드 오버라이딩 } } // 객체 생성 const rectangle = new Rect('사각형', 0, 0, 10, 5); console.log(rectangle.calcArea()); // 출력: 50

이 예시에서 Rect 클래스는 Shape 클래스를 상속받아 calcArea 메서드를 오버라이드하여 사각형의 면적을 계산하는 기능을 제공합니다. 상속을 통해 코드의 재사용성을 높이고, 객체 지향 프로그래밍의 원칙을 적용하여 프로그램의 구조를 보다 명확하게 유지할 수 있습니다.