클린코드 자바스크립트 [4] 경계 다루기

Doozuu·2023년 12월 5일
0

Javascript

목록 보기
91/99

경계를 다루는 다양한 단어들이 있는데, 어떤 상황에 어떤 단어를 사용하는 것이 좋을까?


min, max

최솟값과 최댓값을 다룰 때는 경계의 포함 여부를 결정해야 한다.(이상/이하, 초과/미만)
-> 경계를 항상 포함시키거나 항상 포함시키지 않도록 해서 일관되게 사용해야 한다.
-> 혹은 네이밍에 경계의 포함 여부를 표현한다.(포함하면 IN, 포함하지 않으면 LIMIT 표기)

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

const MAX_NUMBER = 45; // 경계값은 상수로 표현
const MIN_NUMBER = 1;

genRandomNumber(MIN_NUMBER, MAX_NUMBER);
const MAX_AGE = 20;
// const MAX_IN_AGE = 20; IN을 사용하여 포함됨을 명시적으로 표현
// const MAX_AGE_LIMIT = 20; LIMIT을 사용하여 포함되지 않음을 명시적으로 표현

function isAdult(age){
	if(age >= MAX_AGE) {
    	
    }
}



begin, end

시작과 끝이 동일하지 않은 경우

예시) 달력
체크인 : begin
체크아웃 : end

function reservationDate(beginDate, endDate) {

}

// 시작, 끝 순서 지키기
reservationDate('YY-MM-DD','YY-MM-DD');



first, last

양 끝은 무조건 포함되지만, 그 사이에 있는 값은 포함되지 않을 수도 있음.

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

function getStudents(first, last){

}

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



prefix, suffix

  • prefix : 접두사
  • suffix : 접미사

예시

  • setter, getter : set, get prefix 사용.
  • React : use prefix를 사용해 hook임을 나타냄 (useState, useEffect,,)
  • jQuery : $ prefix 사용.
  • Lodash : _ prefix 사용.
  • javascript : private 필드 선언할 때 # prefix 사용.
    -> 네이밍이 주는 약속
function FactoryFunction(name){
	this._name = name;
}

class FactoryFunction{
	#name = name;
}
  • Redux : 네트워크 상태를 suffix를 이용해 보여줌.
    파일이 여러개 들어있는 폴더에는 s 붙이기.

prefix/suffix 규칙을 만들고, 스타일 가이드를 따라서 코드를 작성하면 코드의 일관성을 유지할 수 있다.



매개변수의 순서가 경계다

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

  1. 매개변수의 개수는 2개를 넘기지 않도록 한다.
  2. 매개변수가 여러개일 때는 매개변수를 객체에 담아서 넘기거나, rest parameter(...)을 이용하거나, arguments 객체를 활용한다.
  3. 랩핑하는 함수를 만든다.
function someFunc(someArg1, someArg2, someArg3, someArg4){
}

function getFunc(){
	someFunc(someArg1, undefined, someArg3); // 순서를 지켜야 하기 때문에 사용하지 않는 거는 undefined로 표현
}

객체를 이용해 매개변수를 넘기면 매개변수의 순서를 신경쓰지 않아도 되므로 좋다.

profile
모든게 새롭고 재밌는 프론트엔드 새싹

0개의 댓글