긴 코드 조각내기

너무 많은 역할을 하는 함수를 식별하고 리팩토링 해보자!

  • 다섯 줄 제한으로 지나치게 긴 함수 식별하기

  • 세부 사항을 보지 않고 코드 작업하기

  • 함수 추출 긴 함수 분해하기

    • 함수 추출을 통해 변수명을 변경해서 가독성을 높이자.

  • 호출 또는 전달, 한 가지만 할 것으로 추상화 수준 맞추기

  • if 문은 함수의 시작에만 배치 if 문 분리하기

긴 코드 조각 내기

DRY (Don't Repeat Yourself, 똑같은 일에 두 번 반복하지 말 것), KISS (Keep It Simple, Stupid, 단순함을 지킬 것), 지침을 따르더라도 코드는 쉽게 지저분해진다.

이 경우 주 원인은 다음과 같다.

  • 함수가 여러 가지 다른 일을 수행

  • 낮은 수준의 원시 연산(배열 조작, 산술 연산 등)을 사용

  • 주석과 적절한 메서드와 변수명 같이 사람이 읽을 수 있는 텍스트가 부족

다섯 줄 제한

어떤 함수도 다섯 줄 이상을 가질 수 없다 (함수는 {, } 를 제외하고 5줄 이상이 되어서는 안된다.)

다섯 줄 제한은 궁극의 목표!!

  • 문장이라고 하는 코드 한 줄은 하나의 if, for, while 또는 세미콜론으로 끝나는 모든 것을 말함

    • 즉, 할당, 함수 호출, return 같은 것들이다. 공백과 중괄호는 제외한다.

스멜

  • 함수가 길다는 것 자체가 스멜

    • 길다는건 메서드는 한 가지 작업만 해야 한다는 다른 스멜을 생각해 볼 수 있다.

  • 한 번에 긴 메서드의 모든 논리를 머릿속에 담아야해서 작업하기 어렵다.

의도

  • 관심을 가지지 않으면 시간이 지남에 따라 더 많은 기능이 추가되면서 메서드가 커지는 경향이 늘 생김

    • 그로 인해 코드를 점점 더 이해하기 어렵게 된다.

  • 각각 5줄의 코드가 있는 4개의 메서드가 20줄인 하나의 함수보다 훨씬 빠르고 이해하기 쉽다.

    • 각 함수의 이름으로 코드의 의도를 전달할 수 있기 때문

  • 또한 작은 함수에 적절한 이름을 붙이면 큰 함수의 이름을 정하는 데도 도움이 된다.

함수 분해하기 & 함수 추출하기

다섯 줄 제한 규칙은 이해하기 쉽지만 항상 지킬 수 있는 것은 아님

함수 전체를 소화하려 하지 말고, 작게 잘라서 이해하기 쉽게 하나씩 처리!

  • 코드를 이해하기 위한 첫 번째 단계는 항상 함수명을 고려하는 것

  • 각 줄을 모두 이해 하려다 보면 시간이 많이 걸리고 비생산적이게 된다.

  • 그래서 코드의 '형태'를 살펴보는것으로 시작

Step

  1. 동일한 작업을 하는 데 필요한 줄들을 그룹으로 묶어 주석달기

  2. 식별된 그룹의 모든 줄을 선택한 다음 잘라내어 별도 함수로 추출

  3. 추출한 함수를 호출하는 코드를 추가 및 주석 제거

  4. 추출한 함수에서 1~3 동일한 절차 반복

if의 일부 분기만 return 문을 가지고 있을 경우 함수를 추출하는 데 방해가 될 수 있으므로 함수의 끝에서 시작해 위로 작업해가는 것이 좋다. 이는 return 문을 가진 조건을 메서드의 앞쪽에 배치하게 해서 결과적으로 모든 분기에서 return 할 수 있게 한다.

추상화 수준을 맞추기 위한 함수 분해

함수 내에서는 객체에 있는 함수를 호출하거나 객체를 인자로 전달할 수 있지만 둘을 섞어 사용해서는 안된다.

호출 또는 전달, 한 가지만 할 것! 함수의 내용은 동일한 추상화 수준에 있어야 한다.

  • 더 많은 함수를 도입하고 여러 가지를 매개변수로 전달하기 시작하면 결국 책임이 고르지 않게 된다.

  • 예를 들면, 함수에서 배열에 인덱스를 설정하는 것과 같은 직접적인 작업을 수행하거나 동일한 배열을 더 복잡한 함수에 인자로 전달할 수 있다.

    • 그러면 코드는 직접 조작하는 낮은 수준의 작업과 다른 함수에 인자로 전달하는 높은 수준의 호출이 공존해서 함수 이름 사이의 불일치로 가독성이 떨어지게 된다.

  • 동일한 수준의 추상화를 유지하는 편이 코드를 읽기 훨씬 더 쉽다.

// 높은 수준의 추상화 sum(arr)와 낮은 수준의 arr.length 모두 사용한 케이스
function average(arr: number[]) {
  return sum(arr) / arr.length
}

// 추상화 동일하게 refactoring
function average(arr: number[]) {
  return sum(arr) / size(arr);
}

스멜

함수의 내용은 동일한 추상화 수준에 있어야 한다.

  • 전달된 인자의 메서드가 어떻게 사용되었는지를 식별하는 것은 간단한 일

  • 인자로 전달된 변수 옆의 .로 쉽게 찾을 수 있다.

의도

  • 함수에서 몇 가지 세부적인 부분을 추출해서 추상화를 도입할 때 이 규칙은 연관된 다른 세부적인 부분도 추출하게됨

  • 이렇게 하면 메서드 내부의 추상화 수준이 항상 동일하게 유지된다.

좋은 함수 이름의 속성

함수를 추출할 때 마다 함수의 이름을 지어 코드를 더 읽기 쉽게 만들 수 있다.

함수명을 지을 때는 항상 나중에 함수가 더 작아졌을 때 이름을 개선할 수 있는지를 평가해봐야 한다.

좋은 함수 이름이란?

  • 정직해야한다. -> 함수의 의도를 설명해야함

  • 완전해야 한다. -> 함수가 하는 모든 것을 담아야 한다.

  • 도메인에서 일하는 사람이 이해할 수 있어야 한다. -> 작업 중인 도메인에서 사용하는 단어를 사용

// Before
function draw() {
  let canavs = document.getElementById("GameCanvas") as HTMLCanvasElement;
  let g = canavs.getContext('2d');
  
  // 추상화 수준이 다르다.
  g.clearRect(0, 0, canvas.width, canavs.height); // 객체의 메서드 호출 (저수준)
  drawMap(g); // 객체를 인자로 전달 (고수준)
  drawPlayer(g);
}

// After
function createGraphics() {
  let canavs = document.getElementById("GameCanvas") as HTMLCanvasElement;
  let g = canavs.getContext('2d');
  g.clearRect(0, 0, canvas.width, canavs.height);
  
  return g;
}

function draw() {
  const g = createGrpahics(g);
  drawMap(g);
  drawPlayer(g);
}

함수 네이밍으로 자주 사용되는 접두사 키워드들

handle, update, contain, get, delete

if 문은 함수의 시작에만 배치

if 문이 있는 경우 해당 if 문은 함수의 첫 번째 항목 이어야 한다.

  • 함수는 한가지 일만 해야 한다.

  • 무언가를 확인하는 것은 한 가지 일이된다.

  • 따라서 함수에 if가 있는 경우 함수의 첫 번째 항목 이어야 한다.

  • 또한 그 후에 아무것도 해서는 안된다는 의미에서 유일한 것이어야 한다.

  • if 문이 함수가 하는 유일한 일이어야 한다는 말은 곧 그 본문을 추출할 필요가 없고, 또한 else 문과 분리해서는 안된다는 말이다.

  • 본문과 else는 모두 코드 구조의 일부이며, 이 구조에 의존해서 작업하므로 코드를 이해할 필요가 없다.

// Before
// 두 가지 분명한 작업 존재
// 1.숫자를 반복, 2.숫자가 소수인지 확인
function reportPrimes(n: number) {
  for (let i=2; i<n; i++) {
    if (isPrime(i)) console.log(i);
  }
}

// After
function reportPrimes(n: number) {
  for (let i=2; i<n; i++) {
    reportIfPrime(i)
  }
}

function reportIfPrime(n: number) {
  if(isPrime(n)) {
    console.log(i)
  }
}

[remind] 무언가를 확인하는 것은 하나의 작업이며, 하나의 함수에서 처리해야 한다.

스멜

다섯 줄 제한과 같이 이 규칙은 함수가 한가지 이상의 작업을 수행하는 스멜을 막기 위해 존재

의도

  • 이 규칙은 if 문이 하나의 작업이기 때문에 이를 분리할 때 이어지는 else if, if 문과 분리할 수 없는 원자 단위로 본다.

  • 이것은 if 문이 else if와 함께 문맥을 형성할 때 함수 추출로 수행할 수 있는 가장 작은 단위가 if 문과 이어지는 else if 까지 포함된다는 것을 의미

if와 else if를 분리할 수 없기 때문에 다섯 줄 제한을 지키기 위해 메서드 추출을 적용할 수 없지만 우아한 해결책이 따로 존재함 (링크 예정)

Last updated