1. 한 메서드에 오직 한 단계의 들여쓰기

소트웍스 앤솔로지의 Object Calisthenics 내용을 TypeScript로 적용해봤습니다.

코드 작성 시 if, for문 등에서 들여쓰기(indent)를 쓰게 된다. 들여쓰기가 많아질수록 가독성과 유지보수의 용이함을 저해하는 경우가 생긴다. 여러 분기나 반복문이 중첩되는 경우 코드를 보고 이해하기 위해 머릿속에서 그 과정을 실행해봐야하기 마련이다. 다음 코드를 확인해보자.

class Board {
  private board: string;

  constructor(private data: readonly string[]) {
    this.board = '';
    // 들여쓰기 0
    for (let i = 0; i < 10; i++) {
      // 들여쓰기 1
      for (let j = 0; j < 10; j++) {
        // 들여쓰기 2
        this.board += data[i][j];
      }
      this.board += '\n';
    }
  }
}

이렇게 들여쓰기가 깊어지면, 이를 메소드들로 나눌 필요가 생긴다. 마틴 파울러는 리팩토링에서 메소드 추출(Extract Method) 패턴을 제시한다. 전체 코드량은 늘어나겠지만 메소드에 적당한 이름을 붙이고 들여쓰기 단계를 줄임에 따라 가독성이 높일 수 있다. Transpile과 Uglify를 거치면 결과적으로 코드량도 크게 차이나지 않을 것이다.

VS Code 기준 추출한 메소드 부분을 블록 지정하고 Quick Fix(CMD + .)를 하면 다음과 같이 쉽게 메소드를 추출할 수 있다. WebStorm이나 IntelliJ에서도 비슷한 작업이 가능하다.

메소드 추출 후 코드는 다음과 같은 모양이 된다.

class Board {
  private board: string;

  constructor(private data: readonly string[]) {
    this.board = '';
    this.collectRows(data);
  }

  private collectRows(data: readonly string[]) {
    for (let i = 0; i < 10; i++) {
      this.collectRow(data, i);
    }
  }

  private collectRow(data: readonly string[], i: number) {
    for (let j = 0; j < 10; j++) {
      this.board += data[i][j];
    }
    this.board += '\n';
  }
}