[클린코드 For JS] 4. 경계

🔖TAG 💡prefix|suffix, 💡경계, 💡매개변수의순서, 💡이상|초과, 💡이하|미만, 💡접두사|접미사, 💡처음|끝📕

출처😌

클린코드 자바스크립트 | Udemy

자료🙄

Git: pocojang/clean-code-js (github.com)

---

목차

1. 과정 소개 
2. 변수 다루기 
3. 타입 다루기
4. 경계 다루기 🚩
    4-1. min - max
    4-2. begin - end
    4-3. first - last
    4-4. prefix - suffix
    4-5. 매개변수의 순서가 경계다
5. 분기 다루기
6. 배열 다루기
7. 객체 다루기
8. 함수 다루기

---

4. 경계 다루기 (이상, 초과 ~ 이하, 미만)

코드를 작성할 때 경계에 대한 컨벤션을 미리 정하는게 유지보수에 유리합니다.

경계란 최대값과 최소값의 포함 여부에 대해서 결정하는것을 말합니다.

최소값 [ 이상 | 초과 ] 인지 최대값 [ 이하 | 미만 ] 인지 명확하게 해야 혼동을 방지할 수 있습니다.

 

4-1. min - max

Math.random() 이해하기

Math.floor(Math.random() * 숫자) // 0이상 ~ 숫자-1이하의 정수
Math.floor(Math.random() * 10) // 0이상 ~ 9이하의 정수

최소값 이상 ~ 최대값 이하 (경계값 포함)

/**
 * 경계 다루기 (min-max)
 *
 * 1. 최소값와 최대값을 다룬다
 * 2. 최소값와 최대값 포함 여부를 결정해야한다 (이상-초과 / 이하-미만)
 * 3. 혹은 네이밍에 최소값과 최대값 포함 여부를 표현한다.
 */
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);

// 예시😃
genRandomNumber(20, 40); 

// 로직 이해하기
Math.floor(Math.random() * (max - min + 1)) + min;

(Math.random() * 21) 	// (max - min + 1) === (40 - 20 + 1) === 21 // 0.xxx ~ 20.xxx
Math.random(Math.random() * 21) 	// 0이상 20이하의 정수 도출 
Math.random(Math.random() * 21) + 20 	// 20이상 40이하의 정수 도출

경계값 초과 (미포함)

const MAX_AGE = 20;

function isAdult(age) {
	// 최소값, 최대값 (포함되는지 vs 안되는지)
	// 이상, 초과 vs 이하, 미만
	if (age > MAX_AGE) {
	}
}

isAdult(30);

 

4-2. begin - end

ex) AirBnb 숙박 일정 잡기(체크인, 체크아웃)

    ☞ 1월1일 체크인 ~ 1월 3일 체크아웃

/**
 * begin - end
 *
 * 경계를 포함하지만 제외하는 경우
 */

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

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

 

4-3. first - last

min 과 max에서는 1~5라고 가정할 때 1,2,3,4,5가 연속성을 가집니다.

하지만 1~5 사이이기는 하지만 1,2,5처럼 연속성을 가지지 않을 수 있습니다.

이 때는 first-last 개념을 고려할 수 있습니다.

즉, first-last는 양 끝점이 존재하나, 그 안에 있는 요소에 대한 규칙이나 연속성이 보장되지 않는걸 말합니다.

/**
 * first - last
 *
 * 포함된 양 끝을 의미한다.
 * 부터 ~~~ 까지
 */

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

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

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

 

📌다른 예시로 HTML DOM 이 있습니다.

element.firstChild(첫 자식리턴) 와 element.lastChild는 양 끝점이 존재 하지만, 그 사이 연속성은 보장되어 있지 않습니다.

 

4-4. prefix - suffix

접두사, 접미사 개념은 실생활에서 자주 쓰입니다.

 

프로그래밍 관점에서 접두사와 접미사를 많이 쓰는 경우의 예시는 아래와 같습니다.

naming이 주는 약속이 중요한 작용(코드의 일관성을 유지)을 합니다.

 

① JS의 getter, setter

setter는 JS에서 객체를 다룰 때 쓰는 개념입니다.

/**
 * start - stop
 *
 * 포함된 양 끝을 의미한다.
 * 부터 ~~~ 까지
 */

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

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

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

② React 계열의 Hooks

useState, useEffect, useContext, useReducer ... 처럼 use를 접두사로 써서

'use는 React에서 Hook이구나!'를 간접적으로 나타내줍니다.

 

③ jQuery의 문법

  jquery는 Html 태그를 선택할 때 공통적으로 접두사로 ' $ ' 를 사용합니다.

  

④ JS에서 생성자 함수를 만들 때 private field를 나타낼 때 붙이는 접두사 '_'

  ES6+ 의 Private class fields에서 쓰는 접두사 '#'

function FactoryFunction(name) {
	this._name = name; // _를 넣으면 private field를 나타냅니다.
}
// ES6+ 도입
// Syntactic Sugar (기능은 동일, 
class FactoryFunction {

}

// Class 예시
class FactoryFunction2 {
	#name // #를 넣으면 똑같이 private field로 인정해줍니다.

	get #decoratedName() {
		return `🎉${this.#name}🎉`
	}
	set #decoratedName(name) {
		this.#name = name
	}
	constructor() {
		this.#decoratedName = 'Son Heung Min'
		console.log(this.#decoratedName)
	}
}

new FactoryFunction2() // 🎉Son Heung Min🎉

⑤ underscore( '_')를 쓰는 underscore.js  & lodash 라이브러리

  JS에서 array, collection, data 등 데이터 구조를 쉽게 다룰 때 사용하는 라이브러리 입니다.

 

⑥ Vue 에서 컴포넌트를 나눌 때 추천하는 Style Guide

Base component names — Vue.js

 

⑦ Redux의 file tree의 Suffix

 

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

/**
 * 매개변수의 순서가 경계다
 *
 * 호출하는 함수의 네이밍과 인자의 순서의 연관성을 고려한다.
 *
 * 1. 매개변수를 2개가 넘지 않도록 만든다.
 * 2. 혹은 arguments, rest parameter 사용
 * 3. 매개변수를 객체에 담아서 넘긴다.
 * 4. 랩핑하는 함수
 */

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

function getFunc(someArg1, someArg3) {
	someFunc(someArg1, undefined, someArg3);
}