class

작성자

익명

작성일

2025.09.01

조회수

버전

class

JavaScript에서 class는 객체 지향 프로그래밍(OOP, Object-Orient Programming)을 보 직관적이고 구조적으로 구현할 수 있도록 도와주는 문법적 구조입니다. ECMAScript 205(ES6) 도입된 class 키워드는 기존의 프로토타입 기반 상속을 더 명확하고 익숙한 형태로 표현할 수 있게 해줍니다. 이 문서에서는 JavaScript의 class 문법, 사용 방법, 상속, 정적 메서드, 그리고 주의사항 등을 상세히 설명합니다.

개요

JavaScript는 원래 프로토타입 기반 언어로, 클래스 기반 언어(C++, Java 등)와는 달리 클래스 개념이 존재하지 않았습니다. 하지만 개발자들이 객체 지향 패턴을 흉내 내기 위해 함수와 프로토타입을 활용하는 방식이 널리 사용되었습니다. ES6에서 도입된 class는 이러한 패턴을 더 명확하고 유지보수하기 쉽게 만들어주는 문법적 설탕(syntactic sugar)입니다. 실제로는 여전히 프로토타입 기반의 메커니즘을 사용하지만, 클래스 문법을 통해 코드의 가독성과 구조를 향상시킵니다.

class 문법 기본 구조

JavaScript의 class는 다음과 같은 기본 구조를 가집니다:

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

  greet() {
    console.log(`안녕, 나는 ${this.name}입니다.`);
  }
}

class 키워드로 클래스를 정의합니다.
[constructor](/doc/%EA%B8%B0%EC%88%A0/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D/JavaScript/constructor)() 메서드는 인스턴스 생성 시 호출되는 특수 메서드입니다.
일반 메서드는 클래스 내부에 직접 정의할 수 있으며, 내부에서 this를 통해 인스턴스의 속성에 접근합니다.

인스턴스 생성

const person1 = new Person("홍길동", 30);
person1.greet(); // "안녕, 나는 홍길동입니다."

new 키워드를 사용해 클래스의 인스턴스를 생성할 수 있습니다. 이때 constructor가 자동으로 실행됩니다.

상속과 extends

JavaScript의 class는 extends 키워드를 통해 상속(inheritance)을 지원합니다. 자식 클래스는 부모 클래스의 속성과 메서드를 물려받으며, 필요 시 오버라이드할 수 있습니다.

class Student extends Person {
  constructor(name, age, grade) {
    super(name, age); // 부모 클래스의 constructor 호출
    this.grade = grade;
  }

  study() {
    console.log(`${this.name}은(는) 공부하고 있습니다.`);
  }

  // 메서드 오버라이드
  greet() {
    console.log(`안녕, 나는 학생 ${this.name}입니다.`);
  }
}

extends 키워드로 부모 클래스를 지정합니다.
[super](/doc/%EA%B8%B0%EC%88%A0/%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D/JavaScript/super)()를 통해 부모 클래스의 생성자를 호출합니다.
메서드를 자식 클래스에서 재정의(오버라이드)할 수 있습니다.

예제 실행

const student1 = new Student("김철수", 16, "10학년");
student1.greet(); // "안녕, 나는 학생 김철수입니다."
student1.study(); // "김철수은(는) 공부하고 있습니다."

정적 메서드 (Static Methods)

정적 메서드는 클래스의 인스턴스가 아닌, 클래스 자체에서 호출되는 메서드입니다. static 키워드를 사용하여 정의합니다.

class MathUtils {
  static add(a, b) {
    return a + b;
  }

  static multiply(a, b) {
    return a * b;
  }
}

console.log(MathUtils.add(5, 3));       // 8
console.log(MathUtils.multiply(4, 7));  // 28

정적 메서드는 유틸리티 함수나 팩토리 메서드를 정의할 때 유용합니다.

getter와 setter

클래스 내부에서 get과 set 키워드를 사용해 속성에 대한 접근과 설정을 제어할 수 있습니다.

class Circle {
  constructor(radius) {
    this._radius = radius;
  }

  get radius() {
    return this._radius;
  }

  set radius(value) {
    if (value < 0) {
      throw new Error("반지름은 음수일 수 없습니다.");
    }
    this._radius = value;
  }

  get area() {
    return Math.PI * this._radius ** 2;
  }
}

