[JS] 클래스 (Class)

Dragony·2022년 1월 14일
0

자바스크립트

목록 보기
1/1




1. 자바스크립트의 클래스

자바스크립트는 프로토타입 기반(prototype based) 객체지향 언어다. 프로토타입 기반 객체지향 언어는 클래스가 필요 없는 (class free) 언어라서 ES5 에서는 클래스 없이도 객체와 생성자 함수, 프로토타입을 통해 객체지향 언어의 상속을 구현하였다.

하지만 클래스 기반 언어에 익숙한 많은 개발자들을 혼란스럽게 했고, 마침내 ES6에 클래스 문법이 추가되었다. 그렇다고 ES6의 클래스가 기존의 프로토타입 기반 모델을 폐지하고, 새롭게 클래스 기반 모델을 제공하는 것이 아니고, 일정 부분은 프로토타입을 활용하고 있다.

클래스와 생성자 함수는 모두 프로토타입 기반의 인스턴스를 생성하고 매우 유사하게 동작하지만, 정확히 동일하게 동작하지는 않는다.
클래스는 생성자 함수보다 엄격하며 생성자 함수에서는 제공하지 않는 기능도 제공한다.

클래스와 생성자 함수 차이

구분클래스생성자 함수
new 연산자new 연산자 없이 호출 시 에러 발생일반 함수로서 호출
extends, super 키워드제공제공X
호이스팅발생하지 않는 것처럼 동작호이스팅 발생
strict mode암묵적으로 strict mode가 지정되어 실행되며 해제 불가암묵적으로 지정되지 않음

이 외에도 몇가지 차이가 있다.

JS 에서 클래스란?

MDN Web Docs 참조
MDN 문서에서는 자바스크립트에서 클래스를 아래와 같이 정의한다.

Class는 객체를 생성하기 위한 템플릿

클래스는 말 그대로 객체를 생성하기 위한 Templete, 틀과 같은 역할을 한다.
OOP 언어를 사용해본 사람이라면 꽤 익숙한 정의다.



2. 클래스 정의

클래스는 class 키워드를 사용하여 정의한다. (일반적으로 클래스 이름은 파스칼 케이스를 사용한다)

// 클래스 선언문
class Person {}

일반적이지는 않지만 표현식으로 클래스를 정의할 수도 있다.

// 익명 클래스 표현식
const Person = class {};

// 기명 클래스 표현식
const Person = class MyClass {};

클래스를 표현식으로 정의할 수 있다는 것은, 클래스가 값으로 사용할 수 있는 일급 객체라는 것을 의미한다. 즉, 클래스는 일급 객체로서 다음과 같은 특징을 갖는다.

클래스 특징

  • 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다.
  • 변수나 자료구조 (객체, 배열 등) 에 저장할 수 있다.
  • 함수의 매개변수로 전달할 수 있다.
  • 함수의 반환값으로 사용할 수 있다.

좀더 자세히 말하면, 클래스는 함수이므로 값처럼 사용할 수 있는 일급객체다.


클래스 몸체에는 0개 이상의 메서드만 정의할 수 있다. 클래스 몸체에서 정의할 수 있는 메서드는 아래 3가지와 같다.

  • Constructor (생성자)
  • 프로토타입 메서드 (인스턴스 메서드)
  • 정적 메서드
class Person {
	// 생성자
    constructor(name) {
        // 인스턴스 생성 및 초기화
        this.name = name; // name 프로퍼티는 public 하다    
    }

    // 프로토타입 메서드
    sayHi() {
        console.log(`Hi! My name is ${this.name}`);
    }

    // 정적 메서드
    static sayHello(){
        console.log('Hello!');
    }
}

// 인스턴스 생성
const me = new Person('Lee');

// 인스턴스의 프로퍼티 참조
console.log(me.name); // Lee
// 프로토타입 메서드 호출
me.sayHi();             // Hi! My name is Lee
// 정적 메서드 호출
Person.sayHello(); // Hello!

참고로, 위 Persion 이라는 클래스를 생성자 함수로 만들면 아래와 같다.

