[JavaScript] 클래스와 프로퍼티

인스턴스 프로퍼티

인스턴스 프로퍼티는 constructor 내부에서 정의해야 한다.

class Person {
  constructor(name) {
    // 인스턴스 프로퍼티
    this.name = name;
  }
}

const me = new Person('Jung');
console.log(me); // Person {name: "Jung"}

constructor 내부 코드가 실행되기 이전에 constructor 내부의 this에는 이미 클래스가 암묵적으로 생성한 인스턴스인 빈 객체가 바인딩되어 있다.

생성자 함수에서 생성자 함수가 생성할 인스턴스의 프로퍼티를 정의하는 것과 마찬가지로, constructor 내부에서 this에 인스턴스 프로퍼티를 추가한다. 이로써 클래스가 암묵적으로 생성한 빈 객체인 인스턴스에 프로퍼티가 추가되어 인스턴스가 초기화된다.

class Person {
  constructor(name) {
    this.name = name; // name 프로퍼티는 public하다.
  }
}

const me = new Person('Jung');

console.log(me.name); // Jung

constructor 내부에서 this에 추가한 프로퍼티는 언제나 클래스가 생성한 인스턴스의 프로퍼티가 된다.

ES6의 클래스는 다른 객체지향 언어처럼 private, public, protected 키워드와 같은 접근 제한자를 지원하지 않는다. 하지만 private 필드가 정식으로 채택되면서 인스턴스 프로퍼티는 public 혹은 private일 수 있게 됐다.

 

접근자 프로퍼티

접근자 프로퍼티는 자체적으로는 값([[Value]] 내부 슬롯)을 갖지 않고 다른 데이터 프로퍼티의 값을 읽거나 저장할 때 사용하는 접근자 함수로 구성된 프로퍼티다.

접근자 함수에는 getter 함수와 setter 함수가 있다. getter는 인스턴스 프로퍼티에 접근할 때마다 프로퍼티의 값을 조작하거나 별도의 행위가 필요할 때 사용한다. getter는 메서드 이름 앞에 get 키워드를 사용해 정의한다. setter는 인스턴스 프로퍼티에 값을 할당할 때마다 프로퍼티의 값을 조작하거나 별도의 행위가 필요할 때 사용한다. setter는 메서드 이름 앞에 set 키워드를 사용해 정의한다.

getter와 setter 이름은 인스턴스 프로퍼티처럼 사용된다. 즉, getter는 호출하는 것이 아니라 프로퍼티처럼 참조하는 형식으로 사용하며, 참조 시 내부적으로 getter가 호출된다. setter도 호출하는 것이 아니라 프로퍼티처럼 값을 할당하는 형식으로 사용하며, 할당시 내부적으로 setter가 호출된다.

getter는 이름 그대로 무언가를 취득할 때 사용하므로 반드시 무언가를 반환해야 하고 setter는 무언가를 프로퍼티에 할당해야 할 때 사용하므로 반드시 매개변수가 있어야 한다. setter는 단 하나의 값만 할당받기 때문에 단 하나의 매개변수만 선언할 수 있다.

const person = {
  firstName: 'ek',
  lastName: 'jung',

  // fullName은 접근자 함수로 구성된 접근자 프로퍼티
  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  },
  set fullName(name) {
    [this.firstName, this.lastName] = name.split(' ');
  }
};

console.log(`${person.firstName} ${person.lastName}`); // ek jung

person.fullName = 'ek jung';
console.log(person); // {firstName: "ek", lastName: "jung"}

console.log(person.fullNmae); // ek jung

// 접근자 프로퍼티는 get, set, enumerable, configurable 프로퍼티 어트리뷰트를 갖는다.
console.log(Object.getOwnPropertyDescriptor(person, 'fullName');
// {get: f, set: f, enumerable: true, configurable: true}

접근자 프로퍼티는 클래스에서도 사용할 수 있다. 위 예제를 클래스로 표현하면 아래와 같다.

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }

  get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
  
  set fullName(name) {
    [this.firstName, this.lastName] = name.split(' ');
  }
}

const me = new Person('ek', 'jung');

console.log(`${me.firstName} ${me.lastName}`); // ek jung

me.fullName = 'ek jung';
console.log(me); // {firstName: "ek", lastName: "jung"}

console.log(me.fullNmae); // ek jung