const circle = new Circle(5);
console.log(circle.area); // 78.5398...

circle.radius = 10;
console.log(circle.area); // 314.159...

circle.radius = -1; // Error: 반지름은 음수일 수 없습니다.

getter와 setter는 데이터의 유효성 검사나 계산된 속성 제공에 유용합니다.

주의사항 및 제한 사항

class는 호이스팅되지 않음: class는 let과 const처럼 TDZ(Temporal Dead Zone)에 영향을 받습니다. 클래스 정의 이전에 참조하면 에러가 발생합니다.
strict mode 기본 적용: 클래스 내부는 자동으로 엄격 모드(strict mode)에서 실행됩니다.
메서드는 열거 불가: 클래스 내 메서드는 기본적으로 enumerable: false 속성을 가지므로 for...in 루프로 열거되지 않습니다.
클래스 표현식도 가능: class는 선언뿐만 아니라 표현식 형태로도 사용할 수 있습니다.

const Rectangle = class {
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }
};

결론

JavaScript의 class는 객체 지향 프로그래밍을 보다 명확하고 직관적으로 구현할 수 있게 해주는 중요한 문법입니다. 비록 내부적으로는 여전히 프로토타입 기반의 메커니즘을 사용하지만, 개발자 경험을 크게 향상시키며, 대규모 애플리케이션의 코드 구조화에 큰 도움을 줍니다. 상속, 정적 메서드, getter/setter 등의 기능을 적절히 활용하면 유지보수성과 재사용성이 높은 코드를 작성할 수 있습니다.

📝 마크다운 원본

이 문서의 마크다운 원본 내용입니다.

# class

JavaScript에서 `class`는 객체 지향 프로그래밍(OOP, Object-Orient Programming)을 보 직관적이고 구조적으로 구현할 수 있도록 도와주는 문법적 구조입니다. ECMAScript 205(ES6) 도입된 `class` 키워드는 기존의 프로토타입 기반 상속을 더 명확하고 익숙한 형태로 표현할 수 있게 해줍니다. 이 문서에서는 JavaScript의 `class` 문법, 사용 방법, 상속, 정적 메서드, 그리고 주의사항 등을 상세히 설명합니다.

## 개요

JavaScript는 원래 프로토타입 기반 언어로, 클래스 기반 언어(C++, Java 등)와는 달리 클래스 개념이 존재하지 않았습니다. 하지만 개발자들이 객체 지향 패턴을 흉내 내기 위해 함수와 프로토타입을 활용하는 방식이 널리 사용되었습니다. ES6에서 도입된 `class`는 이러한 패턴을 더 명확하고 유지보수하기 쉽게 만들어주는 **문법적 설탕**(syntactic sugar)입니다. 실제로는 여전히 프로토타입 기반의 메커니즘을 사용하지만, 클래스 문법을 통해 코드의 가독성과 구조를 향상시킵니다.

## class 문법 기본 구조

JavaScript의 `class`는 다음과 같은 기본 구조를 가집니다:

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

  greet() {
    console.log(`안녕, 나는 ${this.name}입니다.`);
  }
}
```

- `class` 키워드로 클래스를 정의합니다.
- `constructor()` 메서드는 인스턴스 생성 시 호출되는 특수 메서드입니다.
- 일반 메서드는 클래스 내부에 직접 정의할 수 있으며, 내부에서 `this`를 통해 인스턴스의 속성에 접근합니다.

### 인스턴스 생성

```javascript
const person1 = new Person("홍길동", 30);
person1.greet(); // "안녕, 나는 홍길동입니다."
```

`new` 키워드를 사용해 클래스의 인스턴스를 생성할 수 있습니다. 이때 `constructor`가 자동으로 실행됩니다.

## 상속과 extends

JavaScript의 `class`는 `extends` 키워드를 통해 **상속**(inheritance)을 지원합니다. 자식 클래스는 부모 클래스의 속성과 메서드를 물려받으며, 필요 시 오버라이드할 수 있습니다.

```javascript
class Student extends Person {
  constructor(name, age, grade) {
    super(name, age); // 부모 클래스의 constructor 호출
    this.grade = grade;
  }

  study() {
    console.log(`${this.name}은(는) 공부하고 있습니다.`);
  }

