JS Deep Dive 25장. 클래스 (2)

흔히들 클래스를 붕어빵 틀, 인스턴스를 붕어빵에 비유하곤 한다. 그럼 팥앙금은 인스턴스 프로퍼티인가..?

클래스 인스턴스가 생성되는 과정

클래스로 인스턴스가 어떻게 만들어지는지 그 라이프사이클을 한번 살펴보자.

1. 인스턴스 생성과 this 바인딩
   new SomeClass() 이렇게 호출하면, constructor 내부 코드가 실행되기 전에 암묵적으로 빈 객체가 만들어진다.
   이 빈 객체가 인스턴스다. (아직 완성되지는 않았지만)
   이때 이 객체의 프로토타입으로 클래스의 prototype이 가리키는 객체가 설정된다.
   그리고 this에도 바인딩된다.
2. 인스턴스 초기화
   constructor() 가 실행되면서 초기화 과정을 거친다.
3. 인스턴스 반환
   모든 처리가 끝나면 완성된 인스턴스가 바인딩된 this가 암묵적으로 반환된다.
   이게 무슨소리냐. 아까 처음에 만들었던 객체가 반환된다는 소리다. 객체가 this에 바인딩되지 않았는가. 그러니까 this는 곧 인스턴스를 가리키고, 그것이 반환된 것이다.
   그러면 const newInstance = new MyClass(); 이렇게 하면 식별자에 반환된 객체가 할당되는 것이다.

프로퍼티

클래스에는 여러가지 프로퍼티가 있다. 하나씩 알아보자.

인스턴스 프로퍼티

클래스 constructor 내부에 정의된 프로퍼티를 말한다.

class Person {
  constructor(name) {
    this.name = name; // 요런것들
  }
}

아까 위에서 봤던 라이프사이클을 생각해보자.
constructor가 실행되기 전에 this에는 이미 빈 객체(인스턴스)가 바인딩되어있다.
그래서 this.name = name; 을 하면 인스턴스 프로퍼티가 초기화되는 것이다.

접근자 프로퍼티

accessor property.
말 그대로 접근자를 통해서만 접근할 수 있는 프로퍼티다.
메서드의 형태이지만, 사용할 때는 일반 프로퍼티처럼 사용이 가능한 녀석이다.

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
  
  // getter 함수
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
  
  // setter 함수
  set fullName(name) {
    [this.firstName, this.lastName] = name.split(' ');
  }
}

const nayeon = new Person('Nayeon', 'Im');

// 이렇게 일반 프로퍼티처럼 쓸 수 있다.
nayeon.fullName = 'Nayeon Im';
console.log(nayeon.fullName); // Nayeon Im

위의 예시처럼 프로퍼티의 취득과 할당 과정에 로직을 끼워넣을 수 있다.
그러면 어떤 것도 가능하냐! 할당될 때마다 로그를 출력한다든지 이런 것이 가능한 것이다.

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
  
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
  
  set fullName(name) {
    console.log(`새로운 fullName으로 ${name}이 할당됨..!`);
    [this.firstName, this.lastName] = name.split(' ');
  }
}

클래스 필드

Java, C# 같은 전통적 객체지향 언어처럼, 자바스크립트 버전이 ES2022가 되면서부터는 클래스 필드를 공식적으로 사용할 수 있게 되었다.
그게 뭐냐면, 아래와 같이 쓸 수 있는 문법이다.

class Counter {
  // 1. 공개 클래스 필드 정의 (public)
  count = 0;
  
  // 2. 비공개 클래스 필드 정의 (private)
  #secretKey = "1234";
  
  // 3. 정적 필드 정의 (static)
  static category = "Utility";
  static #secretCategory = "비밀이야.."; // static이면서 동시에 private도 가능!
  
  increment() {
    this.count++;
    console.log(this.#secretKey); // 내부 메서드에서는 private에 접근 가능
  }
}

const counter = new Counter();
counter.#secretKey; // 여기서는 접근 불가하다

Counter.category; // Utility

이렇게 쓰면 뭐가 좋으냐.
class로 진정한 캡슐화가 가능해진다.
class 내부에서만 참조되어야 하는 private 변수를 만듦으로써, 외부에서 참조되거나 변형될 위험을 방지할 수 있게 되는 것이다.
그리고 복잡한 문법과 우회법(workaround)을 쓸 필요 없이, 간단하게 저렇게 사용할 수 있다.
Java나 C# 개발자들은 공감하지 못하겠지만.. JS 개발자.. 특히 node 개발자에게는 참 감사한 일이다...

 

... 다음 글에 계속