console.log(Object.getOwnPropertyDescriptor(person.prototype, 'fullName');
// {get: f, set: f, enumerable: true, configurable: true}

클래스의 메서드는 기본적으로 프로토타입 메서드가 되므로, 클래스의 접근자 프로퍼티 또한 인스턴스 프로퍼티가 아닌 프로토타입의 프로퍼티가 된다.

Object.getOwnPropertyNames(me); // ["firstName", "lastName"]
Object.getOwnPropertyNames(Object.getPrototypeOf(me)); // ["constructor", "fullName"]

 

클래스 필드 정의 제안

클래스 필드란?

클래스 필드는 클래스 기반 객체지향 언어에서 클래스가 생성할 인스턴스의 프로퍼티를 가리키는 용어다. 클래스 기반 객체지향 언어인 자바의 클래스 정의를 살펴보면, 자바의 클래스 필드는 마치 클래스 내부에서 변수처럼 사용된다.

// 자바의 클래스 정의
public class Person {
  // ① 클래스 필드 정의: 클래스 필드는 클래스 몸체에 this 없이 선언
  private String firstName = "";
  private String lastName = "";
  
  // 생성자
  Person(String firstName, String lastName) {
    // ③ this는 언제나 클래스가 생성할 인스턴스를 가리킴
    this.firstName = firstName;
    this.lastName = lastName;
  }
  
  public String getFullName() {
    // ② 클래스 필드 참조: this 없이도 클래스 필드 참조 가능
    return firstName + " " + lastName;
  }
}

자바스크립트의 클래스에서 인스턴스 프로퍼티를 선언하고 초기화하려면 반드시 constructor 내부에서 this에 프로퍼티를 추가해야 한다. 하지만 자바의 클래스에서는 위 예제 ①과 같이 클래스 필드를 마치 변수처럼 클래스 몸체에 this 없이 선언한다.

자바스크립트의 클래스에서 인스턴스 프로퍼티를 참조하려면 반드시 this를 사용하여 참조해야 한다. 하지만 자바의 클래스에서는 위 예제 ②와 같이 this를 생략해도 클래스 필드를 참조할 수 있다.

클래스 기반 객체지향 언어의 this는 언제나 클래스가 생성할 인스턴스를 가리키고 있어서, 위 예제 ③과 같이 this는 주로 클래스 필드가 생성자 또는 메서드의 매개변수 이름과 동일할 때 클래스 필드임을 명확히 하기 위해 사용한다.

자바스크립트에서 클래스 필드 

자바스크립트의 클래스 몸체에는 원래 메서드만 선언할 수 있다. 따라서 이전에는 클래스 몸체에 자바와 유사하게 클래스 필드를 선언하면 문법 에러가 발생했었다. 하지만 자바스크립트에서도 인스턴스 프로퍼티를 마치 클래스 기반 객체지향 언어의 클래스 필드처럼 정의할 수 있는 새로운 표준 사양인 "Class field declarations"가 제안되어 ECMAScript 2022부터 정식 채택된 상태다. 따라서 이제는 아래와 같이 클래스 필드를 클래스 몸체에 정의할 수 있다.

class Person {
    name = 'Jung';
}

const me = new Person('Jung');

클래스 필드 주의 사항

클래스 몸체에서 클래스 필드를 정의할 때 this에 클래스 필드를 바인딩해서는 안된다. this는 클래스의 constructor와 메서드 내에서만 유효하다.

class Person {
  this.name = ''; // SyntaxError: Unexpected token '.'
}

클래스 필드를 참조하는 경우 자바와 같은 클래스 기반 객체지향 언어에서는 this를 생략할 수 있지만, 자바스크립트에서는 클래스 필드 참조 시에도 this를 반드시 사용해야 한다.

class Person {
  // 클래스 필드
  name = 'Jung';
  
  constructor() {
    console.log(name); // ReferenceError: name is not defined
  }
}

new Person();

클래스 필드에 초기값을 할당하지 않으면 undefined를 갖는다.

class Person {
  name;
}

const me = new Person();
console.log(me); // Person {name: undefined}

인스턴스를 생성할 때 외부의 초기값으로 클래스 필드를 초기화해야 할 필요가 있다면 constructor에서 클래스 필드를 초기화해야 한다.

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

const me = new Person('Jung');
console.log(me); // Person {name: "Jung"}

위 예제처럼 인스턴스를 생성할 때 클래스 필드를 초기화할 필요가 있다면 constructor 밖에서 클래스 필드를 정의할 필요가 없다. 클래스 필드를 초기화할 필요가 있다면 어차피 constructor 내부에서 클래스 필드를 참조하여 초기값을 할당해야 한다. 이때, this, 즉 클래스가 생성한 인스턴스에 클래스 필드에 해당하는 프로퍼티가 없다면 자동 추가되기 때문이다.

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

const me = new Person('Jung');
console.log(me); // Person {name: "Jung"}

함수는 일급 객체이므로 함수를 클래스 필드에 할당할 수 있다. 따라서 클래스 필드를 통해 메서드를 정의할 수도 있다.

class Person {
  name = 'Jung';
  
  getName = function () {
    return this.name;
  }
  
  // 화살표 함수로도 정의 가능
  // getName = () => this.name;
}

const me = new Person();
console.log(me); // Person {name: "Jung", getName: f}
console.log(me.getName()); // Jung

이처럼 클래스 필드에 함수를 할당하는 경우, 이 함수는 프로토타입 메서드가 아닌 인스턴스 메서드가 된다. 모든 클래스 필드는 인스턴스 프로퍼티가 되기 때문이다. 따라서 this 바인딩이 꼭 필요하거나 실제로 인스턴스 별로 구현이 다른 함수일 경우를 제외하고 클래스 필드에 함수를 할당하는 것은 권장되지 않는다.

 

private 필드 정의 제안

자바스크립트는 캡슐화를 완전하게 지원하지 않는다. ES6의 클래스도 생성자 함수와 마찬가지로 다른 클래스 기반 객체지향 언어에서 지원하는 private, public, protected 키워드와 같은 접근 제한자를 지원하지 않는다. 따라서 인스턴스 프로퍼티는 인스턴스를 통해 클래스 외부에서 언제나 참조할 수 있다. 즉, 언제나 public이었다. 하지만 private 필드를 정의할 수 있는 새로운 표준 사양이 제안되어 ECMAScript 2022부터 정식으로 채택되었다.

private 필드의 선두에는 #을 붙여준다. private 필드를 참조할 때도 #을 붙여주어야 한다.

class Person {
  #name = '';
  
  constructor(name) {
    this.#name = name;
  }
}

const me = new Person('Jung');

console.log(me.#name); // SyntaxError: Private field '#name' must be declared in an enclosing class

public 필드는 어디서든 참조할 수 있지만 private 필드는 클래스 내부에서만 참조할 수 있다. 따라서 클래스 외부에서 private 필드에 직접 접근할 수 있는 방법은 없다. 다만 접근자 프로퍼티를 통해 간접적으로 접근하는 방법은 유효하다.

class Person {
  #name = '';
  
  constructor(name) {
    this.#name = name;
  }
  
  get name() {
    return this.#name.trim();
  }
}

const me = new Person('  Jung  ');
console.log(me.name); // Jung

private 필드는 반드시 몸체에 정의해야 한다. 만약 private 필드를 직접 constructor에 정의하면 에러가 발생한다.

class Person {
  constructor(name) {
    this.#name = name;
    // SyntaxError: Private field '#name' must be declared in an enclosing class
  }
}

 

static 필드 정의 제안

클래스에서는 static 키워드를 사용하여 정적 메서드를 정의할 수 있지만, 정적 필드는 정의할 수 없었다. 하지만 static public 필드, static private 필드, static private 메서드를 정의할 수 있는 새로운 표준 사양인 "Static class features"가 제안되어 ESCAScript 2022부터 정식으로 채택되었다.

class MyMath {
  // static public 필드 정의
  static PI = 22 / 7;
  
  // static private 필드 정의
  static #num = 10;
  
  // static 메서드
  static increment() {
    return ++MyMath.#num;
  }
}

console.log(MyMath.PI); // 3.142857142857143
console.log(MyMath.increment()); // 11

 

---

참고

 

모던 자바스크립트 Deep Dive

상부한 범용 애플리케이션 개발 언어로 성장했습니다. 따라서 자바스크립트를 학습하는 방식도 이에 걸맞게 변화해야 하며, 이 책은 자바스크립트의 기본 개념과 동작 원리를 깊이 있게 학습하고자 하는 독자를 위해 기획되었습니다. 《모던 자바스크립트 Deep Dive》에서는 자바스크립트를 둘러싼 기본 개념을 정확하고 구체적으로 설명하고, 자바스크립트 코드의 동작 원리를 집요하게 파헤칩니다. 따라서 여러분이 작성한 코드가 컴퓨터 내부에서 어떻게 동작할 것인지 예측

저자

이웅모

출판

위키북스

출판일

2020.09.25