📝JS Class 공부 일지 - 생성자 함수와 class의 차이

😭 동기(?)

처음 자바스크립트를 공부했을 때는 DOM API를 활용한 프로그래밍만을 했었다. 프로그래머스 과제 테스트를 처음 풀었을 때의 코드만 보더라도 처참했던 과거 실력을 확인할 수 있다. (프로그래머스 프로그래밍 언어 검색 (첫 시도) 참조)

변화가 필요함을 느껴 과제테스트의 정답을 보았다. 정답을 참고하여 객체를 활용한 방식을 익혀보고, 이를 적용해 새롭게 문제를 해결해보며 어느정도 실력이 쌓였다고 착각했었다. (프로그래머스 프로그래밍 언어 검색 (완) 참조)

코드를 보면 알겠지만 나는 함수를 통해 객체를 만드는 방법만을 사용해보았다. 근데 이게 웬걸? 우테코 5기 프리코스에 주어진 코드들은 class를 통해 객체를 만들어 놓았다. 작은 변화에도 구현이 망설여지는 내 모습을 보며 근본적인 공부가 필요함을 느끼게 되었다.

이번 기회에 공부해보자 싶어 프리코스 기간동안 모던 자바스크립트 튜토리얼을 보며 근본적인 공부를 해나갔고, 이때 공부한 class에 대해 정리하고자 한다.

❗생성자 함수 vs class

생성자 함수랑 class의 차이가 뭘까?

일단 내가 공부를 시작한 이유는 위 질문을 해결하기 위해서였다. 생성자 함수의 예시를 보자.

function User(name) {
  this.name = name;

  this.callName = () => {
    console.log(this.name);
  };
}

const user = new User("우테코");
user.callName();

함수로 만들어진 User에 new를 붙여 생성자 함수로 사용한 예시이다. 위 코드를 실행시키면 우테코가 콘솔에 출력된다.

마치 클래스를 만들어 인스턴스를 생성한 것과 같이 동작한다. 동작 원리를 살펴보니 위 코드는 다음과 같은 순서로 동작하게 된다.

1. 빈 객체를 생성해 this에 할당한다.
2. 함수 본문을 실행시켜 this에 프로퍼티를 추가시킨다.
3. this를 반환한다.

이번엔 class의 예시를 보자.

class User{
  constructor(name){
    this.name = name;
  }
  
  callName(){
	console.log(this.name);
  }
}

const user = new User("우테코");
user.callName();

이전 생성자 함수의 예시와 같은 결과를 가지는 예시이다. 이렇게만 보면 new를 통해 인스턴스의 프로퍼티를 초기화했고, 메서드를 호출하여 프로퍼티의 값을 콘솔에 출력해준다는 점에서 두 예시가 완전히 동일해보인다.

class의 동작 원리를 찾아보니 위 코드는 다음과 같은 순서로 동작하게 된다.

1. User라는 이름을 가진 함수를 만든다.
   1-1. 함수 본문은 생성자 메서드에서 가져온다.
   1-2. 생성자 메서드가 없다면 본문이 비워진채로 함수가 만들어진다.
2. 클래스 내에 정의한 프로퍼티, 메서드를 User.prototype에 저장한다.

오잉...? 결국엔 class를 통해 만든 객체도 함수로 만들어지는 과정을 거치게 된다. 하지만 더 찾아보니 두 방식은

1. class로 만든 함수엔 특수 내부 프로퍼티 [[IsClassConstructor]]: true가 붙는다.
2. 클래스에 정의된 메서드는 열거할 수 없다. (non-enumerable하다)
3. 클래스는 항상 엄격 모드로 실행된다.

의 세가지 차이를 갖고 있다고 한다.

🧐[[IsClassConstructor]]란?

function 키워드를 통해 생성한 User함수는 그냥 User자체로 호출하거나 new User를 통해 생성자 함수로 호출하는 방식을 선택할 수 있게된다.

하지만 class를 통해 만든 User 클래스는 중간에 함수로 변경되긴 하지만 User 자체로 호출을 할 수 없다. 이를 결정해주는 요인이 바로 [[IsClassConstructor]]: true인 것이다.

또, class를 통해 만든 User 클래스는 console.log를 통해 문자열로 변환하여 출력할 때 class User {...}으로 출력되는데, 이를 결정하는 요인도 [[IsClassConstructor]]: true이다.

정리해보자면 [[IsClassConstructor]]: true는 class를 통해 만든 객체가 함수로 변환되었을 때 그냥 function을 통해 만든 함수와 구분하기 위해 사용되는 요소라고 할 수 있다.

🧐non-enumerable란?

다음 두 예시를 보자.

js의 for ...in을 통해 객체를 순회할 때 첫번째 예시에선 메서드를 포함한 모든 프로퍼티가 출력됨을 확인할 수 있다. 하지만 두번째 예시에선 메서드가 포함되지 않음을 확인할 수 있다.

보통의 경우에 객체를 순회할 때 메서드를 순회 대상에서 제외하고자 하는 경우가 많기 때문에 이는 유용한 특징이 될 수 있다고 한다.

정리해보자면 non-enumerable한 특성은 객체를 순회할 때 열거할 수 없는 특성이라고 할 수 있다.

🧐엄격 모드란?

엄격 모드에 대해 이야기 하려면 자바스크립트의 역사에 대해 조금 알아야한다.

자바스크립트는 기존의 기능을 변경하지 않으면서 새로운 기능이 추가되어왔다. 그렇기 때문에 기존의 코드들을 계속해서 사용할 수 있었다. 하지만 ES5에서부터는 새로운 기능이 추가되며 기존의 기능 중 일부를 변경시켰다. 따라서 기존 코드의 호환성 문제가 발생할 가능성이 생기게 되었다.

그래서 변경사항의 대부분이 ES5의 기본모드에서 활성화되지 않도록 설계되었다. 대신 use strict라는 특별 지시자를 사용해 엄격 모드를 활성화 했을 대만 이 변경사항이 활성화 되게 해놓았다.

정리해보자면 엄격 모드는 자바스크립트의 기존 기능을 변경한 사항을 활성화할 때 사용하는 모드라고 할 수 있다.