클린코드 자바스크립트[9] 추상화하기

Magic Number

Magic Number는 의미 있는 이름의 상수로 대체될 수 있는 숫자를 뜻한다.

예를 들어, 아래 시간을 계산하는 부분을

setTimeout(() => {
	scrollToTop();   
}, 3 * 60 * 1000)

아래처럼 추상화할 수 있다.

// util.ts, constants.ts 같은 파일에 담아두고 export 해서 쓸 수 있음.
export const COMMON_DELAY_MS = 3 * 60 * 1000;

setTimeout(() => {
	scrollToTop();   
}, COMMON_DELAY_MS)

getRandomPrice(0, 10);

// 이렇게 나타내면 더 파악하기 쉬움
getRandomPrice(PRICE.MIN, PRICE.MAX);

큰 숫자를 나타낼 때 아래처럼 작성하면 얼마인지 파악하기 어려울 수 있다.

const PRICE = {
	MIN: 1000000,
  	MAX: 100000000,
}

아래처럼 Numeric Operator(_)를 사용하면 한눈에 파악하기 쉽다.
(실제 연산에 영향을 끼치지 않는다!)

// Nuemric Operator
const PRICE = {
	MIN: 1_000_000,
  	MAX: 100_000_000,
}

아래 같은 경우도 추상화할 수 있다.

function isValidName(name){
	return name.length >= 1 && name.length >= 5;
}

숫자를 하드코딩 하지 않고 아래처럼 선언해서 쓰면 된다.
(MIN, MAX 값이 바뀌는걸 막기 위해 freeze 사용)

const CAR_NAME_LEN = Object.freeze({
	MIN: 1,
  	MAX: 5,
})

function isValidName(name){
	return name.length >= CAR_NAME_LEN.MIN && name.length >= CAR_NAME_LEN.MAX;
}

네이밍 컨벤션

저장소, 폴더, 파일, 함수, 변수, 상수, 깃 브랜치, 커밋 등
프로그래밍 전반적으로 네이밍을 위한 규칙이나 관습을 만드는 것

팀이나 개인의 차원에 따라 다를 수 있으며 특히 개인적인 견해와 해석에 따라 다를 수 있다.
하지만 기준을 설정할 때 기본적인 논리와 이유가 있어야 한다.

대표적인 케이스

camelCase // 자바스크립트에서 일반적으로 씀
PascalCase // 함수의 생성자, 클래스, 컴포넌트명, enum
kebab-case // npm 패키지, 저장소, url명
SNAKE_CASE // 상수

접두사, 접미사

접두사(prefix) 예시

data-id
data-name
data-value

함수는 동사로 시작한다.

접미사(suffix) 예시

AppContainer
BoxContainer

ListComponent
ItemComponent

ICar
TCar

연속적인 규칙

// 중첩 for문 작성할 때 i,j,k..
 
// 타입스크립트 제네릭 사용할 때
function func<T, U, V>(name: T, value: U)

자료형 표현

변수명에 자료형을 표현

const inputNumber = 10;
const someArr = [];
const strToNum = 'some code';

이벤트 표현

function on-*
function handle-*
function *-Action
function *-Event
function take-*
function *-Query
function *-All

CRUD

function generator
function gen
function make
function get
function set
function remove
function create
function delete

Flag

const isSubmit
const isDisabled
const isString
const isNumber

주의할 점!

자바스크립트 키워드(예약어)와 겹치지 않게 쓰기!

https://jake-seo-dev.tistory.com/155