1부- 3장. 긴 코드 조각내기(단계 1/4)

< 코드개선 4단계 >

1. 긴 함수 조각내기
2.타입 코드 처리
3. 유사 코드 통합
4. 데이터 보호

 

코드가 쉽게 지저분해지는 주 원인

• 메서드 여러가지 일을 한다
• 추상화의 수준이 맞지않다
• 주석과 적절한 메서드명이 부족하다

 

코드를 조각내는 5가지 규칙

1. 다섯 줄 제한

한가지 작업만 해야하는 리펙터링 정의를 생각해보면 메서드가 길다는 것 자체가 좋지 않은 코드이다. 그렇기 때문에 메서드는 {}를 제외하고 5줄 이하여야 한다. 

한가지 작업만 하는 메소드를 만들게 되면, 훨씬 빠르고 이해하기 쉽다. 

2. 메소드 분리

메소드 내에 역할들을 그룹으로 작게 분리하여, 빈 줄을 추가하거나 주석을 추가한다. 이런 작은 그룹들은 하나의 메서드로 추출할 수 있다.

3. 추상화 수준 맞추기

코드는 직접 조작하는 낮은 수준의 작업과 다른 함수에 인자로 전달하는 높은 수준의 호출이 공존한다. 이는 메소드 내에서 다른 메소드를 호출하거나 단순히 객체를 생성하여 인자를 전달하는 두가지 방식이 섞이면 안된다는 의미로, 가독성 높은 코드를 작성하기 위해서는 작은 그룹의 역할을 하는 메소드를 호출하여 작성하는 것이 좋다.

function average(arr: number[]) {
  return sum(arr) / arr.length;
}

위와 같이 서로 다른 수준으로 작성되어 가독성이 떨어진다.

아래와 같이 수정할 수 있다.

function average(arr: number[]) {
  return sum(arr) / size(arr);
}

4. 좋은 이름

함수의 의도와 역할이 담겨있는 이름을 지어야 한다. 그러면 빈 줄이나 주석이 없어도 이해하기 쉽다.

 

추상화 수준이 동일하지 않고 이름도 불분명 하다.

function draw() {
  let canvas = canvasElement;
  canvas.clearRect();
  
  drawMap(canvas);
  drawPlayer(canvas);
}

규칙에 맞게 수정한다면,

function createCanvas() {
  let canvas = canvasElement;
  canvas.clearRect();
  return canvas;
}

function draw() {
  let canvas = createCanvas();
  drawMap(canvas);
  drawPlayer(canvas);
}

5. 너무 많은 일을 하는 함수 분리

지금까지의 규칙을 모두 지키더라도 코드의 길이 길어지고 가독성이 떨어질 수 있다. 이때에는 if 문단을 따로 분리해볼 수 있다.

if를 분리할 때에는 else도 코드 구조의 일부이므로 변경해서는 안된다.

// 변경 전
function findEven(n: number) {
  for (let i = 2; i < n; i++)
    if (isEven(i))
      console.log('yes');
}

// 변경 후
function findEven(n: number) {
  for (let i = 2; i < n; i++)
    printIfEven(i);
}

function printIfEven(n: number) {
  if (isEven(i))
      console.log('yes');
}

이 작업은 다섯 줄 제한과 같이, 한가지 이상의 작업 수행을 막기 위함.