ClassFiled와 Arrow Function 사용하여 가독성 개선하기

자바스크립트 class?

같은 성질의 객체를 여러 개 찍어낼 수 있는 틀(frame)

자바스크립트 ES6에서 class 문법이 도입 됬고, class문법은 constructors 메소드를 사용하여 class 필드 안의 변수, 함수들을 초기화한다.

class 사용법

class MyClass {
  constructor() {
    this.count = 0;
  }
}

const myClassInstance = new MyClass();

클래스 필드

클래스 필드 코드가 간결해지고 가독성을 더 좋아지게 한다. 특히 React에서 유용하게 사용된다.
※클래스 필드는 실험적인 기능으로 이를 지원하는 브라우저가 제한적으로 Babel 등을 이용해 이 기능을 사용할 수 있다.

클래스 필드는 constructors, super 메소드를 사용하지 않고 class 필드 안의 선언이 this 없이 자동으로 바인드 된다.

class field 사용법

class MyClass {
  count = 0;
}

const myClassInstance = new MyClass();

화살표 함수

const arrowFunction = () => { ... } 의 형태로 코드의 가독성을 좋게 한다.

화살표 함수는 다음과 같은 특징을 갖는다.

• 함수 자체에 대한 this, arguments, super 등의 바인딩을 갖지 않음
• 간결한 문법과 묵시적 반환(implicit return)을 지원
• arguments 객체를 사용 불가
• 생성자 함수로 사용 불가로, new 연산자와 함께 호출할 수 없음

클래스 내의 화살표 함수를 사용하기전에 왜 필요한지 예제를 통해 알아보고 화살표 함수를 보도록 하자.

클래스 내부의 함수 사용

class MyClass {
  constructor() {
    this.count = 0;
  }

  addCount() {
    this.count++;
    console.log(this.count);
  }
}

const myClassInstance = new MyClass();
myClassInstance.addCount();    // 1

위 코드에선 예상처럼 1이 출력된다. 다음은 1초 마다 클래스의 addCount 함수를 실행시킬 것 이다. 어떻게 출력될지 예상해 보자.

class MyClass {
  constructor() {
    this.count = 0;
  }

  addCount() {
    this.count++;
    console.log(this.count);
  }
}

const myClassInstance = new MyClass();
setInterval(myClassInstance.addCount, 1000);    //NaN

1초마다 1씩 더한 값이 출력될 것 이라는 예상과 달리 NaN가 출력된다.
이 문제를 해결하려면, addCount가 MyClass에 바인딩 된 함수를 사용해야 한다.

클래스 메소드를 콜백 함수로 사용하는 경우 바인딩을 하지 않으면 addCount함수에서 사용되는 this.count 변수의 this가 무엇인지 몰라 undefined를 바인딩 하게 된다. 그래서 다음과 같이 코드를 작성한다.

class에 바인드

class MyClass {
  constructor() {
    this.count = 0;
    this.bindAddCount = this.addCount.bind(this);
  }

  addCount() {
    this.count++;
    console.log(this.count);
  }
}

const myClassInstance = new MyClass();
setInterval(myClassInstance.bindAddCount, 1000);    // 1씩 증가

이제는 정상적으로 1씩 증가된 값이 출력된다.
일반적으로, 초기화는 this.addCount = this.addCount.bind(this)로 선언하지만 이해를 돕기 위해 this.bindAddCount로 하였다.

클래스에서 화살표 함수 사용

화살표 함수는 다음과 같은 특징이 있었다.

• 함수 자체에 대한 this, arguments, super 등의 바인딩을 갖지 않음

화살표 함수는 상위 스코프에서의 this값을 자동으로 참조하기 때문에 constructor()에 따로 함수를 바인드하지 않아도 된다. 다음 코드는 생성자에 addCount를 바인드 하지 않고, 화살표 함수를 사용하였다.

class MyClass {
  constructor() {
    this.count = 0;
  }

  addCount = () => {
    this.count++;
    console.log(this.count);
  }
}

const myClassInstance = new MyClass();
setInterval(myClassInstance.addCount, 1000); // 1씩 증가

이렇게 화살표 함수를 사용하여 가독성이 좋아진 모습이다.

가독성 비교

기존 코드

class MyClass {
  constructor() {
    this.count = 0;
    this.addCount = this.addCount.bind(this);
  }

  addCount() {
    this.count++;
    console.log(this.count);
  }
}

클래스 필드 + 화살표 함수

class MyClass {
  count = 0;

  addCount = () => {
    this.count++;
    console.log(this.count);
  }
}

코드가 많이 이뻐졌다. 클래스가 더 많아 진다면 두 코드의 가독성 차이가 더 심해질 것 이다. 이 것 보다 더 가독성이 좋아지는 날을 기다리며~

오류 지적 환영합니다. ╰(°▽°)╯