이 함수형 프로그래밍 트릭으로 JavaScript OOP 코드를 더 잘 구성하십시오.

순수 함수

함수형 프로그래밍의 주요 특징 중 하나는 순수 함수의 개념입니다.

순수 기능:

동일한 인수로 호출할 때 항상 동일한 값을 반환합니다

.

범위를 벗어나는 변수를 변경하지 마십시오

.

순수 함수는 다음과 같습니다.

function add(a, b) {
  return a + b;
}

클래스 메서드

클래스 메서드는 일반적으로 순수 함수의 반대입니다.

클래스 메서드의 목적은 일반적으로 클래스 인스턴스에서 어떤 방식으로든 작동하는 것입니다(물론 다른 작업도 수행할 수 있음).

class Point {
  add(point) {
    this.x += point.x;
    this.y += point.y;
    return this;
  }
}
const point = new Point(2, 3);
const point2 = point.add(new Point(3, 4));

일이 엉망이 될 수 있는 방법

이러한 방식으로 메서드를 사용할 때 자주 발생하는 문제는 항상 동일한 클래스 인스턴스에서 작업한다는 것입니다. 이것은 사용 중인 개체가 하나 또는 두 개뿐일 때 괜찮습니다.

그러나 코드에서 사용해야 하는 작업과 개체가 많을수록 인스턴스에 대한 참조를 추적하고 코드의 다른 부분에서도 실수로 참조하는 개체를 변경하지 않도록 해야 합니다.

예를 들어 이 moment.js 코드를 보십시오.

const startedAt = moment();
const endedAt = startedAt.add(1, "year");

console.log(startedAt); // > 2020-02-09T13:39:07+01:00
console.log(endedAt); // > 2020-02-09T13:39:07+01:00

startedAt 메서드는 위의 add 클래스에서 정의한 add 메서드와 매우 유사하게 작동하기 때문에 둘 다 같은 시간에 기록합니다.

발견하기 쉬운 문제처럼 보이지만 여러 개체와 관련된 작업 행이 약 15개 있다고 상상해 보십시오. 다른 모든 줄에서 console.logs를 채울 시간입니다.

더 나은 방법

이러한 간단한 예를 통해 답은 명확해야 합니다. 방법을 "순수하게"만들어야 합니다.

내가 "순수"라고 말하는 이유는 우리가 가장 중요하게 생각하는 특성이 어떤 값도 변경해서는 안 된다는 것이기 때문입니다.
Point 의 클래스 Point 메서드를 다시 작성해 보겠습니다.

class Point {
  add(point) {
    return new Point(this.x + point.x, this.y + point.y);
  }
}

이제 동일한 인스턴스에 대한 참조를 반환하는 대신 완전히 새로운 인스턴스를 만듭니다.

기존 변수를 변경하는 것에 대해 걱정할 필요가 없기 때문에 지금 원하는 모든 방법을 연결할 수 있습니다.

const point1 = new Point(2, 3);
const point2 = new Point(3, 4);
const point3 = point1
  .add(point2)
  .add(point1)
  .add(point2);

이 방법으로 클래스를 구조화하면 디버깅 및 단위 테스트가 더 쉬워집니다. 이제 변수가 올바르게 변경되는지 확인하는 대신 출력을 직접 테스트할 수 있기 때문입니다.

또 다른 좋은 이점은 Vue 및 React와 같은 라이브러리의 반응성 시스템과 잘 작동한다는 것입니다. 새 인스턴스를 만들면 "반응성"이 트리거됩니다.