JavaScript 클래스

클래스란?

클래스는 객체 지향 프로그래밍(OOP)에서 중요한 개념 중 하나로,

비슷한 특징과 동작을 가지는 "객체"들을 추상화하여 표현하는 템플릿으로 볼 수 있다.

클래스는 객체를 생성하기 위한 템플릿으로, 객체의 구조와 동작 방식을 정의하는데 사용된다.

 

예를 들어, "사람"이라는 클래스는 모든 사람들이 공통적으로 가지는 특성과 동작을 정의할 수 있다.

이 클래스를 기반으로 "Kang"나 "Kim"과 같은 실제 사람 객체를 생성하고 그들의 특성과 동작을 다룰 수 있다.

 

 

ES6부터 도입된 클래스

이 클래스는 es6부터 도입되었다.

es6이전까지는 객체를 생성하기 위해 생성자 함수와 프로토타입을 사용했다.

이러한 방식을 프로토타입 기반 객체 지향 프로그래밍이라고 한다.

// 생성자 함수 정의
function Person(name, age) {
  this.name = name;
  this.age = age;
}

// 메서드 추가
Person.prototype.info = function() {
  console.log(`name: ${this.name}, age: ${this.age}`);
};


// 객체 생성
const person1 = new Person('Kang', 20);
person1.info();
// name: Kang, age: 20

Person 함수는 생성자 역할을 하며, 생성자 함수 내에서 this는 새로 생성되는 객체를 가리킨다.

메서드를 추가할 때는 Person.prototype을 사용하여 객체의 프로토타입에 메서드를 추가한다.

이렇게 하면 person1 객체는 Person 함수의 프로토타입에서 info 메서드를 상속받는다.

 

하지만 es6부터 도입된 클래스 문법으로 더 간결하고 편리하게 객체를 생성할 수 있게 되었다.

 

 

클래스 생성

// 클래스 정의
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  info() {
    console.log(`name: ${this.name}, age: ${this.age}`);
  }
}



// 객체 생성
const person1 = new Person('Kang', 20);
person1.info();
// name: Kang, age: 20

new 연산자를 통해 객체를 생성한다.

이때 주의할 점은, new 연산자로 클래스를 호출하기 전에 이미 클래스 생성이 되어 있어야 한다.

그 이유는, 클래스 정의 자체는 호이스팅될 수 있지만, 클래스의 내용은 정의된 위치에서 초기화되기 때문이다.

즉, 초기화 되지 않은 클래스에 접근하게 된 셈이다.

 

Person 클래스는 생성자 메서드인 constructor와 info라는 메서드를 가지고 있다.

 

생성자 메서드는 객체가 생성될 때 호출되며, 객체의 초기 상태를 설정하는 데 사용된다.

info 메서드는 해당 객체의 정보를 출력하는 역할을 한다.

 

클래스 내부의 메서드에 접근할 때 this 키워드를 사용한다.

이 키워드는 현재 인스턴스를 참조하며, 객체 내부의 프로퍼티나 메서드에 접근할 때 사용된다.

즉,

const person1 = new Person('Kang', 20);

을 통해 person1 객체가 생성되는데, 이때 클래스 내부의 this는 person1이 되는 것이다.

결국 이 this.name은 'Kang'을, this.age는 20을 객체의 초기 상태로 설정한다.

 

 

Person 클래스를 사용해서 붕어빵처럼 여러 객체를 만들어낼 수 있다.

const person1 = new Person('Kang', 20);
console.log(person1.info());
// name: Kang, age: 20

const person2 = new Person('Kim', 25);
console.log(person2.info());
// name: Kim, age: 25

const person3 = new Person('Lee', 23);
console.log(person3.info());
// name: Lee, age: 23

 

 

클래스 상속

클래스 상속은 객체 지향 프로그래밍의 핵심 개념 중 하나로,

하나의 클래스를 기반으로 새로운 클래스를 생성하고, 기존 클래스의 속성과 메서드를 상속받아 확장하는 과정이다.

 

 

상속을 통해 코드의 재사용성을 높이고 유사한 클래스들을 구조화하며, 계층 구조를 통해 객체들 간의 관계를 표현할 수 있다.

class Parent {
  constructor(name) {
    this.name = name;
  }

  info() {
    console.log(`name: ${this.name}`);
  }
}

class Child extends Parent {
  constructor(name, age) {
    super(name); // 상위 클래스 생성자 호출
    this.age = age;
  }

  info() {
    console.log(`name: ${this.name}, age: ${this.age}`);
  }
  parentInfo() {
    super.info();
  }
}

const child = new Child('Kang', 20);
child.info();
// name: Kang, age: 20

child.parentInfo();
//name: Kang

Parent 클래스가 동작되는 원리는 위의 클래스 생성에서 다루었다.

 

Child 클래스는 Parent 클래스를 상속 받는다.

생성자 메서드 constructor에 super(name)이 존재한다.

이때 super는 부모를 가리키는 연산자이다.

 

따라서 super(name)은 부모의 생성자를 호출하는 것이다.

 

 

또한, parentInfo() 메서드는 부모 클래스에서 생성된 info를 호출하려고 한다.

역시 생성자 메서드에서 썼던 super를 통해 부모 클래스에 접근하여 info() 메서드를 호출하면 된다.

 

 

 

 

 

 

 

글 내용 중, 잘못됐거나 더 알아야 하는 지식이 있다면 댓글로 남겨주시면 감사하겠습니다!

모두 좋은 하루 보내세요:)