[클린코드 JS] 경계 다루기

해당 글은 유데미 클린코드 자바스크립트 강의를 정리한 내용입니다.

🟥 Min - Max

⭐ 최소값과 최대값을 다룬다.

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

const MIN_NUMBER = 20;
const MAX_NUMBET = 45;

//이름만 봐도 사용의 의미를 알 수 있음. 
genRandomNumber(MIN_NUMBER, MAX_NUMBET)

 

⭐최소값 최대값 포함여부를 결정해야한다. (이상/초과) (이하/미만)

function isAdult(age){
    //19살 초과만 가입을 원할 때이지만, 
    // 포함인지 아닌지 판단하기 힘들다.
}

• 포함여부는 중요하기 때문에, 이상 초과 vs 이하, 미만에 대해서 다루는 컨벤션을 정의해야한다.

→ 컨벤션을 정의해야한다.

 

⭐혹은 네이밍에 최소값과 최대값 포함 여부를 포함한다.

→ MAX_LIMIT / MIN_IN
→ IN을 통해 포함이 된다는 것을 명시하던지, LIMIT을 통해 포함하지 않는 것을 명시

 

---

🟧 Begin - END

시작과 끝은 min, max와는 다르다. 야놀자의 예약사이트의 datePicker를 예를들어 보자.

2/6일은 BEGIN, 2/9일은 END로 이해하면 된다.

//begin과 end를 표현하여 함수만들기
function reservationDate(beginDate, endDate){
    //some code
}

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

 

---

 

🟨 First - Last

포함된 양을 끝을 의미한다. 연속성이 없고 규칙성이 없다면, First와 Last를 고려할 수 있다.

ex ) 학생들이 포함된 리스트, DOM 요소(first-child, last-child)

const students = ['주하', '민하','세하'];

childNode =node.firstChild;
childNode =node.lastChild;

 

---

 

🟩 Prefix - Suffix

💡 코드를 볼때 사용자 정의를 통해서 일관성을 가질 수 있게 한다.

• Prefix의 예
  • getter, setter
  • 리액트의 HOOK, 앞에 use를 붙인다.
  • 자바스크립트의 # private field

function FactoryFunction(name){
    this._name = name 
}

// prefix syntax suger 
class FactoryFunction(name){
    #name =  name   // name이 private 변수를 #prefix로 표시를 함 
}

• suffix의 예
  • 파일명 복수개를 사용할 때는 끝에 s를 붙인다 (components)

---

 

🟦 매개변수의 순서가 경계다

호출하는 함수의 네이밍과 인자의 순서의 연관성을 고려해라

1. 매개변수는 2개가 넘지 않도록 한다.

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

2. arguments, rest parameter

 

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

// 객체에 담아서 보내주면 순서가 상관이 없음 
function someFunc({arg1, arg2, arg3, arg4}){
}

4. 래핑하는 함수 → 최악의 상황!

function getFunc(arg1, arg3){
	someFunc(arg1, undefined, arg3);
}