[Deep Dive CS - Q23] Class

Q23. (ES6 Class Internals) "자바스크립트의 Class는 단지 프로토타입의 문법적 설탕(Syntactic Sugar)일 뿐이다"라는 말에 100% 동의하시나요? ES5 생성자 함수와 ES6 Class의 결정적인 동작 차이 2가지를 설명해주세요.

 

차이점 1 : "new 키워드 강제"

• ES5 함수 : 개발자가 실수로 new를 안붙이고 호출하면?
  👉 그냥 함수가 실행돼버립니다. this가 전역(Window)이 되어버려서 전역 변수를 오염시키는 대참사가 일어납니다. 
• ES6 클래스 : 개발자가 실수로 new를 안붙이고 호출하면?
  👉 TypeError 발생. 클래스는 반드시 new로 만들어야 함

 

차이점 2 : "열거 가능 여부"

• ES5 함수: 프로토타입에 메서드(move)를 정의하고 for..in 반복문을 돌리면, 그 메서드까지 줄줄이 딸려 나옵니다. (지저분함)
• ES6 클래스: 클래스 안에 정의한 메서드는 엔진이 "숨김 처리(Non-enumerable, enumerable: false)"를 해둡니다. 반복문을 돌려도 데이터(속성)만 깔끔하게 나오고 메서드는 안 나옵니다.

 

차이점 3 : "Strict Mode 자동 적용"

• Class 내부는 개발자가 use strict를 안서도 무조건 Strict Mode로 동작합니다. 
• 이말은 즉, this가 전역 객체(Window)가 되는 것을 방지한다는 것입니다. 
• ES5 함수 (Sloppy): 메서드를 그냥 변수에 담아서 호출하면 this가 window가 됩니다.
• ES6 Class (Strict): 메서드를 그냥 호출하면 this는 undefined가 됩니다.

 

차이점 4 : "호이스팅(Hoisting)과 TDZ"

• 일반함수로 선언하면 선언 + 초기화 + 할당까지 모두 되는지만(=선언 전에도 호출되지만), Class는 le/const 처럼 호이스팅 되지만, TDZ에 빠져서 선언 전에 사용하면 에러가 발생합니다.  

 

사람들이 자바스크립트의 Class가 문법적 설탕이라고 말하는 이유는 다른 언어들과는 다른 클래스나 상속 방식하고는 다른 방식을 차용하기 때문이라고 생각합니다. 다른 방식이라고 하면 다른 언어들에서는 붕어빵 틀을 만들고 틀을 기반으로 붕어빵(객체)를 생성해 나가는 형태로 되어 있습니다. 하지만 자바스크립트에서는 실제로 이렇게 동작하지는 않고, 연결되는 방식으로 동작합니다. 그렇기 때문에 문법적 설탕이라고 표현한 건 사람들 읽기 편하고 쓰기 달달하라고 문법만 바꾸어줘서 이런 말이 나오게 된 것 같습니다. 저도 뭐 동의는 하지만 그래도 단순히 문법적 설탕이라고만 말하기에는 그래도 요즘에는 안전장치들이 생겨나고 있는 상황입니다.