ES5 이전의 JS에서 클래스 사용하기

0

서문

이런 가이드를 쓰고있지만, 어서 빨리 IE가 사라지고 어디서든 ES5 이상의 문법을 자유롭게 사용할 수 있어서 이런걸 쓸 일이 없었으면 좋겠습니다.

본인은 그런 어쩔 수 없는 환경에서 jsdoc으로 협업자에게 코드의 의도를 전달하려고 하다가 @class 를 써보기위해 연구하다가 알아냈습니다.

프로토타입?

ES5 이전의 문법에서 클래스를 정의하려하면 항상 프로토타입이 나오지만
본인은 이렇게 어려운 방법으로 누군가에게 설명하고싶지 않다.

잘 설명 할 자신도 없고, 잘 설명하더라도 어려운 개념이라서 듣는 사람도 사전 지식이 없다면 한번만에 알아들을 수 없기 때문이다.

function으로 클래스 구현하기


함수 라고 쓰고 클래스 라고 읽는다

예제

_this?


_이것

예제에는 _this 라는 이상한 변수가 등장한다.
이걸 왜 쓰냐고 한다면, this 부터 설명해야 하는데 이건 너무 어려우니까
쉽게 설명하자면 function 을 정의하면 자신의 내부 스코프에 this 를 생성하기 때문이다.

위의 예제에서 _this.foo() 대신 this.foo() 를 사용하면 바로 알게된다.
this.foo() 를 사용하려고 하면 정의되지 않아서 실행할 수 없다는 에러가 난다.

이게 뭔가 싶을텐데 new에 대한 설명을 읽어보면 대략 이해가 될 지도 모른다.
MDN JavaScript - new operator

그래도 모르겠다면... 음... 여기 말고 좀 더 어려운 내용들을 다루는 글을 찾아보시길 권한다.
javascript this에 대해 검색해서 말이다.
나는 쉽게 설명하려고 쓴 글에 어려운 내용을 담고싶지 않다.

jsdoc

주석에 @class@private 등을 써둔 부분이 있는데, 이건 jsdoc이라고 한다.
잘 사용하면 typescript 처럼 자동완성이나 여러 의도를 jsdoc으로 나타낼 수 있다.

꼭 이런 ES5 이하의 문법에서 클래스 구현하기 같은 방법 외에도
typescript가 아닌 javascript 프로젝트에서도 @param 이나 @return 이나 @private 등을 이용해
javascript에서는 구현할 수 없는 프라이빗 메서드나 타입에 의한 자동완성을 가능하게 할 수도 있다.
(잘 작성하면 자신에게도 도움이 되고 협업자들에게도 도움이 되고)

profile
지상 최강의 개발자 쥬니니

0개의 댓글