var Person = (function(){
    // 생성자 함수
    function Person(name){
        this.name = name;
    }

    // 프로토타입 메서드
    Person.prototype.sayHi = function(){
        console.log('Hi! My name is '  + this.name);
    };

    // 정적 메서드
    Person.sayHello = function(){
        console.log('Hello!');
    };

    // 생성자 함수 반환
    return Person;
}());


3. 클래스 호이스팅

클래스는 함수로 평가된다.

console.log(typeof Person); // function

클래스 선언문으로 정의한 클래스는 함수 선언문과 같이 런타임 이전에 먼저 평가되어 함수 객체를 생성한다. 이때 생성되는 함수 객체는 생성자 함수로써 호출할 수 있는 함수, 즉 constructor 다. 이 시점에 프로토타입도 더불어 생성된다.
(다시 말하면 클래스는 인스턴스를 생성하기 위한 생성자 함수이다.)

단, 클래스는 클래스 정의 이전에 참조할 수 없다.

console.log(Person);
// ReferenceError: Cannot access 'Person' before initialization

// 클래스 선언문
class Person{}

클래스 선언문은 마치 호이스팅이 발생하지 않는 것처럼 보이나 그렇지 않다. 다음 예제를 살펴보자.

const Person = '';

{

    // 호이스팅이 발생하지 않는다면 '' 이 출력되어야 한다.
    console.log(Person);
    // ReferenceError: Cannot access 'Person' before initialization

    // 클래스 선언문 
    class Person {}
}

클래스 선언문도 변수 선언, 함수 정의와 마찬가지로 호이스팅이 발생한다. 단, 클래스는 let, const 키워드로 선언한 변수처럼 호이스팅된다.



4. 인스턴스 생성

클래스는 생성자 함수이며 new 연산자와 함께 호출되어 인스턴스를 생성한다.

class Person {}
const me = new Person();
console.log(me);

const Person2 = class MyClass {};
const me2 = new Person2();
console.log(me2);


5. 메서드

클래스 몸체에서 정의할 수 있는 메서드는 아래 세가지와 같다.

  • 생성자 (constructor)
  • 프로토타입 메서드
  • 정적 메서드

(1) 생성자 (constructor)

constructor 는 인스턴스를 생성하고 초기화하기 위한 특수한 메서드다. constructor 는 이름을 변경할 수 없다.

class Person {
	// 생성자
    constructor(name) {
        // 인스턴스 생성 및 초기화
        this.name = name; // name 프로퍼티는 public 하다    
    }
}

(2) 프로토타입 메서드

생성자 함수를 사용하여 인스턴스를 생성하는 경우, 프로토타입 메서드를 생성하기 위해서는 다음과 같이 명시적으로 프로토타입에 메서드를 추가해야 한다.

function Person(name){
    this.name = name;
}

Person.prototype.sayHi = function () {
    console.log(`Hi! my name is ${this.name}`);
};

const me = new Person('Lee');
me.sayHi(); // Hi! my name is Lee

클래스 몸체에서 정의한 메서드는 생성자 함수에 의한 객체 생성 방식과는 다르게, 클래스의 prototype 프로퍼티에 메서드를 추가하지 않아도 기본적으로 프로토타입 메서드가 된다.

class Person {
    // 생성자 
    constructor(name){
        this.name = name;
    }

    //  프로토타입 메서드
    sayHi() {
        console.log(`Hi! My name is ${this.name}`);
    }
}

const me = new Person('Lee');
me.sayHi(); // Hi! My name is Lee

(3) 정적 메서드

정적(static) 메서드는 인스턴스를 생성하지 않아도 호출할 수 있는 메서드를 말한다.

생성자 함수의 경우 정적 메서드를 생성하기 위해서는 다음과 같이 명시적으로 생성자 함수에 메서드를 추가해야한다.

function Person(name){
    this.name = name;
}

Person.sayHi = function () {
    console.log('Hi!');
};

Person.sayHi(); // Hi!

클래스는 메서드에 static 키워드를 붙이면 정적 메서드(클래스 메서드)가 된다.

class Person {
    // 생성자 
    constructor(name){
        this.name = name;
    }

