[클린코드 JS] 경계 다루기(코드 컨벤션)

경계 다루기

1. min-max

function isAdult(age) {
    if (age > 20) {
    }
}
const MAX_AGE = 20; // 값을 하드코딩하지 않고 상수화하여 다른 사람이 이 코드를 볼 때 쉽게 이해할 수 있도록 돕는다.  
isAdult(MAX_AGE);  // 그러나 MAX_AGE가 뜻하는 것이 그 최대값을 포함하는 건지 아닌지 알기 어렵다.
  • 팀에서 min과 max에 대한 개념 정의를 함께 하고 컨벤션을 정해두어야 한다.
    • min, max는 각각 경우에 따라 미만, 초과 또는 이하, 이상 둘 중에 하나로 해석될 수 있는데, 소속된 팀에서 한 가지로 정하고 그 컨벤션을 따라야 한다.
    • 또는 상수 네이밍을 할 때, MIN_NUMBER_LIMITMIN_NUMBER_LIMIT 처럼 LIMIT를 붙여주면, 그 네이밍으로부터 그 상수가 그 값을 포함하지 않는 그 값의 미만, 초과 를 지칭함을 알 수 있다. (그럼에도 헷갈릴 수 있으므로 팀 내에서 컨벤션을 정하는 것이 좋다)
  • 명시적인 코드를 작성할 수 있도록 의식적으로 노력하자.

2. begin-end

  • begin에서 경계는 포함되고 end에서는 경계가 포함되지 않는 암묵적인 규칙이 있다.
  • 예를 들어, 에어비앤비 사이트에서도 체크인 날짜(begin)는 포함되고 체크아웃 날짜(end)는 포함되지 않는다. 시중의 수많은 데이터 피커 라이브러리도 이와 같이 begin과 end를 구분한다.
function reservationDate(beginDate, endDate) {
  // some code...
}

reservationDate('2021-12-10', '2021-12-12');
// 위와 같은 경우 예약일에는 2021-12-10과 2021-12-11을 포함할 것을 예상할 수 있다.

3. first-last

  • first-lastbegin-end와 달리 양 끝의 경계를 포함한다.(~부터 ~까지)
range(first=1, last=4);
// 1,2,3,4가 다 포함된다.

4. prefix-suffix

  • 네이밍 시 prefix와 suffix를 염두하면 좋다.

  • prefix

    • prefix(접두사)는 명사의 앞에 붙는다.
    • 자바스크립트의 getter와 setter를 예로 들 수 있다.
      • setget이라는 예약어를 메서드 앞에 붙여준다.
    • React에서는 use 접두사가 있는데, 이렇게 네이밍된 메서드는 Hook으로 약속되어 있음을 알 수 있다.
    • jQuery에서는 $ 를 접두사로 쓰는 약속이 있다.
    • 자바스크립트에서는 ES2019부터 해쉬 # prefix 를 추가해 private class 필드를 선언할 수 있게 되었다.
    • 라이브러리 관점에서 prefix를 살펴보자면, Loadsh 라이브러리를 접근할 때 underscore(_) 를 이용함을 알 수 있다.
  • suffix

    • suffix(접미사)는 명사의 뒤에 붙는다.
    • suffix를 통해, 상태를 표현할 수 있다.
const CHECKOUT_REQUEST = 'CHECKOUT_REQUEST'
const CHECKOUT_SUCCESS = 'CHECKOUT_SUCCESS'
const CHECKOUT_FAILURE = 'CHECKOUT_FAILURE'
  • 코드를 짤 때, 이와 같이 prefix와 suffix를 활용하여 스스로 규칙을 만들고 팀과 함께 공유하며 일관된 네이밍을 하는 것이 좋다.

5. 매개변수의 순서가 경계다.

  • 호출하는 함수의 네이밍과 인자의 순서간의 연관성을 고려한다.
  1. 매개변수는 2개가 넘지 않도록 만든다.
  2. 불규칙적인 매개변수가 들어온다면, arguments나 rest parameter 사용을 고려한다.
  3. 매개변수를 객체에 담아서 넘긴다. 객체로 담긴 매개변수라면 순서는 상관이 없게 된다.
  4. 이미 만든 함수가 있고 이를 고치기 어렵다면, Wrapping하는 함수를 하나 만든다.
function someFunc(someArg1, someArg2, someArg3, someArg4) {
}

function getFunc(someArg1, someArg3) {
    someFunc(someArg1, undefined, someArg3);
}
// 그 함수를 또 호출하는 형태의 새 함수를 만들어서 2개 이하의 매개변수만 받는다.

좋은 웹페이지 즐겨찾기