그럼에도 불구하고

👨‍💻

[CleanCode] 경계 다루기 본문

JavaScript/Clean code

[CleanCode] 경계 다루기

zenghyun 2023. 5. 25. 18:22

오늘은 경계를 다루는 법에 대해 알아보겠습니다!

 

 

[ 경계 다루기 ]

1. 명확하게 최소와 최댓값을 다룬다.

 

2. 최솟값과 최댓값 포함 여부를 확실하게 결정한다. (이상-초과 / 이하-미만) 

 

3. 혹은 네이밍에 최솟값과 최댓값 포함 여부를 표현한다. 

 

4. 누가봐도 명시적인 코드를 작성하자 

 



아래의 예시를 보겠습니다.

 

1
2
3
4
5
6
const getRandomNumber = (min, max) => {
    return Math.floor(Math.random() * (max - min + 1)) + min;
};
 
 
console.log(getRandomNumber(1,45));
cs

 

이 코드의 경우 매개변수로 최솟값과 최댓값을 넣어주면 그 사이에서 무작위로 숫자를 선정해 주는 함수입니다. 

 

min 값과 max 값을 직접적으로 숫자를 기입해서 적는 방식은 여러 가지 단점이 있습니다. 

 

첫 번째로 만약 min과 max가 바뀐다면, 직접 숫자를 바꿔야 합니다.  

 

두 번째로 이 함수를 여러 곳에서 사용한다면 사용하는 곳마다 찾아가서 min과 max를 바꿔줘야 합니다. 

 

이런 작업은 상당히 귀찮고 불편합니다.

 

다음과 같이 작성해보는건 어떨까요?

 

1
2
3
4
5
6
7
8
9
const getRandomNumber = (min, max) => {
    return Math.floor(Math.random() * (max - min + 1)) + min;
};
 
// 상수
const MIN_NUMBER_LIMIT = 1
const MAX_NUMBER_LIMIT = 45
 
console.log(getRandomNumber(MIN_NUMBER_LIMIT, MAX_NUMBER_LIMIT));
cs

 

최솟값과 최댓값을 상수로 지정함으로 인해 많은 이점이 생겼습니다. 

 

첫 번째로 최소값과 최댓값이 변경된다면 상수에 지정한 값만 바꾸면 됩니다. 이 함수를 많은 곳에서 사용한다면 일일이 바꿀 필요가 없습니다.

 

두 번째로 함수의 매개변수에 직접적으로 네이밍 한 상수 값이 들어가면서 보다 명시적인 코드로 보입니다. 

 

 

[ Begin - End ]

 

1
2
3
4
5
6
7
8
// Begin - End 
 
const reservationDate = (beginDate, endDate) => {
    // ...some code
};
 
 
reservationDate('2023-01-01''2023-05-31');
cs

 

위의 코드와 같이 여행일정을 관리해 주는 reservationDate라는 함수가 있다고 가정해 봅시다.

 

이 함수에는 2개의 인자가 들어가는데 beginDateendDate가 있습니다. 인자의 이름을 시작과 끝이라는 네이밍을 해줌으로써 보다 직관적인 값을 필요로 하는 것을 알 수 있습니다.

 

예를 들어 2개의 인자를 date1, date2라고 적어놓은 것보다는 훨씬 보기 좋은 것처럼요 

 

 

[ First - Last ]

1. First와 Last 모두 포함된 양 끝을 의미한다.

 

2. ~~부터 ~~ 까지

 

3. 양 끝점이 존재하나 그 안의 규칙이 보장되지는 않는다.

 

아래의 예시를 보겠습니다.

 

1
2
3
4
5
6
7
8
9
10
11
const students = ['정현''존''피터''지민'];
 
const getNumberOfStudents = (first, last) => {
   // ... some code
   const firstIndex = students.findIndex(index => index === first);
   const lastIndex = students.findIndex(index => index === last);
 
   return (lastIndex - firstIndex  + 1 );
};
 
console.log( getNumberOfStudents('정현''지민') );
cs

 

getNumberOfStudents에 첫 번째 인자와 두 번째 인자에 학생 이름을 넣게 되면 자신을 포함한 두 학생 사이의 총 학생 수를 알려주고 있습니다.

 

 

[ 유지보수에 취약한 함수를 만들지 않기 위한 방법  ]

 

아래의 예시를 보겠습니다.

 

1
2
3
4
5
6
7
8
9
10
const getAvg = ( math, english, science, society ) => {
// ... some code
};
 
const MATH = 90;
const ENGLISH = 80;
const SCIENCE = 95;
const SOCIETY = 85;
 
console.log(getAvg( MATH, ENGLISH, SCIENCE, SOCIETY ));
cs

 

math, english, science, society 4개의 과목 점수를 입력하면 평균을 구해주는 함수가 있다고 가정해 봅시다. 

 

매개변수에 일일이 점수를 넣는 것보다는 아래와 같이 점수를 객체에 담아서 넘기는 방법은 어떨까요? 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const getAvg = (score) => {
  const { MATH, ENGLISH, SCIENCE, SOCIETY } = score;
  // ... some code
};
 
const MATH = 90;
const ENGLISH = 80;
const SCIENCE = 95;
const SOCIETY = 85;
 
const score = { MATH, ENGLISH, SCIENCE, SOCIETY };
 
console.log(getAvg(score));
 
cs

 

📌 유지보수에 취약한 함수를 만들지 않기 위한 방법

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

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

3. 매개변수를 객체에 담아서 넘긴다.

4. 랩핑 하는 함수를 만든다. 

 

 

'JavaScript > Clean code' 카테고리의 다른 글

[CleanCode] 배열 다루기  (0) 2023.06.01
[CleanCode] 분기다루기  (0) 2023.05.30
[CleanCode] isNaN? is Not A Number?  (0) 2023.05.24
[CleanCode] undefined와 null의 차이  (0) 2023.05.24
[CleanCode] 타입 검사  (0) 2023.05.24
Comments