[javascript] 추상화하기

Magic number

사용시 숫자를 그대로 넣기보다 상수로 만들어서 흐름을 읽을 수 있도록 하자.
하드코딩을 줄이고 명시적으로 나타낼 수 있도록 함.

Numeric operator

숫자가 커질수록 읽기 힘들어지고 헷갈린다.
아래와 같이 사용 가능함.

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

상수가 수정될까봐 걱정된다면 Object.freeze를 사용하는 것도 방법이다.

네이밍 컨벤션

camelCase
PascalCase
kebab-case
snake_case

• 자바스크립트 예약어와 겹치지 않도록 한다.
• 함수는 동사로 시작한다.
• _, #로 시작한다면 private하다는 의미이다.

뭐 이 밖에도 많지만... 찾아보면 다 나온다.(헤헤)

DOM Api 접근 추상화

const loader = () => {
  const el = document.createElement("div");
  el.setAttribute("class", "flex mt-3");
  const el2 = document.createElement("div");
  el.setAttribute("class", "relative");
  el.append(el2);
  
  return el;
}

보통 뭐 위와 같이 생성, 속성 추가, append, 리턴의 순으로 dom을 조작한다.

• 추상화란 알 필요 없는 것들은 숨기고, 필요한 것만 나타내는 작업이기도 하다.
• html, css를 숨기고 생성하고 스타일링하는 함수를 분리하여 관리한다.

Refactor

const createElem = () => {
  const el = document.createElement("div");
  const el2 = document.createElement("div");
  return {el, el2}
}
const createStyle = ({el, el2}) => {
  el.setAttribute("class", "flex mt-3");
  el.setAttribute("class", "relative");
  
  return {styledEl: el, styledEl2: el2}
}
const loader = () => {
  const {el, el2} = createElem();
  const {styledEl, styledEl2} = createStyle({el, el2});
  styledEl.append(styledEl2);
  
  return styledEl;
}