  // 메서드 오버라이드
  greet() {
    console.log(`안녕, 나는 학생 ${this.name}입니다.`);
  }
}
```

- `extends` 키워드로 부모 클래스를 지정합니다.
- `super()`를 통해 부모 클래스의 생성자를 호출합니다.
- 메서드를 자식 클래스에서 재정의(오버라이드)할 수 있습니다.

### 예제 실행

```javascript
const student1 = new Student("김철수", 16, "10학년");
student1.greet(); // "안녕, 나는 학생 김철수입니다."
student1.study(); // "김철수은(는) 공부하고 있습니다."
```

## 정적 메서드 (Static Methods)

정적 메서드는 클래스의 인스턴스가 아닌, **클래스 자체**에서 호출되는 메서드입니다. `static` 키워드를 사용하여 정의합니다.

```javascript
class MathUtils {
  static add(a, b) {
    return a + b;
  }

  static multiply(a, b) {
    return a * b;
  }
}

console.log(MathUtils.add(5, 3));       // 8
console.log(MathUtils.multiply(4, 7));  // 28
```

정적 메서드는 유틸리티 함수나 팩토리 메서드를 정의할 때 유용합니다.

## getter와 setter

클래스 내부에서 `get`과 `set` 키워드를 사용해 속성에 대한 접근과 설정을 제어할 수 있습니다.

```javascript
class Circle {
  constructor(radius) {
    this._radius = radius;
  }

  get radius() {
    return this._radius;
  }

  set radius(value) {
    if (value < 0) {
      throw new Error("반지름은 음수일 수 없습니다.");
    }
    this._radius = value;
  }

  get area() {
    return Math.PI * this._radius ** 2;
  }
}
```

```javascript
const circle = new Circle(5);
console.log(circle.area); // 78.5398...

circle.radius = 10;
console.log(circle.area); // 314.159...

circle.radius = -1; // Error: 반지름은 음수일 수 없습니다.
```

getter와 setter는 데이터의 유효성 검사나 계산된 속성 제공에 유용합니다.

## 주의사항 및 제한 사항

- **class는 호이스팅되지 않음**: `class`는 `let`과 `const`처럼 **TDZ**(Temporal Dead Zone)에 영향을 받습니다. 클래스 정의 이전에 참조하면 에러가 발생합니다.
- **strict mode 기본 적용**: 클래스 내부는 자동으로 엄격 모드(strict mode)에서 실행됩니다.
- **메서드는 열거 불가**: 클래스 내 메서드는 기본적으로 `enumerable: false` 속성을 가지므로 `for...in` 루프로 열거되지 않습니다.
- **클래스 표현식도 가능**: `class`는 선언뿐만 아니라 표현식 형태로도 사용할 수 있습니다.

```javascript
const Rectangle = class {
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }
};
```

## 관련 개념 및 참고 자료

- [MDN Web Docs - JavaScript classes](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes)
- [ECMAScript 2015 (ES6) Specification](https://www.ecma-international.org/ecma-262/6.0/)
- 프로토타입 상속: JavaScript의 `class`는 내부적으로 프로토타입 체인을 사용합니다.

## 결론

JavaScript의 `class`는 객체 지향 프로그래밍을 보다 명확하고 직관적으로 구현할 수 있게 해주는 중요한 문법입니다. 비록 내부적으로는 여전히 프로토타입 기반의 메커니즘을 사용하지만, 개발자 경험을 크게 향상시키며, 대규모 애플리케이션의 코드 구조화에 큰 도움을 줍니다. 상속, 정적 메서드, getter/setter 등의 기능을 적절히 활용하면 유지보수성과 재사용성이 높은 코드를 작성할 수 있습니다.

AI 생성 콘텐츠 안내

이 문서는 AI 모델(qwen-3-235b-a22b-instruct-2507)에 의해 생성된 콘텐츠입니다.

주의사항: AI가 생성한 내용은 부정확하거나 편향된 정보를 포함할 수 있습니다. 중요한 결정을 내리기 전에 반드시 신뢰할 수 있는 출처를 통해 정보를 확인하시기 바랍니다.

위키너와나

class

class

개요

class 문법 기본 구조

인스턴스 생성

상속과 extends

예제 실행

정적 메서드 (Static Methods)

getter와 setter

주의사항 및 제한 사항

관련 개념 및 참고 자료

결론

📝 마크다운 원본

🤔 AI의 사고 과정

이 AI 생성 콘텐츠가 도움이 되었나요?