생성자(Constructor)란??

자바든 자바스크립트든 클래스를 다룬다면 constructor에 대해서는 꼭 들어봤을 겁니다. 저도 그렇긴하지만 공부를 게을리해서 이 constructor라는 게 뭔지를 잘 이해를 못하고 있었어요. 그러니 이번 포스팅에선 여기에 대해 제대로 이해해두려고 합니다.

 

공식 페이지에서는 constructor란 클래스 내에서 객체를 생성하고 초기화하기 위한 특별한 메서드라고 소개하고 있습니다. 즉, 객체의 기본 상태(state)를 설정하는 공간인 것이죠. 이건 함수와는 다른 방식으로 클래스 객체가 인자를 전달받도록 할 수 있습니다.

class People {
	constructor(num) {
    	this.age = num;
    }
}

let han = new Han(26);
console.log(han.age); // 26 출력

이런 식으로 constructor는 외부에서 인자를 받아들여와 초기 상태 설정에 이용하는데 사용할 수도 있습니다. 함수형 컴포넌트가 인자를 받는 방식과 상당히 유사하죠?

 

constructor는 클래스 개념에서는 빠지지 않고 꼭 등장하는 개념입니다. 자바스크립트도 객체지향 프로그래밍 언어이기 때문에 이런 개념들이 존재합니다. 당연히 클래스 간의 상속도 존재하죠. 거기에 대해서 살펴보도록 합시다.

class Polygon {
  constructor(height, width) {
    this.name = 'Polygon';
    this.height = height;
    this.width = width;
  }
  sayName() {
    console.log('Hi, I am a ', this.name + '.');
  }
}

class Square extends Polygon {
  constructor(length) {
    this.height; // 참조오류가 발생합니다. super가 먼저 호출되어야 합니다.

    // 여기서, 부모클래스의 생성자함수를 호출하여 높이값을 넘겨줍니다.
    // Polygon의 길이와 높이를 넘겨줍니다.
    super(length, length);

    // 참고: 파생 클래스에서 super() 함수가 먼저 호출되어야
    // 'this' 키워드를 사용할 수 있습니다. 그렇지 않을 경우 참조오류가 발생합니다.
    this.name = 'Square';
  }

  get area() {
    return this.height * this.width;
  }

  set area(value) {
    this.area = value;
  }
}

이 예제 코드는 MDN에서 제공된 예제 코드들입니다. 보다시피 extends를 이용한 클래스의 상속은 자바스크립트에선 드문 일이 아닙니다. 한가지 특이할 점이라고 한다면 super의 존재겠죠.

 

자식 클래스인 Square는 부모 클래스로부터 상태를 물려받습니다. 그렇기 때문에 name, height, width를 사용할 수 있죠. 하지만 이걸 그냥 사용할 수는 없습니다. 그 전에 부모의 초기화 함수부터 실행시켜줘야 합니다.

 

그래요. 자식 클래스가 물려받는 건 state만이 아니라 constructor도 입니다. 그러니 super를 실행하여 부모 클래스의 constructor를 실행시키기 전에는 초기화되지 않은 상태들을 사용할 수 없습니다. 그 후에 자식 클래스에서 초기화를 진행시켜야 하겠죠.

 

super는 부모 오브젝트의 함수를 호출할 때 사용됩니다. 단지 super()만 사용하는건 생성자 함수를 사용할 때에요.

super의 특징이라면, super를 이용하여 부모 클래스의 속성을 삭제할 수 없습니다. 단지 참조만 하라는 거겠죠.

 

super()와 super. 의 차이를 잘 이해하고 넘어가는게 중요하겠네요.

 

참조

super - JavaScript | MDN (mozilla.org)