[javascript] 경계 다루기

KoEunseo·2023년 6월 19일

JavaScript REST arguments getter setter 경계

javascript

목록 보기

24/32

min - max

변수명을 보고 의미를 파악하기 쉽도록 최소값, 최대값을 상수로 명시적으로 지정한다. MIN_AGE 이런식.
이때, 경계값을 포함하는지 여부를 반드시 정리해야한다.
경계값이 포함되는지, 되지 않는지 여부를 변수명에 포함시키면 더 좋다.

MIN_IN_AGE = 20 //: 최소20세(포함: in)
MAX_HEIGHT_LIMIT = 2(m) //: 최대 2m(미만: limit)

begin - end

숙박 어플을 쓰면 예약 시작날짜와 끝날짜를 선택하는 부분이 있다.
begin은 보통 고정이고 포함된다. end는 유동적으로, 포함되거나 포함되지 않는다.

function reservationDate(beginDate, endDate) {};

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

first - last

min-max는 연속성이 있고 순차적이라면 first - last는 연속적이지 않고 순차적이지 않은 값이다. 포함된 양 끝의 범위를 말한다.
자바스크립트에서 element.lastChild(), element.firstChild()와 같다.

const bread = ['치아바타', '바게트', '식빵', '소금빵'];
function getBread(first, last) {};
getBread('바게트', '소금빵'); //['바게트', '식빵', '소금빵'];

prefix - suffix

접두사-접미사를 활용한다.
예를 들어, 리액트에서 hook을 네이밍할때 접두사로 use를 사용한다.
접두사와 접미사 컨벤션을 정하고 으례 사용하는 관습적인 문자들을 사용하면 소통이 더 원활하게 이루어질 수 있고, 코드 파악이 쉬울 것이다.

//react
const [isOpen, setIsOpen] = useState(false);
//javascript
function func(name) {
  this._name = name; //class가 생기기 전에 언더바로 private 변수를 나타냈음.
}
class func { //class에서 #으로 private함을 명시한다.
  #name = name;
}

getter, setter

접근자 프로퍼티를 getter, setter메서드로 표현한다.

const obj = {
  get name() {
    //getter, obj.name 으로 실행
  }
  set name(value) {
    //setter, obj.name = value 으로 실행
  }
}

바깥 코드에서 접근자 프로퍼티를 일반 프로퍼티처럼 사용한다. 함수처럼 호출하지 않는다.

const user = {
  name: 'Sam',
  surname: 'Smith'

  get fullName() {
    return `${this.name} ${this.surname}`;
  }

  set fullName(value) {
    [this.name, this.surname] = value.split(" ");
  }
};

console.log(user.fullName); // Sam Smith;
user.fullName = "Ariana Grande";
console.log(user.name); // ariana

접미사는 보통 파일이나 폴더명에 s를 붙임으로 사용한다.
단일 파일일때, 복수파일일때를 구분한다.

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

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

tips!

매개변수가 두개를 넘지 않도록 한다.

arguments, rest 파라미터를 활용한다.

매개변수를 객체에 담아서 넘긴다. 이때는 순서가 상관 없어지게 된다.

랩핑하는 함수를 만들어 활용한다.

function func(arg1, arg2, arg3, arg4) {} // bad!

function func(arg1, ...args) {} // 2 예시

function func({arg1, arg2, arg3, arg4}) // 3 예시

function getFunc(arg1, arg3) { // 4 예시
  func(arg1, undefined, arg3);
}