클린코드 자바스크립트: 경계 다루기

min - max

 

min - max를 명시적으로 다루는 방법

 

1. 최소값과 최대값을 다룬다
2. 최소값과 최대값 포함 여부를 결정해야 한다. (이상-초과 / 이하-미만)
3. 혹은 네이밍에 최소값과 최대값 포함 여부를 표현한다.

 

 

예제

function genRandomNumber(min, max) {
	return Math.floor(Math.random() * (max - min + 1)) + min;
}


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

genRandomNumber(MIN_NUMBER, MAX_NUMBER);

const MAX_AGE = 20

function isAdult(age) {
	// 최소, 최대값 (포함되는지 vs 안되는지)
    // 이상, 초과 vs 이하, 미만
	if (age >= 20) {
    
    }
}

 

• 명시적인 코드(상수) 사용으로 코드의 구현부를 보지 않아도 읽을 수 있으나 경계값이 포함되는지 모호함.

 

// limit이라는 네이밍에서 이 한계를 넘으면 안된다는 초과 또는 미만으로 생각하기 쉬움
const MIN_NUMBER_LIMIT = 1;
const MAX_NUMBER_LIMIT = 45;


// in이라는 네이밍에서 이상 또는 이하로 생각하기 쉬움
const MIN_IN_NUMBER = 1;
const MAX_IN_NUMBER = 45;

 

• 네이밍을 명확하게 해서 경계값 포함 여부 나타내는 방법도 있음
• 그러나 네이밍 자체로 해석하기는 모호한 부분이 있기 때문에 팀 내에서 컨벤션을 정의하고 사용하는 것이 좋음

 

 

begin - end

 

• 경계를 제외하는 경우
• ex) 시작은 동일한데 끝이 다른 경우
• ex) 에어비앤비에서 날짜를 선택할 때 체크인 날짜(시작) 체크아웃 날짜(끝)

 

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

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

 

 

 

first - last

 

• min, max와 비슷하지만 다름
• 양 끝점이 존재하나 그 사이의 값들의 연속성을 보장할 수 없는 경우
• dom요소에도 first child, last child가 있는데 비슷한 예임

 

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

function getStudents(fist, last) {
	// ...some
}

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

 

 

prefix - suffix

 

• prefix(접두사): 앞에 붙는
  • ex) 시아버지, 시어머니
• suffix(접미사): 뒤에 붙는
  • ex) 덮개, 지우개

 

 

예시

 

• setter사용할 때 앞에 set 붙여 쓰는 것
• react에서 use prefix 사용하면 기본 hook이라는 뜻임
  • ex) useState, useEffect, useContext..  
• 제이쿼리에서 $ prefix 사용하는 경우
• vue에서 컴포넌트 네이밍할 때 
  • ex) BaseButton.vue, BaseTable.vue, AppButton.vue, AppTable.vue
• 자바스크립트에서 private filed 사용할 때

 

 

 

코드의 일관성을 가질 수 있는 좋은 방법임

 

 

 

 

매개변수의 순서가 경계다

function someFunc(someArg, someArg) {
	
}

genRandomNumber(1, 50);
getDates('2021'-10-01', '2021-10-31');
getShuffleArray(1, 5);

 

• 대립된 관계, 평등하면서도 평행한 관계 등을 함수 네이밍과 인자들을 통해 유추 가능함
• 호출하는 함수의 네이밍과 인자의 순서의 연관성을 고려한 함수를 만드는 것이 좋음
• 그렇게 못 만들었다면 처음에 함수를 만들 때부터 유추 가능하도록 매개 변수의 개수를 2개가 넘지 않도록 하기
• 규칙적이지 않거나 2개 이상의 매개변수를 사용하게 되는 경우에는 객체로 받거나 rest 연산자 사용하거나 arguments 객체 사용하는 방법

 

 

 

 

참고: 유데미 클린코드 자바스크립트 강의