순서
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);
}
'Javascript > Clean Code' 카테고리의 다른 글
5.배열다루기 -1 (Javascript의 배열은 객체다, Array.length, 배열 요소에 접근하기, 유사 배열 객체, 불변성) (0) | 2021.12.10 |
---|---|
4. 분기 다루기 - 2(else if/else 피하기, Early Return, 부정 조건문 지양, Default Case, 명시적인 연산자, Nullish coalescing operator, 드모르간의 법칙) (0) | 2021.12.09 |
3. 분기 다루기 - 1 (값식문, 삼항 연산자, Truthy & Falsy, 단축평가) (0) | 2021.12.09 |
0.클린코드 자바스크립트 (0) | 2021.12.06 |
1.Type을 다루기 (0) | 2021.12.06 |