    //  정적 메서드
    static sayHi() {
        console.log(`Hi!`);
    }
}

Person.sayHi(); // Hi!

정적 메서드와 프로토타입 메서드의 차이

  1. 정적 메서드와 프로토타입 메서드는 자신이 속해있는 프로토타입 체인이 다르다.
  2. 정적 메서드는 클래스로 호출하고 프로토타입 메서드는 인스턴스로 호출한다.
  3. 정적 메서드는 인스턴스 프로퍼티를 참조할 수 없지만, 프로토타입 메서드는 인스턴스 프로퍼티를 참조할 수 있다.


6. 프로퍼티

(1) 인스턴스 프로퍼티

  • 인스턴스 프로퍼티는 constructor 내부에 정의해야 한다.
  • counstructor 내부에서 this에 추가한 프로퍼티는 언제나 클래스가 생성한 인스턴스의 프로퍼티가 된다.
  • ES6의 클래스는 다른 객체지향 언어처럼 private, public, protected 키워드와 같은 접근 제한자를 지원하지 않는다. 따라서 인스턴스 프로퍼티는 언제나 public 하다.

(2) 접근자 프로퍼티

  • 접근자 프로퍼티는 자체적으로 값을 갖지 않고 다른 데이터 프로퍼티의 값을 읽거나 저장할 때 사용하는 접근자 함수로 구성된 프로퍼티다.
const person = {
    // 데이터 프로퍼티 (클래스 필드)
    firstName : 'Yongju',
    lastName : 'Lee',

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

// 데이터 프로퍼티를 통한 프로퍼티 값의 참조
console.log(`${person.firstName} ${person.lastName}`); // Yongju Lee

// 접근자 프로퍼티를 통한 프로퍼티 값의 저장
// 접근자 프로퍼티 fullName에 값을 저장하면 setter 함수가 호출된다.
person.fullName = 'Heegun Lee';
console.log(person); // { firstName: 'Heegun', lastName: 'Lee', fullName: [Getter/Setter] }

// 접근자 프로퍼티를 통한 프로퍼티 값의 참조
// 접근자 프로퍼티 fullName에 접근하면 getter 함수가 호출된다.
console.log(person.fullName); // Heegun Lee

(3) private 필드 정의 제안

TC39 프로세스의 stage 3에는 private 필드를 정의할 수 있는 새로운 표준 사양이 제안되어 있다.
private 필드의 선두에는 # 을 붙여준다. private 필드를 참조할 때도 #을 붙여주어야 한다.

public 필드는 어디서든 참조할 수 있지만, private 필드는 클래스 내부에서만 참조할 수 있다. 클래스 외부에서 private 필드에 직접 접근할 수 있는 방법은 없고, 접근자 프로퍼티를 통해 간접적으로 접근하는 방법은 유효하다.
private 필드는 반드시 클래스 몸체에 정의해야한다. private 필드를 직접 constructor 에 정의하면 에러가 발생한다.

class Person {
    // private 필드 정의 
    #name = '';
    
    constructor(name) {
        this.#name = name;
    }

    // 접근자 프로퍼티
    get name(){
        // private 필드를 참조하여 trim 한 다음 반환한다.
        return this.#name.trim();
    }
}

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



접근 가능성publicprivate
클래스 내부OO
자식 클래스 내부OX
클래스 인스턴스를 통한 접근OX

(4) static 필드 정의 제안

클래스에 static 키워드를 사용하여 정적 메서드를 정의할 수 있다. 하지만 static 키워드를 사용하여 정적 필드를 정의할 수는 없었다. 하지만 TC39 프로세스의 stage 3에는 private 필드를 정의할 수 있는 새로운 표준 사양이 제안되어 있다.

class MyMath {
    // static 필드 정의 
    static PI = 22 / 7;
    
    // static private 필드 정의
    static #num = 10;

    static increment(){
        return ++MyMath.#num;
    }
}


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



참조

모던 자바 스크립트 Deep Dive
코어 자바 스크립트

profile
안녕하세요 :) 제 개인 공부 정리 블로그입니다. 틀린 내용 수정, 피드백 환영합니다.

0개의 댓글