[JS] 클래스(Class)

멋쟁이사자처럼 프론트엔드 스쿨의 7주차를 지나고 있는 시점이다.

Javascript의 개념들을 배우고 있는데, 한 번에 이해가 도저히 되지 않던 개념이었던 것중 하나인 Class에 대해 정리해보고자 한다.

Class

정의

자바스크립트에서 함수의 한 종류로, 객체를 생성하기 위한 템플릿으로 사용되며, 값으로 사용할 수 있는 일급 객체(다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체)이다.

역할

일종의 설계도로, 클래스를 정의함으로써 객체를 만들기 위해 필요한 속성과 메서드의 구조를 미리 정의할 수 있다.

클래스는 생성자(constructor)를 포함하고 있다. 클래스 내부에서 정의된 메서드는 해당 클래스로부터 생성된 모든 객체에서 공유된다.

특징

// 1. 무명의 리터럴로 생성하여, 런타임에 생성이 가능하다.
const MyClass = class {
  // 클래스 내용
};

// 2. 변수나 자료구조(객체, 배열 등)에 저장할 수 있다.
const obj = new MyClass();


// 3. 함수의 매개변수에게 전달할 수 있다.
function processClass(classObj) {
  const obj1 = new classObj();
  // 클래스 객체 처리
}

const MyClass1 = class {
  constructor() {
    // 생성자 내용
  }

  // 메서드 등 클래스 내용
};

processClass(MyClass1);


// 4.  함수의 반환값으로 사용할 수 있다.

function createClass() {
  return class {
    // 클래스 내용
  };
}

const MyClass2 = createClass();
const obj2 = new MyClass2();

Constructor

정의 및 역할

클래스 내부에서 객체가 생성될 때 자동으로 호출되는 특별한 메서드다.
클래스로부터 객체를 생성할 때 호출되며, 객체의 속성을 초기화하거나 다른 초기화 작업을 수행하는 역할을 한다.

Prototype Method

정의 및 역할

프로토타입 메서드는 클래스로부터 생성된 객체의 프로토타입에 정의된 메서드다.
이 메서드는 해당 클래스로부터 생성된 모든 객체에서 공유되며, 객체의 프로토타입 체인을 통해 메서드를 찾고 호출할 수 있다.
프로토타입 메서드는 객체의 동작을 정의하는 데 사용된다.

Static Method

정의 및 역할

정적 메서드는 클래스에 직접적으로 속하는 메서드로서, 클래스 자체에 연결되어 있다.
정적 메서드는 해당 클래스의 인스턴스가 아닌 클래스 자체에서 호출된다.
이 메서드는 주로 유틸리티 함수를 구현하거나 클래스 레벨에서 공통적인 동작을 수행하는 데 사용된다.

활용

// class 미적용

function createPerson(name, age) {
  let person = {};
  person.name = name;
  person.age = age;

  person.sayHello = function() {
    console.log(`안녕하세요, 저는 ${this.name}입니다.`);
  };

  return person;
}

let person = createPerson('김멋사', 27);
console.log(person.name);  // 출력: 김멋사
console.log(person.age);   // 출력: 27
person.sayHello();         // 출력: 안녕하세요, 저는 김멋사입니다.

=> Class 미적용
클래스를 미적용한 코드에서는 createPerson이라는 함수를 통해 객체를 생성한다.
하지만 객체를 생성하기 위해 매번 함수를 호출해야 하며, 또한 createPerson 함수 내에서 객체의 속성과 메서드를 수동으로 정의해야 한다.
이로 인해 코드의 가독성이 저하되고, 객체를 생성하는 과정이 번거롭고 반복적일 수 있다.

// class 적용

class Person {

    // 생성자
  constructor(name, age) {
    this.name = name;
    this.age = age;
    this.isAdult = age >= 19;
  }
  // 프로토타입 메서드
  sayHello() {
    console.log(`안녕하세요, 저는 ${this.name}입니다.`);
  }
  // 정적 메서드
 static sayHi() {
 console.log('안녕!');
 }
}

// 인스턴스 생성
const person = new Person('김멋사', 27);
console.log(person.name);  // 출력: 김멋사
console.log(person.age);   // 출력: 27
console.log(person.isAdult);  // 출력: true
person.sayHello();         // 출력: 안녕하세요, 저는 김멋사입니다.

고려사항

- 기본적으로 클래스는 클래스 정의 이전에 참조할 수 없다. (클래스도 함수 선언문과 마찬가지로, 런타임 이전에 평가되어 함수 객체를 생성한다)

- 클래스는 인스턴스를 생성해야 존재할 수 있기에 반드시 new 연산자와 호출해야 한다.

- 클래스 내부에서 정의한 메서드는 기본적으로 프로토타입 메서드가 되나, 외부에서 프로토타입 메서드를 추가하는 방법도 있다.

Person.prototype.sayBye = function(){
    console.log(`Bye, ${this.name}!`);
}

- 정적 메서드가 바인딩된 클래스는 인스턴스의 프로토타입 체인상에 존재하지 않기에, 인스턴스로 클래스의 메서드를 상속받을 수 없다.