[JS: CLEAN CODE] 함수

🧐 들어가기

클린코드의 함수에서 가장 중요한 세 가지는 다음과 같습니다!
1. 길이가 짧고
2. 이름이 좋고
3. 체계가 잡힌

한 가지만 해라

하나의 함수는 하나의 행동만 정의해야 한다

하나의 행동만 해야 함수를 작성하는 것, 테스트하는 것 그리고 이해하는 것이 쉬워진다.

하나의 행동만 하는지 어떻게 판단할까?

함수의 핵심 기능을 파악해서, 이 함수의 추상화 수준이 하나인지 판단하는 것이다!

명령형 프로그래밍보다 함수형 프로그래밍을 지향하세요

JavaScript는 Haskell처럼 함수형 프로그래밍 언어는 아니지만 함수형 프로그래밍처럼 작성할 수 있다.
함수형 언어는 더 깔끔하고 테스트하기 쉽다.

선연형 프로그래밍 vs 명령형 프로그래밍

• 선언형 프로그래밍은 어떤 방법으로 해야하는지 보다는 무엇을 얻을지를 설명하는 방식이다.
  • 함수형 프로그래밍 : 순수 함수를 조합하고 소프트웨어를 만드는 방식을 의미
• 명령형 프로그래밍은 프로그래밍의 상태와 상태를 변경시키는 구문의 관점에서 연산을 설명하는 방식이다.
  • 절차지향 프로그래밍: 수행되어야 할 연속적인 계산 과정을 포함하는 방식 (C, C++)
  • 객체지향 프로그래밍: 객체들의 집합으로 프로그램의 상호작용을 표현 (C++, Java, C#)

선언형: 알고리즘을 명시하지 않고, 목표를 명시한다
명령형: 알고리즘을 명시하고, 목표는 명시 하지 않는다

예시

공통

const programmerOutput = [
  {
    name: 'Uncle Bobby',
    linesOfCode: 500
  }, {
    name: 'Suzie Q',
    linesOfCode: 1500
  }, {
    name: 'Jimmy Gosling',
    linesOfCode: 150
  }, {
    name: 'Gracie Hopper',
    linesOfCode: 1000
  }
];

안좋은 예

let totalOutput = 0;

for (let i = 0; i < programmerOutput.length; i++) {
  totalOutput += programmerOutput[i].linesOfCode;
}

좋은 예

const totalOutput = programmerOutput
  .map(programmer => programmer.linesOfCode)
  .reduce((acc, linesOfCode) => acc + linesOfCode, INITIAL_VALUE);

---

조건문 작성을 피하세요

조건문 작성을 피하라는 것은 매우 불가능한 일로 보입니다.
이 얘기를 처음 듣는 사람들은 대부분 "If문 없이 어떻게 코드를 짜나요?"라고 말합니다.
하지만 다형성을 이용한다면 동일한 작업을 수행할 수 있습니다.

두번째 질문은 보통 "네 좋네요 근데 내가 왜 그렇게 해야하나요?"이죠.
그에 대한 대답은, 앞서 우리가 공부했던 clean code 컨셉에 있습니다.
함수는 단 하나의 일만 수행하여야 합니다.
당신이 함수나 클래스에 if문을 쓴다면 그것은 그 함수나 클래스가 한가지 이상의 일을 수행하고 있다고 말하는 것과 같습니다.

기억하세요, 하나의 함수는 딱 하나의 일만 해야합니다.

예시

안좋은 예

class Airplane {
  // ...
  getCruisingAltitude() {
    switch (this.type) {
      case '777':
        return this.getMaxAltitude() - this.getPassengerCount();
      case 'Air Force One':
        return this.getMaxAltitude();
      case 'Cessna':
        return this.getMaxAltitude() - this.getFuelExpenditure();
    }
  }
}

좋은 예

class Airplane {
  // ...
}

class Boeing777 extends Airplane {
  // ...
  getCruisingAltitude() {
    return this.getMaxAltitude() - this.getPassengerCount();
  }
}

class AirForceOne extends Airplane {
  // ...
  getCruisingAltitude() {
    return this.getMaxAltitude();
  }
}

class Cessna extends Airplane {
  // ...
  getCruisingAltitude() {
    return this.getMaxAltitude() - this.getFuelExpenditure();
  }
}

---

과도한 최적화를 지양하세요

최신 브라우저들은 런타임에 많은 최적화 작업을 수행합니다.
대부분 당신이 코드를 최적화 하는 것은 시간낭비일 가능성이 많습니다.

예시

안좋은 예

// 오래된 브라우저의 경우 캐시되지 않은 `list.length`를 통한 반복문은 높은 코스트를 가졌습니다.
// 그 이유는 `list.length`를 매번 계산해야만 했기 때문인데, 최신 브라우저에서는 이것이 최적화 되었습니다.
for (let i = 0, len = list.length; i < len; i++) {
  // ...
}

좋은 예

for (let i = 0; i < list.length; i++) {
  // ...
}

정리하지 않은 문항 : 12, 13 (왜 그렇게 해야해?) / 18