본문 바로가기

Javascript/Clean Code

2.경계 다루기(min-max, begin-end, first-last, prefix-suffix 등)

순서

1.min-max

2.begin-end

3.first-last

4.prefix-suffix

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

 


1.min-max

 

아래와 같이 함수부를 보지 않더라도 이름만으로 명시적으로 알수 있게 표현하는 것이 좋다.

genRandomNumber만 보더라도 랜덤숫자를 만들려고 하는 건지 알 수 있다.

//경계 다루기


//상수
const MIN_NUMBER = 1;
const MAX_NUMBER = 45;

genRandomNumber(MIN_NUMBER, MAX_NUMBER); //최소, 최대 순대로

 

최대, 최소값을 할 때는 숫자까지 포함하는지 안되는지를 팀내에서 확실히 정하는 것이 좋다.

 

이상, 초과 vs 이하, 미만

이름에 LIMIT이라던지, IN을 하던지를 꼭 표시하는 것이 좋다.

const MIN_IN_NUMBER //포함을 의미



const MIN_LIMIT_NUMBER //포함하지 않는다는 의미

 

정리

1. 최대값과 최소값을 다룬다

2. 경계 여부를 확실히 표현한다.(이상, 초과 vs 이하, 미만)

3. 이름에 LIMIT이라던지, IN을 하던지를 꼭 표시하는 것이 좋다. 

 


2.begin-end

: 경계를 포함하지만 제외하는 경우가 있다.

: 시작은 같으나 끝이 같지 않는 경우가 많다.

 

예를 들어 여행의 체크인이 그대로이고,  체크아웃은 같지 않을수가 있다.

 

함수의 이름을 정할때 명시적으로 아래와 같이 정해두면 처음과 마지막을 이해할 수 있다.

function reservationDate(beginDate, endDate) {
  //...some code
}

reservationDate('YYYY-MM-DD','YYYY-MM-DD');

 


3.fist-last

: 아래와 같이 양 끝점이 존재하나 안에 있는 요소의 규칙이나 연속성이 보장이 되지 않는 경우

const students = ['포코','존','현석'];

function getStudents(first, last) {
  // ...some code
}

getStudents('포코', '현석');

 

다른 예로는 html요소도 생각해 볼 수 있다.

dom에 first child, last child가 있다.

element.firstChild
element.lastChild

 


4.prefix - suffix(접두사와 접미사)

: 접두사는 맨밥, 맨손 처럼 앞쪽에 붙는 '맨'처럼 앞에 붙는 것을 prefix(접두사)라고 한다.

: 접미사는 뒷쪽에 붙는 덮개, 지우개, 마개 등 '개'처럼 뒤에 붙는 것을 suffix(접미사)라고 한다.

 

-.prefix

> 이름으로 약속을 하는 경우가 많은데 use같은 경우는 hook으로 사용을 하며,

> JQuery에서는 prefix로 $를 사용한다.(이것으로 API에 접속한다.)

> 예전에는 underscore(_)로 private한 필드를 표현했지만, 현재는 private한 필드를 #을 쓰면 지원한다.

> 팀내에서 Prefix로 약속을 정해서 사용하는 것이 좋다.

 

-.suffix

> STARRED_REQUEST, STARRED_SUCCESS, STARRED_FAILURE 처럼 suffix 규칙을 정해서 쓸수도 있다.

> 단수, 복수(s)도 규칙을 정해서 쓰기도 한다.

> suffix도 prefix와 마찬가지로 같은 규칙을 만들어서 사용하면 좋다.

 


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

: 호출하는 함수의 네이밍과 인자 순서의 연관성을 고려한다.

: 함수의 인자를 두개이상을 넘기지 않게 하는 것이 좋다.(명시적으로 아래와 같이 보이게 하려고)

function someFunc(someArg, someArg) {

}

getRandomNumber(1, 50); //1에서 50까지의 난수를 생성한다고 생각할 수 있다.
getDates('2021-10-01', '2021-10-31'); // 날짜를 10월1일부터 31일까지 가져오는 걸로 이해할수 있다.
genShuffleArray(1, 5) //1에서부터 5까지 섞는다고 생각할 수 있다.

 

정리

1. 매개변수를 2개가 넘지 않도록 만든다.

2. arguments, rest parameter를 고려한다.

3. 매개변수를 객체에 담아서 넘긴다.(객체에 담으면 순서가 상관없음)

4. 랩핑하는 함수를 하나 만든다. (그 함수를 호출하는 형태의 함수를 하나 만들어버린다.)

: 아래와 같이 someFunc가 하나가 있지만, getFunc처럼 2개만 매개변수를 가지게 따로 만들었다.

function someFunc(someArg1, someArg2, someArg3, someArg4) {
  //...some code
}


function getFunc(someArg1, someArg3) {
  someFunc(someArg1, undefined, someArg3);
}