객체 생성의 마법: 자바스크립트 Class 정리🧹

오늘은 자바스크립트 ES6에 추가된 class에 대해 학습하고 정리해보았다.

1. Class란?

Class란 객체를 생성하기 위한 템플릿을 말한다. 비슷한 구조를 가진 객체를 여러 개 만들 때 쉽게 만들 수 있도록 해주는 템플릿이라고 생각하면 편하다.

Class는 함수처럼 선언식과 표현식, 2가지로 정의할 수 있다.

우선 선언식은 다음과 같으며 new 키워드를 사용해 객체를 생성할 수 있다.
(클래스 이름의 첫글자는 보통 대문자로 시작하는게 규칙)

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

const person1 = new Person("bungbung", 25);
const person2 = new Person("Jiwon", 28);

여기서 constructor는 생성자 함수이다. 클래스마다 하나씩만 존재하며 클래스로 만든 객체를 초기화하는 역할을 한다. constructor에 매개변수로 반드시 필요한 필수 요소들을 넣어주면 된다.

표현식은 다음과 같이 작성한다.

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

클래스 내부에는 메서드도 넣을 수 있는데 여기서 주의할 점은
객체와는 다르게 메서드 사이에 쉼표(,)를 넣으면 에러가 발생한다.

class Person {
  constructor (name, age) {
    this.name = name;
    this.age = age;
  }, // <- 쉼표를 넣으면 에러 발생!!
  
  sayHello() {
    console.log("Hello");
  }
}

---

2. getter와 setter

클래스에서 getter와 setter가 존재한다.

• getter: 속성값을 반환
• setter: 속성값을 설정

특히, setter는 유효성 검사에 많이 사용된다.
또한, getter와 setter를 사용할 때 속성 이름 앞에 "_"를 사용해야 한다. 이는 클래스 내부 속성임을 나타내며, 사용하지 않을 경우 무한루프에 빠질 수 있다.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  get name() {
  	return this._name;
  }
  
  set name(value) {
    if (typeof value !== "string") {
      console.log("이름을 문자열로 작성해 주세요!");
      return;
    }
    this._name = value;
  }
}

const person1 = new Person("bungbung", 25);
person1.name = 543 // "이름을 문자열로 작성해 주세요!"

⚠️ 주의해야 할 점: getter와 setter는 이름이 같아야 속성처럼 동작한다.

---

3. 상속(extends)

extends 키워드를 사용하여 다른 클래스의 기능을 물려받을 수 있다.

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

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

super는 부모 클래스의 생성자를 호출하는 역할을 한다. 만약 부모 클래스와 constructor가 동일할 경우 자식 클래스에 constructor를 생략해도 된다.

또한, 클래스에는 오버라이딩이라는 개념이 존재한다. 상속을 받으면 부모 클래스의 메서드도 상속을 받게 되는데 이를 재정의하는 것을 오버라이딩이라고 한다.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  
  sayName() {
    console.log(`안녕하세요, 제 이름은 ${this.name}입니다!`);
  }
}

class Student extends Person {
  constructor(name, age, class) {
    super(name, age);
    this.class = class;
  }
  
  sayName() {
    console.log(`안녕하세요, 저는 ${this.class}반 ${this.name}입니다!`);
  }
}

const student1 = new Student("지원", 17, 6);
student1.sayName() // "안녕하세요, 저는 6반 지원입니다!"

이와 같이 부모클래스에서 이미 정의된 메서드이더라도 자식클래스에서 재정의할 수 있다.

---

4. 정적 메서드(Static)

정적 메서드는 static 키워드를 사용해 만들 수 있다.

정적 메서드는 인스턴스를 만들지 않아도 호출할 수 있다. 이는 객체를 만드는 것보다 클래스에 속한 함수에 집중하고 싶을 때 주로 사용한다. 예를 들어, 계산기는 특정 객체랑 상관이 없기 때문에 정적 메서드로 구현하는 게 더 깔끔하다.

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

console.log(Calculator.add(1, 2)); // 3