일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- redux
- 그럼에도 불구하고
- max-width
- cleancode
- media query
- TypeScript
- java
- webpack
- 자바문제풀이
- frontend
- github
- git
- JavaScript
- node.js
- 변수
- JS
- CSS
- @media
- 코딩테스트
- react-router-dom
- HTML
- react
- coding
- 코드업
- 프론트엔드
- 자바
- Servlet
- 그럼에도불구하고
- node
- 반응형 페이지
- Today
- Total
그럼에도 불구하고
[CleanCode] 경계 다루기 본문
오늘은 경계를 다루는 법에 대해 알아보겠습니다!
목차
[ 경계 다루기 ]
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개의 인자가 들어가는데 beginDate와 endDate가 있습니다. 인자의 이름을 시작과 끝이라는 네이밍을 해줌으로써 보다 직관적인 값을 필요로 하는 것을 알 수 있습니다.
예를 들어 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 |