JavaScript - 클린코드 자바스크립트, 경계 다루기

경계 다루기

min-max

• 최소값과 최대값을 상수로 명시적으로 지정해야 함
  • 상수 이름을 보고 의미를 파악하기 쉬움

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 MIN_NUMBER_LIMIT = 1; // 미만
const MAX_NUMBER_LIMIT = 45; // 초과

const MIN_IN_NUMBER = 1; // 이상
const MAX_IN_NUMBER = 45; // 이상

genRandomNumber(MIN_NUMBER, MAX_NUMBER);

begin-end

• begin
  • 동일한 값, 고정됨
• end
  • 다른 값, 포함되거나 포함되지 않음
• begin-end
  • calender, date picker에서 사용하는 경계

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

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

first-last

• first-last
  • 포함된 양끝 범위
  • ~부터 ~까지
  • min-max와 달리 사이 값이 규칙적이거나 연속적이지 않음

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

function getStudents(first, last) {
  // ...some code
}

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

element.firstChild();
element.lastChild();

prefix-suffix

• prefix와 suffix

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

• prefix 사용 예

// React의 Hook
useState
useEffect
useContext
useReducer

// JavaScript - private field
function FactoryFunction(name) {
  this._name = name;
}

class FactoryFunction {
  #name = name
}

// Underscore Library
_.filter([1, 2, 3, 4], (num) => num % 2 === 0);

// Loadash Library
_.chuck(['a', 'b', 'c', 'd'], 2);


// Component Naming
BaseButton.jsx
BaseTable.jsx
BaseIcon.jsx

• suffix 사용 예

// redux
export const STARRED_REQUEST = 'STARRED_REQUEST'; // 요청
export const STARRED_SUCCESS = 'STARRED_SUCCESS'; // 성공
export const STARRED_FAILURE = 'STARRED_FAILURE'; // 실패

// 단일 파일명
student.js
// 복수 파일명 +s
students.js

매개변수의 순서

• 매개변수의 순서가 경계임

function someFunc(someArg, someArg) {}

genRandomNumber(1, 50);
genDates('2021-10-01', '2021-10-31');
genSuffleArray(1, 5);

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

• 함수의 인자가 너무 많은 경우

  1. 매개변수를 2개가 넘지 않도록 만든다.
  2. arguments, rest parameter 사용을 고려한다.
  3. 매개변수를 객체에 담아서 넘긴다.
  4. 래핑하는 함수를 만든다.

// before
function someFunc(someArg1, someArg2, someArg3, someArg4) {}

// after
function someFunc(someArg1, ...args) {}
function someFunc({someArg1, someArg2, someArg3, someArg4})