안녕하세요. 이번 시간에는 stage-3에 이어 stage-2에 대해 알아보겠습니다! stage-2에는 좀 놀라운 내용들이 담겨 있습니다.
string trimming을 제외하고는 아직 브라우저에서 지원하는 것이 없습니다. babel-preset-stage-2를 설치하면 이 기능들을 사용할 수 있습니다. class decorators, class properties, private fields는 정말 놀라운 변화입니다.
다음 코드는 브라우저에서 동작하지 않으니 따라 치지는 마시고 눈으로만 보세요.
string trimming
문자열에 trim이라는 메소드가 있었죠. 양 쪽 공백을 제거해주는데요. 왼쪽 또는 오른쪽만 trim할 수 있는 메소드가 생겼습니다. 탭 문자(\t)와 개행 문자(\n) 모두를 제거해줍니다. 왼쪽을 제거하는 메소드는 trimLeft 또는 trimStart고, 오른쪽을 제거하는 메소드는 trimRight 또는 trimEnd입니다.
' zerocho '.trimLeft(); // 'zerocho '
' zerocho '.trimStart(); // 'zerocho '
' zerocho '.trimRight(); // ' zerocho'
' zerocho '.trimEnd(); // ' zerocho' class properties && private fields
클래스의 속성을 더이상 constructor 안에 넣지 않아도 됩니다. 그냥 class 안에 선언하듯 적어주면 됩니다. 또한 static 키워드를 붙이면 자바의 static과 비슷하게 기능할 수 있습니다. new를 붙이지 않아도 접근 가능해집니다.
추가로 private 속성도 생겼습니다. 객체 지향적인 부분이 강해지네요. 그동안 자바스크립트에 private 속성 지정이 없어서 다른 방법으로 흉내냈어야 했죠. 바벨에서도 class properties는 되지만 private 필드는 지원하지 않아 실험해볼 수가 없습니다.
class ZeroCho {
#weight;
constructor(w) {
this.#weight = w;
}
static name = 'zero';
year = 1994;
getWeight() {
return this.#weight;
}
}
ZeroCho.name; // 'zero'
new ZeroCho().year; // 1994
new ZeroCho(68).getWeight(); // 68#으로 이 속성이 private임을 나타냅니다. constructor를 통해 private 속성을 지정하는 것을 볼 수 있습니다. private 속성이기 때문에 ZeroCho.#weight으로 직접 접근은 불가능하고요. getWeight같은 getter 메소드를 통해서만 값을 가져올 수 있습니다. 또는 #weight = 68; 이렇게 class properties를 사용해 처음부터 값을 넣어줄 수도 있습니다.
class decorators
리액트를 하셨던 분이라면 몇 번 보셨을텐데요. 클래스를 감싸는 함수를 만드는 방법입니다. HOC를 만들 때 가끔 이런 문법을 쓰는 것을 보신 적이 있을 겁니다.
function hello(msg) {
return function(target) {
target.hello = msg;
};
}
function readonly(target, key, descriptor) {
descriptor.writable = false;
return descriptor;
}
@hello('안녕')
class ZeroCho {
@readonly
static name = 'zerocho';
}
ZeroCho.hello; // '안녕'
ZeroCho.name; // 'zerocho';
ZeroCho.name = 'babo'; // Error 발생클래스와 속성 앞에 @로 시작하는 함수가 붙었죠? 이것들이 decorator입니다. 다음 줄에 나오는 클래스나 속성이 target으로 들어가고요. hello 함수를 보면 '안녕'이라는 글자를 받아서 target.hello에 그 글자를 대입합니다. 여기서의 target은 @hello 다음에 나오는 ZeroCho 클래스입니다.
readonly 함수를 보면 다음에 나오는 속성의 descriptor를 받아 writable을 false로 만들어주었습니다. 따라서 @readonly decorator 다음에 나오는 name 속성은 수정할 수 없습니다. 여기서의 target은 name 속성이 됩니다. descriptor은 name 속성의 descriptor인 것이고요.
자바스크립트의 class에 점점 기능이 붙기 시작하네요. 다른 객체 지향 언어의 class 기능들이 거의 다 들어온 것 같습니다. 다음 시간에는 stage-1에 대해서 알아보겠습니다!