📝JS Class 공부 일지 - class의 구성

class 키워드를 통해 만든 클래스는 기본적으로

1. 프로퍼티 (필드)
2. 메서드

이렇게 두 가지로 구성된다.

각각에 대해 알아보자.

1. 프로퍼티 (필드)

class User{
  name;
  email;
  
  constructor(name, email){
    this.name = name;
    this.email = email;
  }
}

const user1 = new User("우테코", "woowacourse@gmail.com");

위 예시를 보면 User라는 클래스가 있다. User는 name, email 이렇게 두 가지의 변수를 가진다. 이 두 변수를 프로퍼티라고 부른다. 처음에는 이런 줄 알았다.

다음 이미지는 우테코 프리코스 2주차 공통 피드백 내용의 일부이다.

필드...? 값을 저장하는 녀석은 무조건 프로퍼티라 생각했는데 처음 보는 필드라는 친구가 있었다.

위 이미지는 관련 내용을 검색해보고, 가장 이해가 쉬운 답변을 찾아온 것이다. 간단히 요약하자면 다음과 같다.

❗클래스와 프로퍼티는 다음의 두 차이점을 보인다.

1. 필드는 클래스 레벨에서 값을 저장하는 메커니즘이다.
   - 필드는 클래스 스코프에서 변수의 개념으로 쓰인다.
   - 인스턴스에서 데이터를 저장하고 싶다면 필드를 사용해야 한다.
   
   
2. 프로퍼티는 데이터를 저장하지 않는다.
   • 프로퍼티는 get, set 메서드의 쌍이다.
   • 프로퍼티는 데이터를 저장하지 않고, 필드에 접근하여 그 값을 변경할 뿐이다.

클래스의 인스턴스를 생성해서 값을 저장할 때 실제로 그 값을 저장하고 있는 녀석을 필드라고 부른다는 점을 새로 알게 되었다.

2. 메서드

class User{
  name;
  email;

  constructor(name, email){
    this.name = name;
    this.email = email;
  }
  
  printName(){
    console.log(this.name);
  }
  
  printEmail(){
    console.log(this.email);
  }
}

const user1 = new User("우테코", "woowacourse@gmail.com");

user1.printName(); // 우테코 출력
user1.printEmail(); // woowacourse@gmail.com 출력

이전 프로퍼티 클래스 예시에 printName, printEmail이란 함수가 클래스에 추가되어 있다. 각 함수들을 보면 this로 내부 필드에 접근해 이를 출력하는 역할을 수행한다.

이처럼 클래스 내부에서 어떤 로직을 수행할 때 사용하는 함수를 메서드라고 부른다. 난 메소드 보단 메서드가 더 좋아 메서드라 부른다😁😁

메서드 중 특이한 녀석이 하나 있다. 바로 constructor이다.

우리가 new를 통해 클래스의 인스턴스를 생성할 때 js는 자동으로 빈 함수를 생성한다. 그리고 그 함수의 본문을 채워넣을 때 constructor의 내용을 채워넣는다. 그 후 클래스 내에 정의한 프로퍼티, 메서드를 prototype에 저장한다.

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

(추가) 인스턴스란?

앞서 여러 개념을 설명할 때 인스턴스라는 말을 자주 사용했는데 인스턴스가 무엇인지 정확히 알고자 정보를 찾아보았다.

wikipedia에서 찾은 객체지향 프로그래밍에서 인스턴스의 정의이다. 정리해보자면 다음과 같다.

인스턴스는 프로그램의 런타임 중에 존재하는 모든 객체의 구체적인 발생이다.

따라서 클래스를 통해 추상화된 내용을 구체적인 값으로 저장하고 있는 각 객체를 인스턴스라고 부른다고 할 수 있다. 예시를 보자.

class User{
  name;
  email;
  
  constructor(name, email){
    this.name = name;
    this.email = email;
  }
}

const user1 = new User("우테코", "woowacourse@gmail.com");

처음에 프로퍼티 개념을 이해하기 위해 사용했던 예시이다. 여기서 User는 클래스, user1은 User클래스의 인스턴스이다.

User에는 name, email라는 필드가 적혀져 있지만 이는 실제 값을 저장한 상태가 아니다. 다시 말해 User는 유저라는 개념을 name, email이라는 필드를 가지는 객체로 추상화 한 것일 뿐이다.

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

다소 어렵게 느껴질 수 있을 개념이나 천천히 읽어본다면 의외로 어렵지 않게 이해할 수 있을 것이다.