[TypeScript] 배열 클래스 함수안에서 .map() 호출하기

interface MyClassData {
  value: number;
  ...
}

class MyClass {
  ...
  getValue() {
    return this.value;
  }
}

class MyClassArray extends Array<MyClass> {
  constructor(myClassDatas: MyClassData[]) {
    const myClassArray = myClassDatas.map((data) => new MyClass(data));
    super(...myClassArray);
    Object.setPrototypeOf(this, MyClassArray.prototype);
  }
  
  getValues(): number[] {
    return this.map((myClass: MyClass) => myClass.getValue());
  }
}

 

 

데이터 처리용 클래스를 만들어서 이 클래스를 요소로 가지는 배열 클래스를 만들었다.

요소들의 특정 데이터만 반환하는 함수를 만들기 위해 커스텀 배열 클래스안에서 this.map()을 호출했는데 "myClassDatas.map is not a function" 라는 에러가 발생했다.

 

 

에러 로그를 따라가보니 getValues() 함수의 this.map()이 호출될 때 MyClassArray의 생성자가 호출되고 있었다.

갑자기 왜 생성자가 다시 호출되는지도 이해하지 못했지만 생성자의 매개변수로 뜬금없이 첫번째 요소의 첫번째 필드변수가 전달되는걸 보고 당황했다.

 

한참을 헤매다 지피티에게 얻은 답변은 배열 클래스함수에서 this.map()을 호출하면 컨텍스트가 변경되어 this가 스스로를 가르키는 것이 보장되지 않는다고 한다.

 

대신 아래처럼 for문을 사용해 필요한 값을 반환하도록 수정했다.

  getRounds(): number[] {
    const rounds: number[] = [];
    let step;
    for (step = 0; step < this.length; step++) {
      rounds.push(this[step].getRound());
    }
    return rounds;
  }

 

하지만 이 방법은 몬가(?) 몬가 마음에 안들어서 지피티를 조금 더 괴롭혔더니 아래처럼 깔삼한 방법을 뱉어 놓았다.

  getRounds(): number[] {
    return Array.from(this).map((result: LottoResult) => result.getRound());
  }

Array.from(this)를 호출해 스스로를 복제해서 map()을 호출하는 식으로 컨텍스트 변경을 회피할 수 있었다.