[클린코드 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_LIMIT
나 MIN_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-last
는 begin-end
와 달리 양 끝의 경계를 포함한다.(~부터 ~까지)
range(first=1, last=4);
// 1,2,3,4가 다 포함된다.
4. prefix-suffix
-
네이밍 시 prefix와 suffix를 염두하면 좋다.
-
prefix
- prefix(접두사)는 명사의 앞에 붙는다.
- 자바스크립트의 getter와 setter를 예로 들 수 있다.
set
과 get
이라는 예약어를 메서드 앞에 붙여준다.
- 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. 매개변수의 순서가 경계다.
- 호출하는 함수의 네이밍과 인자의 순서간의 연관성을 고려한다.
- 매개변수는 2개가 넘지 않도록 만든다.
- 불규칙적인 매개변수가 들어온다면, arguments나 rest parameter 사용을 고려한다.
- 매개변수를 객체에 담아서 넘긴다. 객체로 담긴 매개변수라면 순서는 상관이 없게 된다.
- 이미 만든 함수가 있고 이를 고치기 어렵다면, Wrapping하는 함수를 하나 만든다.
function someFunc(someArg1, someArg2, someArg3, someArg4) {
}
function getFunc(someArg1, someArg3) {
someFunc(someArg1, undefined, someArg3);
}
// 그 함수를 또 호출하는 형태의 새 함수를 만들어서 2개 이하의 매개변수만 받는다.
Author And Source
이 문제에 관하여([클린코드 JS] 경계 다루기(코드 컨벤션)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@jangws/6.-경계-다루기코드-컨벤션
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
function isAdult(age) {
if (age > 20) {
}
}
const MAX_AGE = 20; // 값을 하드코딩하지 않고 상수화하여 다른 사람이 이 코드를 볼 때 쉽게 이해할 수 있도록 돕는다.
isAdult(MAX_AGE); // 그러나 MAX_AGE가 뜻하는 것이 그 최대값을 포함하는 건지 아닌지 알기 어렵다.
min, max
는 각각 경우에 따라미만, 초과
또는이하, 이상
둘 중에 하나로 해석될 수 있는데, 소속된 팀에서 한 가지로 정하고 그 컨벤션을 따라야 한다.- 또는 상수 네이밍을 할 때,
MIN_NUMBER_LIMIT
나MIN_NUMBER_LIMIT
처럼 LIMIT를 붙여주면, 그 네이밍으로부터 그 상수가 그 값을 포함하지 않는 그 값의미만, 초과
를 지칭함을 알 수 있다. (그럼에도 헷갈릴 수 있으므로 팀 내에서 컨벤션을 정하는 것이 좋다)
function reservationDate(beginDate, endDate) {
// some code...
}
reservationDate('2021-12-10', '2021-12-12');
// 위와 같은 경우 예약일에는 2021-12-10과 2021-12-11을 포함할 것을 예상할 수 있다.
first-last
는 begin-end
와 달리 양 끝의 경계를 포함한다.(~부터 ~까지)range(first=1, last=4);
// 1,2,3,4가 다 포함된다.
네이밍 시 prefix와 suffix를 염두하면 좋다.
prefix
- prefix(접두사)는 명사의 앞에 붙는다.
- 자바스크립트의 getter와 setter를 예로 들 수 있다.
set
과get
이라는 예약어를 메서드 앞에 붙여준다.
- 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'
function someFunc(someArg1, someArg2, someArg3, someArg4) {
}
function getFunc(someArg1, someArg3) {
someFunc(someArg1, undefined, someArg3);
}
// 그 함수를 또 호출하는 형태의 새 함수를 만들어서 2개 이하의 매개변수만 받는다.
Author And Source
이 문제에 관하여([클린코드 JS] 경계 다루기(코드 컨벤션)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jangws/6.-경계-다루기코드-컨벤션저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)