[JS study] 실전에서 쓰이는 클래스 익히기

자세한 내용은 [모던 자바스크립트] 클래스에 적어두었습니다.

필드, 생성자, 그리고 메서드

클래스는 보통 필드 - 생성자 - 메서드 순으로 작성된다.

class Info{
  // Class 필드
  name; 
  age;
  
  // Constructor
  constructor(name, age){ 
    this.name = name;
    this.age = age;
  }
}

const user = new Info("Choi", 26);

흔히들 객체와 유사하다고 생각을 해서 클래스를 프로퍼티와 많이 헷갈린다. 둘의 차이점을 중점으로 서술한다면 우선 필드는 클래스에서 값을 저장하는 메커니즘이다. 한마디로 필드는 클래스 스코프에서 변수의 개념으로 쓰이고 인스턴스에서 데이터를 저장하기 위해서는 반드시 필드를 사용해야 한다. 하지만 프로퍼티는 데이터를 저장하지 않는다.

메서드는 클래스 내부에서 어떤 로직을 수행할 때 사용하는 함수이다. 그리고 메서드 중에서 특별한 친구가 바로 생성자 이다. 위 첨부한 링크 '클래스'에 관해서 작성한 글에서도 자세하게 적어두었지만 new를 통해 클래스 인스턴스를 생성한다면 자동으로 빈 함수를 생성한다. 그 함수의 본문을 채워넣을 때 constructor의 내용이 채워진다. 그 이후에 클래스 내에서 정의한 프로퍼티, 메서드가 prototype에 저장된다.

따라서 클래스의 인스턴스를 생성한다면 가장 먼저 호출되는 것이 constructor 이다. 따라서 인스턴스 생성시 외부 값을 통해 객체의 필드 값을 초기화하고자 할 때 쓰인다.

인스턴스

클래스를 통해 추상화된 내용을 구체적인 값으로 저장하고 있는 객체를 인스턴스 라고 한다.

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

const user = new Info("Choi", 26);

Info에는 name과 age라는 필드가 적혀있지만 이것은 실제 값을 저장한 상태가 아니다. Info라는 개념을 name, age라는 필드를 가지는 객체로 추상화한 것일 뿐이다.

하지만 new연산자를 통해 생성된 user는 클래스와 달리 실제로 값을 가지고 있는 객체이다. user는 Info라는 개념을 추상화한 Info를 구체적인 값으로 저장하고 있는 객체인 것이다.